手机网页抓取视频(手机浏览器无法自动播放视频自动播放的限制，导致无法*敏*感*词*video的完成)
优采云 发布时间: 2022-03-28 08:14手机网页抓取视频(手机浏览器无法自动播放视频自动播放的限制，导致无法*敏*感*词*video的完成)
1、质疑
有一天，我收到一个请求，我需要在手机的H5页面上添加一个视频。我很高兴地完成了它。正要送的时候，问题来了。PM希望用户进入页面，视频就会开始播放，不需要用户手动点击。
2、尝试解决添加自动播放
“视频自动播放”的要求是可以的，那么我将在视频标签中添加一个自动播放属性。我是在PC浏览器上采访的，运行流畅没有任何问题，但是我放在手机浏览器中。打开它与不设置自动播放相同。
显示器可以播放
如果不行的话，我在加载页面的时候听视频的canplay，然后执行play()，应该可以了吧？但是，当我把它放在手机上时，它仍然不起作用。
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
video.play();
})
3、思考
问题是，添加自动播放不起作用，可以理解，可能是手机浏览器不支持这个属性，但是我监控视频加载完成，手动去play()，这是程序的正常方法，为什么它不起作用吗？
我尝试在*敏*感*词*回调中添加警报，发现没有弹出框。
所以想了半天，手机浏览器由于内存大小的限制，无法自动播放视频，导致无法监控视频加载完成。
4、解决方案 1 使用弹出窗口
昨天逛了段子，发现目前的手机浏览器是不允许网页内视频自动播放的，视频只能和用户互动后才能播放。（音频也是如此，这里不再赘述）
我试了一下，在页面上加了一个弹框。用户点击弹框后（相当于完成一次交互），视频开始播放，发现可以播放。部分代码如下。
视频自动播放
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;
}
<p>页面内有自动播放视频 请注意流量
我知道了
function playVideo() {
document.getElementById('mask').style.display = 'none';
var video = document.querySelector('#video');
video.play();
}
</p>
因此，解决视频自动播放的一般做法是在页面加载完毕时与用户进行交互，然后开始自动播放（这样手机浏览器才真正重视用户的流量。）
存在的问题
按照上面的方法，只要你想在手机页面进入页面，视频会立即自动播放，你必须使用额外的动作来引导与用户的交互。是不是很丑，有什么办法可以避免吗？借助弹出框？答案是肯定的。
选项 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.此视频无声播放
附参考链接：微信安卓自动播放视频（交互，设置级别，无控制栏，非X5）ffmpeg,jsmpeg.js,.ts视频
5、附加
1.虽然最后不管用什么方法，都实现了自动播放视频的需求，但是在实际播放的例子中，你会发现，在使用video标签的时候，虽然视频都设置好了，还不够。函数，所以需要在视频中使用以下属性
这将允许您在固定区域播放视频。
2.有了方案一的思路，其实可以实现用户上传视频时的预览
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();
}
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、总结
其实浏览器中关于视频的问题困扰了我很久。昨天浏览到“chrome66禁用自动播放后，有没有更好的方法来实现音频的自动播放？” 当我进去看到答案时，我突然想起了视频是否相同。我今天看了，也是一样的。我解决了很长时间的疑惑，所以我鼓励自己要善于发现和推断其他事情。
不管是上面提到的解决方案还是补充，大概可以解决一半以上手机浏览器中视频相关的问题，剩下的问题还有机会补充。
参考链接：
chrome66禁用自动播放后，有没有更好的方法来实现音频自动播放？
微信安卓自动播放视频（互动，设置关卡，无控制栏，非X5）ffmpeg,jsmpeg.js,.ts视频
mac osx下homebrew安装
使用ffmpeg安装Mac系统
HTML5音视频播放（Video、Audio）及常见坑处理
微信和QQ浏览器不能全屏播放视频
