TS格式视频
<p>[TOC]</p>
<h2>背景</h2>
<p>解决微信内置浏览器<a href="https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01">安卓端mp4视频动效不自动播放</a>的的异常，确保在不同设备和浏览器环境下都能自动播放动效。</p>
<p><br/><br/></p>
<h2>解决方案</h2>
<h3>1、视频格式转换</h3>
<p>使用 FFmpeg 工具转换将<code>.mp4格式视频</code>转成<code>.ts格式视频</code>。
FFmpeg是一款多媒体视频处理工具，有非常强大的功能包括视频采集功能、 视频格式转换 、视频抓图、视频加水印等。</p>
<p><br/>
<strong><em> 步骤一：安装FFmpeg </em></strong>
1、mac版本使用 <code>Homebrew包管理器</code> 安装ffmpeg</p>
<pre><code>brew install ffmpeg</code></pre>
<p>2、Windows 上安装 FFmpeg 可以通过下载预编译的二进制文件进行安装</p>
<ul>
<li>下载 FFmpeg：前往 FFmpeg 官网 下载最新版的 FFmpeg。</li>
<li>解压缩：将下载的压缩包解压到您想要安装 FFmpeg 的目录中。</li>
<li>配置环境变量：在 Windows 中打开“控制面板”，点击“系统和安全” -> “系统” -> “高级系统设置”，在弹出的窗口中点击“环境变量”，在“系统变量”中找到“Path”，双击它，在弹出的窗口中点击“新建”，输入 FFmpeg 的安装目录，并点击“确定”保存设置。</li>
<li>完成安装：打开命令提示符（Windows+R，输入 cmd 回车），执行 <code>ffmpeg -version</code> 命令，如果输出 FFmpeg 的版本信息，说明安装成功。</li>
</ul>
<p><br/>
<strong><em> 步骤二：.mp4视频转.ts格式 视频 </em></strong></p>
<pre><code>ffmpeg -i home.mp4 -f mpegts -codec:v mpeg1video -b:v 10000k -vf scale=750:-1 -codec:a mp2 home.ts</code></pre>
<p><strong> 命令说明：</strong></p>
<p><strong> 【1】基础命令结构: </strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>-i home.mp4</code></td>
<td>指定输入文件（home.mp4）</td>
</tr>
<tr>
<td><code>-f mpegts</code></td>
<td>强制输出格式为 MPEG-TS（传输流）</td>
</tr>
<tr>
<td><code>home.ts</code></td>
<td>输出文件名（TS格式）</td>
</tr>
</tbody>
</table>
<p><strong> 【2】视频编码参数：</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>-codec:v mpeg1video</code></td>
<td>视频编码器设为 MPEG-1（较老的编码标准，兼容性好但压缩效率低）。</td>
</tr>
<tr>
<td><code>-b:v 10000k</code></td>
<td>视频码率设为 10,000 kbps（10 Mbps），控制输出画质和文件大小。一般：3500k ~ 10000k 区间范围，数字越大越清晰</td>
</tr>
<tr>
<td><code>-vf scale=750:-1</code></td>
<td>缩放视频宽度为 750像素，高度按比例自动计算（-1表示保持原始宽高比）。</td>
</tr>
</tbody>
</table>
<p><strong> 【3】音频编码参数: </strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>-codec:a mp2</code></td>
<td>音频编码器设为 MP2（MPEG-1 Layer II，早期数字电视常用格式）。</td>
</tr>
</tbody>
</table>
<p>注意：MP2 音质比 MP3 稍差，但兼容性更好（适合广播系统）。若需保留原始音频，可改用 -codec:a copy（直接复制，不重新编码）。</p>
<p>右上角有附件视频：可以测试使用。</p>
<p><img src="<a href="http://doc.uc108.org:8002/server/index.php?s=/api/attachment/visitFile&sign=d0d18ce3efa3f17fe1538575b12ad6b6"">http://doc.uc108.org:8002/server/index.php?s=/api/attachment/visitFile&sign=d0d18ce3efa3f17fe1538575b12ad6b6"</a>; width="500px" /></p>
<p><br/></p>
<h3>2、引入第三方库（jsmpeg）</h3>
<p>JSMpeg 是一个用于解码 MPEG1 视频流的 JavaScript 库。它可以在浏览器中解码视频流，并将其呈现为 Canvas 元素。JSMpeg 可以在支持 Canvas 和 WebSocket 的现代浏览器上运行。</p>
<p>Github地址：<a href="https://github.com/phoboslab/jsmpeg?tab=readme-ov-file">https://github.com/phoboslab/jsmpeg?tab=readme-ov-file</a></p>
<p>关键代码：</p>
<pre><code class="language-html"> &lt;div class=&quot;video-container&quot;&gt;
&lt;canvas id=&quot;videoContainer&quot; class=&quot;video-container__canvas&quot;&gt;&lt;/canvas&gt;
&lt;img id=&quot;fallbackImage&quot; class=&quot;video-container__img&quot; src=&quot;assets/video/home.jpg&quot;&gt;
&lt;/div&gt;
&lt;script src=&quot;assets/js/libs/jsmpeg.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
function playVideo () {
const videoSrc = &#039;assets/video/home.ts&#039;; // 视频文件路径
const fallbackImage = document.getElementById(&#039;fallbackImage&#039;);
const canvas = document.getElementById(&#039;videoContainer&#039;);
// 创建JSMpeg播放器
const player = new JSMpeg.Player(videoSrc, {
canvas: canvas,
autoplay: true,
loop: true,
audio: false,
onPlay: function () {
fallbackImage.style.zIndex = -1;
}
});
}
// 当页面加载完成后播放视频
window.addEventListener(&#039;load&#039;, playVideo);
&lt;/script&gt;</code></pre>
<p><br/><br/></p>
<h2>Demo</h2>
<p>示例地址：<a href="https://webonline.tcy365.com/h5-demo/ts-video/index.html">https://webonline.tcy365.com/h5-demo/ts-video/index.html</a></p>
<p><img src="http://doc.uc108.org:8002/server/index.php?s=/api/attachment/visitFile&amp;sign=9c6356a11cb14648bd2ab727f1ae4755" alt="" /></p>