iOS 视频自动播放 #30
Description
需求描述
在部分 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 这三个标签，共同保证能够在浏览器中以小窗方式播放视频。
参考资料
- iOS 微信 音频 视频自动播放
- DOMException: Failed to load because no supported source was found
- DOMException: The play() request was interrupted
- hls.js 的官方文档
- How to tell if a ：判断视频是否处于播放状态的方法。
实际代码
<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://appwritefunc.yet-another-testing-domain.com/api/grab/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 还要命呐……