微信端视频自动播放的兼容方案

背景

我们希望确保视频在 PC 端、移动端（包括微信内置浏览器）页面加载时自动播放。但是微信内置浏览器对自动播放功能存在限制。为了解决这一问题，我们尝试将视频转换为 .ts 格式，并利用 Canvas 进行视频推流的方式绕开浏览器对自动播放的限制，确保在不同设备和浏览器环境下都能自动播放。

浏览器对视频自动播放的限制

通用浏览器限制

移动端默认屏蔽自动播放
1. iOS Safari 和大部分 Android 浏览器默认禁止视频自动播放（即使添加 autoplay 属性），要求必须通过用户主动交互（如点击）触发播放。
2. 例外：若视频设置为静音（muted 属性），部分浏览器允许自动播放。
桌面浏览器的宽松策略 桌面端浏览器（如 Chrome、Firefox）通常支持静音视频自动播放，但非静音视频仍可能被拦截。

微信内置浏览器的特殊限制

微信浏览器基于 X5 内核，对视频播放的控制更为严格：

iOS 微信浏览器
1. 必须通过监听 WeixinJSBridgeReady 事件触发播放，直接调用 video.play() 无效。
2. 需结合用户交互（如页面加载后自动播放需绑定触摸事件）。
Android 微信浏览器
1. 几乎无法实现自动播放，即使使用 WeixinJSBridgeReady 事件或静音属性，仍需用户点击触发。
2. 部分版本可能加载视频封面，但播放仍需手动操作。

解决方案：视频转 TS 格式并使用 JSMpeg 播放

将mp4视频转化为ts格式

采用了将视频转换为 TS 格式，并使用 JSMpeg 在 Canvas 上进行视频播放的方案。

参考：github.com/phoboslab/j...

在mac上安装Homebrew

Homebrew是什么？

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，并且关心各种依赖和文件路径的情况，十分方便快捷。

官网：Homebrew 中文网

安装命令：

js 复制代码

/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"

安装成功：

验证是否安装成功：

js 复制代码

brew -v

在mac上安装ffmpeg

ffmpeg是什么？

FFmpeg是一款多媒体视频处理工具，有非常强大的功能包括视频采集功能、 视频格式转换 、视频抓图、视频加水印等。

安装ffmpeg：

js 复制代码

brew install ffmpeg

验证：

js 复制代码

ffmpeg -version

视频转ts格式

js 复制代码

1.进入文件夹
ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts

2. 代码参考

在代码中引用 jsmpeg，利用canvans播放视频。

js 复制代码

<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 = 'https://lilithimage.lilithcdn.com/allgames-official-web/afkjourney/cn/img-m/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>

附录：

blog.csdn.net/weixin_4429... blog.csdn.net/qq_37514538...