移动端H5自动播放视频

zhezhongyun 2024-12-14 16:09 39 浏览

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

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

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

解决方案

法一引导用户点击或滑动

进入网站时弹窗，例如欢迎语等，用户点击关闭后执行视频播放
简单粗暴的方法，在某些场景时适用的，实测在安卓、鸿蒙、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>

其他问题

移动端自动全屏播放视频

<video webkit-playsinline="webkit-playsinline" playsinline></video>

如果你对音视频开发感兴趣，觉得文章对您有帮助，别忘了点赞、收藏哦！或者对本文的一些阐述有自己的看法，有任何问题，欢迎在下方评论区讨论！

HTML 视频(Videos)播放

上一篇：亲测好用的无损音乐播放器:Audirvana for Mac中文版
下一篇：手把手教你eBay商品详情页嵌入视频

移动端H5自动播放视频

解决方案

法二 jsmpeg

其他问题

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?