Web视频video自动播放(移动端及PC端)

做了个关于视频播放的活动,被各种问题折腾得精疲力竭。为了日后能够轻松点,特记录下出现的各种问题及解决方法。
活动要适配移动端(IPhone、Android)和PC端(Chrome)
需要解决的问题:移动端禁止全屏播放、视频自动播放
代码最终实现的艰辛历程:

1.<video src="https://www.runoob.com/try/demo_source/movie.mp4"></video>
此时PC端和移动端的展示已经不一样:PC浏览器(Chrome)能够看到视频的第一帧画面,而移动端看不到任何画面,只能看到我设置的视频背景色(黑色)
建议:如果不需要自动播放,那就要给video设置poster了
在这里插入图片描述
2.把自动播放的属性加上
<video src="https://www.runoob.com/try/demo_source/movie.mp4" autoplay></video>
此时移动端微信还是看不到画面,但是会多出一个播放图标,而移动端自带的浏览器(Safari)能够看到画面以及播放图标。
但它们都有一个共同的特点:autoplay加上后都没有自动播放
移动端出现的问题:点击播放按钮后视频会全屏播放
在这里插入图片描述
3.首先想办法解决移动端全屏播放问题
解决方案:添加以下属性即可
x5-playsinline webkit-playsinline=“true” playsinline=“true”

<video src="https://www.runoob.com/try/demo_source/movie.mp4" x5-playsinline webkit-playsinline="true" playsinline="true" autoplay></video>

4.解决自动播放的问题
自动播放研究了很久,最后得出结论:
(1)移动端无法实现自动播放(为了用户体验)。必须用户手动触发某个事件(比如click、tap、touchstart等)调用video.play()方法才能播放
(2)PC端可以自动播放,但要静音播放即video的muted属性设置为true

根据我们的活动,产品经理最后做了以下妥协:
(1)移动端:UI单独设计了一个活动介绍页面(活动入口页面),此页面加了一个按钮(立即体验),点击按钮后调用video的play方法。但是后面觉得按钮不合适,去掉了按钮改成了“了解更多”箭头。因为我们的活动是滑动分页展示其他页面,我用了fullpage插件。所以最终改成了还是有一个活动介绍页面,此页面底部加一个“了解更多”箭头,当用户滑动展示第二页的时候,才开始播放第一个视频。所以我给第一页加了一个touchstart方法,里面调用了第1个视频的play方法,然后又立即将其pause暂停。然后在fullpage的afterLoad回调函数里加入对应页面视频的play方法。
这样做的原因:因为直接在fullpage的afterLoad加入play方法并不能播放,必须写一个事件去触发某个视频播放,后续fullpage的afterLoad加入play方法才有效果。所以我在第一个页面的touchstart加入了play立马又pause的代码
(2)PC端:因为PC拿不到touchstart事件,所以PC改成了自动播放静音视频,在页面右上角加了一个声音开关(用户手动触发是否开启视频声音)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值