使用JSMpeg实现移动端播放自动视频

忠实米线2025-12-11 12:12

html 复制代码

<canvas id="bancanvas" class="mobshow" data-url="../video/about.ts" data-img=""></canvas>
<script src="/js/jsmpeg.min.js"></script>
<script>
 var canvas1 = document.getElementById('bancanvas');
		 var url1 = $('#bancanvas').attr('data-url');
		 var img1 = $('#bancanvas').attr('data-img'); 
		 var player1 = new JSMpeg.Player(url1, {
                canvas: canvas1, 
                autoplay: true,
                loop:true,
                poster: img1,
                decodeFirstFrame: true, // 是否解码并显示视频的第一帧，默认true
                audio: true,  // 是否解码音频 - player无此属性 
                video: true,  // 是否解码视频 - player无此属性 
                pauseWhenHidden: true, // 当选项卡处于非活动状态时是否暂停播放 - player无此属性
                disableGl: false,  // 是否禁用WebGL并始终使用Canvas2D渲染器 - player无此属性
                disableWebAssembly: false,  // 是否禁用WebAssembly并始终使用JavaScript解码器 - player无此属性
                preserveDrawingBuffer: false, // 是否使用preserveDrawingBuffer创建WebGL上下文 - player无此属性
                progressive: true, // 是否以块加载数据(仅限静态文件)
                throttled: true, // 是否在不需要播放时延迟加载块 - player无此属性
                chunkSize: 1048576, // 每次加载的块大小，单位为字节，默认(1024*1024=1048576)即1mb
                onSourceEstablished:function(source){ 
                },
            });
            </script>

把mp4转成ts格式步骤：

1.下载 https://www.gyan.dev/ffmpeg/builds/压缩包

2.按下 Win + R，输入 sysdm.cpl，回车 → 打开系统属性；

点击顶部的 "高级" 选项卡；

点击右下角 "环境变量" 按钮；

在 "系统变量" 区域（下面那个框），找到名为 Path 的变量，选中它，点击 "编辑"；

在新窗口中，点击 "新建"；

输入你刚才解压的 bin 文件夹路径：C:\ffmpeg\bin

3.重新打开cmd窗口：

ffmpeg -i "D:\项目\web\video\strategy.mp4" ^

-f mpegts ^

-c:v mpeg1video ^

-b:v 1000k ^

-r 25 ^

-s 640x360 ^

-g 25 ^

-bf 0 ^

-an ^

-muxdelay 0 ^

-muxpreload 0 ^

-avoid_negative_ts make_zero ^

-mpegts_flags +initial_discontinuity+resend_headers ^

-mpegts_copyts 1 ^

"D:\项目\web\video\strategy.ts"