在video标签上加个autoplay属性，在PC端浏览器里面运行流畅，但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的，只有与用户进行了一次交互动作，才可以播放视频。（音频同理）
方案一：在页面上加一个弹框，用户点击了弹框之后(相当于一次交互完成)，开始播放视频，发现是可以播放的，部分代码如下：
<!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>
|
方案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.这样播出的视频是没有声音的
发表评论