手机浏览器自动播放视频video（设置autoplay无效）的解决方案

channg 发布于2019-07-16 16:08 / 1680人阅读

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决

1、问题的提出

某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。

2、尝试解决 加autoplay

“视频自动播放”这个需求是ok的，那我就在video标签上加个autoplay属性嘛，在PC端浏览器里面试了一下，运行流畅，没有遇到什么问题，但是放在手机浏览器里面打开，就跟没设置autoplay是一样的。

监听canplay

那不行的话，我在页面加载完成的时候，监听video的canplay，然后执行play()，应该可以运行了吧？然而放到手机里一看，还是不行。


var video = document.querySelector("#video");
video.addEventListener("canplay", function () {
   video.play();
})

3、思考

问题来了，加autoplay不行，可以理解，可能手机浏览器不支持这个属性吧，但是我监听视频加载完成，手动去play()，这是程序常规方法，为什么也不行？
我尝试在监听回调里面加了个alert,发现没有弹出框。
所以我很长一段时间认为，手机浏览器无法自动播放视频，是因为内存大小的限制，导致无法监听video的加载完成。

4、解决方案 方案1 使用弹框

昨天在segment上游荡，发现了原来现在的手机浏览器是不允许网页中视频自动播放的，只有与用户进行了一次交互动作，才可以播放视频。（音频同理，这里就不重复提）
我尝试了一下，在页面上加一个弹框，用户点击了弹框之后(相当于一次交互完成)，开始播放视频，发现是可以播放的，部分代码如下。




  
  
  视频自动播放
  




  


  
    页面内有自动播放视频 请注意流量

所以解决视频自动播放的一般做法是，在页面加载的时候弹框与用户产生交互，然后才能开始自动播放(如此看来，手机浏览器是真的很重视用户的流量了。）

存在的问题

按照上面的方法，只要想要在手机端页面中实现进入页面，视频立即自动播放，就必须要借助一个额外的动作去引导与用户发生一次交互，那岂不是很丑，有没有办法是可以不借助弹框呢？答案是有的。

方案2 使用jsmpeg.js

jsmpeg是一款视频解码器，具体怎么用，可以百度相关文档，实话说我对此也不熟悉，第一次听见的时候是听说jsmpeg可以实现网页端的视频直播功能，这一次用来解决视频自动播放的需求也是借鉴别人的想法。
关键代码如下：（前提：项目中已经引入了jsmpeg.min.js）



页面加载完成的时候执行下面的js代码：
var canvas = document.querySelector("#canvas");
// 注意这里需要将video.mp4转换成ts格式的文件 才能生效
var player = new JSMpeg.Player("video.ts", { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();

//  onUnlocked方法
function onUnlocked() {
    player.volume = 1;
}

这样即使不跟用户产生交互视频也能自动播放了，
注意点
1.demo必须放在服务器上面跑才能正常加载ts文件，如果是在本地的话，不能直接拖进浏览器运行，需要起个本地服务器
2.ts文件编码方式必须为MPEG编码，考虑到现在先进的ts编码方式是H.264了，之前用H.264编码的ts发现播放不了
存在的问题
1.这样播出的视频是没有声音的
附参考链接：微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频

5、补充

1.虽然最后不管通过什么方法，算是实现了视频自动播放的需求，但是在真正播放的示例中，你会发现，使用video标签的时候，虽然设置了视频的宽高，但是不起作用，所以需要在video中使用下面的属性

这样就可以在固定区域播放视频了。
2.借助方案1的思路，其实可以实现用户上传视频时的预览

3.将mp4转换成jsmpeg可播放的ts文件的方法
mac os下安装homebrew,之后使用brew install jsmpeg，运行下面命令：ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts (其中in.mp4和out.ts填写原视频的路径以及转出ts的路径)，亲测有效

6、总结

其实关于浏览器video的问题困扰了我很久，昨日在segment上浏览到“chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗”这样一个提问的时候，进去看到回答，突然想起video是不是也是一样的情况，今天看了下，果然是类似的，解了很久的疑问，所以勉励自己一定要善于发现并举一反三。
上面提到的不论是解决方案或者说补充的，大概能解决一大半手机浏览器视频相关的问题，剩下的问题有机会再补充。

参考链接：
chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗
微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频
mac osx 下 homebrew安装
mac 系统安装使用 ffmpeg
HTML5音视频播放(Video,Audio)和常见的坑处理
video在微信和QQ浏览器中不全屏播放解决

云服务器服务器托管 <video>如何播放webrtc视频手机浏览器播放视频自动播放 js 视频自动播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/34645.html

手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

fyber 2019-08-23 12:57 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

UsherChen 2019-08-02 11:58 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

Jinkey 2019-06-21 16:18 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

scola666 2019-08-05 15:24 评论0 收藏0
H5中video标签那些属性和方法

摘要：前言最近在写一个自定义播放器写之前我们肯定要把播放器的属性和方法全部过一遍知彼知己方能百战不殆嘛后面会把自己写的播放器和踩过的一些坑也上传上来标签行内属性视频的视频封面，没有播放时显示的图片预加载自动播放循环播放浏览器自带的控制条视频宽度视前言最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些...

lushan 2019-08-05 17:27 评论0 收藏0