Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iOS 视频自动播放 #30

Closed
Dream4ever opened this issue Jun 2, 2018 · 0 comments
Closed

iOS 视频自动播放 #30

Dream4ever opened this issue Jun 2, 2018 · 0 comments
Labels
Front-end Everything you see and experience HTML HTML language, not webpage JS Javascript UX User experience

Comments

@Dream4ever
Copy link
Owner

Dream4ever commented Jun 2, 2018 •
edited

需求描述

在部分 iPhone 机型的微信客户端中，视频默认是无法自动播放的。

方案调研

应用过程

先 Google：iOS 微信 视频 preload，iOS 微信 音频 视频自动播放 这篇文章说需要结合微信 JS-SDK 才可以。

经过测试之后，发现不只是微信，iOS 下的 Chrome 也可以自动播放了。

但是按照上面的设置之后，在页面中再次测试，发现页面报错，不显示内容了。

因为一方面给 video 标签开启了 autoplay 属性，另一方面又通过上面的代码让视频自动播放，可能是这样重复的设置导致页面出现了 bug。于是按照下面的流程研究，总算解决了：

Google 关键字：DOMException: Failed to load because no supported source was found
参考链接：DOMException: Failed to load because no supported source was found。

现在虽然浏览器中能正常播放视频了，但是控制台中总会报错，这里给出了官方的说明：DOMException: The play() request was interrupted。

仔细检查代码，发现在两个地方都执行了 video.play() 方法，因为这个方法返回的是 Promise 对象，所以第二次执行该方法时就会报这个错误（说法可能不准确）。

hls.js 的官方文档 还介绍了如何实现流媒体的自动播放。

经过测试，最后发现上面 hls.js 官方文档提供的自动播放的方法在 iOS 下无效，还需要结合前面 playPromise 相关的方法才能实现真正的 iOS 下的自动播放。

此外，还需要判断指定视频当前是否在播放状态，然后只对未开始播放的视频执行 play() 方法，这样才能避免代码报错。

判断视频是否处于播放状态的方法：How to tell if a 。

另外还需要设置微信，不让它自动进入全屏模式播放视频：微信内置浏览器 如何小窗不全屏播放视频？

playsinline、x5-playsinline 和 webkit-playsinline 这三个标签，共同保证能够在浏览器中以小窗方式播放视频。

参考资料

实际代码

<body>
  <video
      id="video"
      controls
      autoplay="autoplay"
      preload="auto"
      playsinline="true"
      x5-playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      data-setup="{}">
  </video>
</body>
<script src="https://cdn.bootcss.com/hls.js/0.9.1/hls.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

initVideo () {
  let video = document.getElementById('video');
  if(Hls.isSupported()) {
    let hls = new Hls();
    hls.loadSource(this.videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
    });
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = this.videoSrc;
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }
}

autoPlay () {
  let video = document.getElementById('video');
  let isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2;
  if (!isPlaying) {
    let playPromise = video.play();
    if (playPromise !== undefined) {
      playPromise
        .then(function () {})
        .catch(function (error) {
          console.log(error);
        });
    }
  }
  document.addEventListener('WeixinJSBridgeReady', function () {
    if (!isPlaying) {
      let playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise
          .then(function () {})
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  }, false);
}

要点总结

移动端多版本的适配比 PC 还要命呐……
@Dream4ever Dream4ever added Front-end Everything you see and experience HTML HTML language, not webpage JS Javascript Webpage UX User experience labels Jun 2, 2018
@Dream4ever Dream4ever removed the Webpage label Jun 6, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Front-end Everything you see and experience HTML HTML language, not webpage JS Javascript UX User experience
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Dream4ever