关于H5的video自动播放踩坑

背景

接了一个项目，需求方要做一个H5，然后一进来页面就是一个视频，需要一进来视频就开始播放

问题

一开始没想那么多，记得视频是有自动播放属性的就直接和他说嗯，可以，能做。

然后噩梦开始了，自动播放属性不生效->浏览器噤声可自动播放->手机端无法自动播放->手机端在微信打开的苹果机能自动播放->放弃

根本原因

赋予用户更多的选择权？

有的浏览器不允许非静音自动播放，如谷歌、火狐浏览器等，所以要加上muted属性，才会自动播放大概就是这个吧

手机端的原因：考虑用户流量浪费+带宽压力

这个其实更好理解，就是为什么我在本地开发可以实现噤声自动播放，为啥到了真机就不行，首先环境不一样，一般我们在PC端不会有流量的烦恼，而在手机端，为了用户体验，实际上应该是要为用户的流量考虑的，一打开就吭哧吭哧的先弄你几十M流量，大概率用户也会很不开心另一个是带宽压力，加载视频流这些~

解决方案

简单说一下几种解决方案吧

内嵌在微信中的H5 利用微信的WeixinJSBridgeReady事件

能解决内嵌在微信端的H5页面IOS自动播放，并且带声，安卓不行，并且安卓部分机型不会取第一帧作为视频首页

<video controls class="video-player" style=" object-fit:fill" webkit-playsinline="true" x-webkit-airplay="true"
      playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true"
      preload="auto" autoplay="autoplay" x5-playsinline="true" id="videoID"
      src="xxxxx"></video>

document.addEventListener("WeixinJSBridgeReady", function () {
          document.getElementById("videoID").play();
        }, false);

利用一个按钮的点击事件去触发视频的播放

网上存在说用定时器延时去触发video的播放，就像模拟用户点击

<video controls class="video-player" style=" object-fit:fill" webkit-playsinline="true" x-webkit-airplay="true"
      playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true"
      preload="auto" autoplay="autoplay" x5-playsinline="true" id="videoID"
      src="xxxxx"></video>
 <button @Click="play" id="btn"></button>
 
 
 play(){
   document.getElementById("videoID").play();  
 }
   
   
 document.getElementById("btn").click()

大概就这样吧，然后我自己亲测是会提示错误，大致意思就是视频的第一次播放不能通过js触发不过大家可以试一下，可能是我打开的方式不对

那有没有能解决的方案呢，还真的有，jsmpeg

原理是将视频拆成音频和帧图片，然后再通过长链接去返回图片这些东西，具体需要后台配合，包括视频的文件的解析什么的，感兴趣的可以去玩玩看