如何网页视频自动播放（怎么把网页视频设置成自动播放）

可能是出于节省用户流量，许多移动端浏览器都不支持H5自动播放视频，必须在用户主动交互（点击或者滑动等）后才可以通过js播放视频

PC端可以通过设置muted，自动播放静音视频

安卓浏览器均不支持自动播放，实测在微信内置浏览器，滑动视为交互行为，可以在这之后播放视频，抖音内置浏览器则需要点击交互，鸿蒙系统浏览器可以自动播放静音视频

如何网页视频自动播放,怎么把网页视频设置成自动播放(1)

解决方案

法一引导用户点击或滑动

进入网站时弹窗，例如欢迎语等，用户点击关闭后执行视频播放
简单粗暴的方法，在某些场景时适用的，实测在安卓、鸿蒙、IOS、抖音浏览器等均可以用这个方法解决

close() {
const videos = Document.querySelectorAll('video');
for (let i = 0; i < videos.length; i ) {
const element = videos[i];
element.play();
}
}

【更多音视频学习资料，点击下方链接免费领取↓↓，先码住不迷路~】

点击领取→

法二 jsmpeg

将视频转成ts格式，通过jsmpeg解码器进行加载播放，可以实现自动播放，实测基本上可以解决所有移动端无法播放视频的问题

转ts

安装ffmpeg，输入命令将mp4转成ts

s - 分辨率
b - 码率 b:v代表视频码率 b:a代表音频码率
r - 帧频

ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 引入jsmpeg
<script src="./jsmpeg.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" height="750" width="750"></canvas>
<script>
var canvas = document.querySelector("#canvas");
// 加载ts文件
var player = new JSMpeg.Player("./out.ts", {
canvas: canvas,
loop: true, // 循环播放
autoplay: true, // 自动播放
audio: false, // 禁用音频
});
player.play();
</script>
</body>
</html>