背景
我们希望确保视频在 PC 端、移动端（包括微信内置浏览器）页面加载时自动播放。但是微信内置浏览器对自动播放功能存在限制。为了解决这一问题，我们尝试将视频转换为 .ts 格式，并利用 Canvas 进行视频推流的方式绕开浏览器对自动播放的限制，确保在不同设备和浏览器环境下都能自动播放。
浏览器对视频自动播放的限制
通用浏览器限制
-
移动端默认屏蔽自动播放
- iOS Safari 和大部分 Android 浏览器默认禁止视频自动播放（即使添加
autoplay属性），要求必须通过用户主动交互（如点击）触发播放。 - 例外：若视频设置为静音（
muted属性），部分浏览器允许自动播放。
- iOS Safari 和大部分 Android 浏览器默认禁止视频自动播放（即使添加
-
桌面浏览器的宽松策略 桌面端浏览器（如 Chrome、Firefox）通常支持静音视频自动播放，但非静音视频仍可能被拦截。
微信内置浏览器的特殊限制
微信浏览器基于 X5 内核，对视频播放的控制更为严格：
-
iOS 微信浏览器
- 必须通过监听
WeixinJSBridgeReady事件触发播放，直接调用video.play()无效。 - 需结合用户交互（如页面加载后自动播放需绑定触摸事件）。
- 必须通过监听
-
Android 微信浏览器
- 几乎无法实现自动播放，即使使用
WeixinJSBridgeReady事件或静音属性，仍需用户点击触发。 - 部分版本可能加载视频封面，但播放仍需手动操作。
- 几乎无法实现自动播放，即使使用
解决方案：视频转 TS 格式并使用 JSMpeg 播放
1. 将mp4视频转化为ts格式
采用了将视频转换为 TS 格式，并使用 JSMpeg 在 Canvas 上进行视频播放的方案。
参考：https://github.com/phoboslab/jsmpeg?tab=readme-ov-file
在mac上安装Homebrew
Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，并且关心各种依赖和文件路径的情况，十分方便快捷。
官网：Homebrew 中文网
安装命令：
/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"
安装成功：
brew -v
在mac上安装ffmpeg
FFmpeg是一款多媒体视频处理工具，有非常强大的功能包括视频采集功能、 视频格式转换 、视频抓图、视频加水印等。
brew install ffmpeg
验证：
ffmpeg -version
视频转ts格式
1.进入文件夹
ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts
2. 代码参考
在代码中引用 jsmpeg，利用canvans播放视频。
<img id="fallbackImage" class="fallback-image" src="封面图.png" alt="Fallback Image" >
<canvas id="videoContainer" class="background-video"></canvas>
<script src="./js/jsmpeg.min.js"></script>
<script>
function playVideo () {
const videoSrc = '../out.ts';
const fallbackImage = document.getElementById('fallbackImage');
const canvas = document.getElementById('videoContainer');
const player = new JSMpeg.Player(videoSrc, {
// videoBufferSize: 512*1024, //视频缓冲区大小，可以调整
// audioBufferSize: 128*1024, //音频缓冲区大小，可以调整
bufferSize: 1024 * 1024, // 设置为 1MB 缓冲区
canvas: canvas,
autoplay: true,
loop: true,
audio: false,
onPlay: function () {
fallbackImage.style.zIndex = -1;
},
});
}
// 调用函数播放视频
playVideo();
</script>
