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

时间 2019-11-09

标签手机浏览器自动播放视频 video 设置 autoplay 无效解决方案栏目浏览器繁體版

原文原文链接

一、问题的提出

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

二、尝试解决

加autoplay

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

监听canplay

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

<video id="video" src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
   video.play();
})

三、思考

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

四、解决方案

方案1 使用弹框

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>视频自动播放</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    .video-container {
      width: 300px;
      height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
    }
    #video {
      display: block;
      width: 100%;
    }
    #mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.83);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .pop-container {
      width: 250px;
      height: 200px;
      background: white;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    button {
      width: 50px;
      height: 30px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<div class="video-container">
  <video id="video" src="video.mp4"></video>
</div>
<div id="mask">
  <div class="pop-container">
    <p>页面内有自动播放视频 请注意流量</p>
    <button onclick="playVideo()">我知道了</button>
  </div>
</div>
<script>
  function playVideo() {
    document.getElementById('mask').style.display = 'none';
    var video = document.querySelector('#video');
    video.play();
  }
</script>
</body>
</html>

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

存在的问题

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

方案2 使用jsmpeg.js

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

<canvas id="canvas" height="750" width="750"></canvas>

页面加载完成的时候执行下面的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视频服务器

五、补充

1.虽然最后无论经过什么方法，算是实现了视频自动播放的需求，可是在真正播放的示例中，你会发现，使用video标签的时候，虽然设置了视频的宽高，可是不起做用，因此须要在video中使用下面的属性
<video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
这样就能够在固定区域播放视频了。
2.借助方案1的思路，其实能够实现用户上传视频时的预览微信

<input type="file" id="filepicker" accept="video/mp4" onchange="chooseVideoInput()">
<div class="video-container">
  <video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
</div>
<script>
  function chooseVideoInput() {
    var files = document.getElementById('filepicker').files[0];
    var video = document.getElementById('video');
    // 注意下面3行代码
    var url = URL.createObjectURL(files);
    video.src = url;
    video.play();
  }
</script>

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的路径)，亲测有效

六、总结

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

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