利用ffmpeg转ts视频，通过jsmpeg.js播放(自动播放视频，无video默认控制条）

最新推荐文章于 2024-05-31 18:51:30 发布

街角小强

最新推荐文章于 2024-05-31 18:51:30 发布

阅读量7.3k

点赞数

分类专栏：自动播放视频文章标签：自动播放视频无控制条播放视频

本文链接：https://blog.csdn.net/weixin_43029824/article/details/103391494

版权

自动播放视频专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近研究了下视频自动播放，无控制条问题，记录下。

文章已同步至我的 github https://github.com/zhangqiang0821/auto-play-video

尝试解决

加autoplay
“视频自动播放”这个需求是ok的，那我就在video标签上加个autoplay属性嘛，在PC端浏览器里面试了一下，运行流畅，没有遇到什么问题，但是放在手机浏览器里面打开，就跟没设置autoplay是一样的。

监听canplay
那不行的话，我在页面加载完成的时候，监听video的canplay，然后执行play()，应该可以运行了吧？然而放到手机里一看，还是不行。

<video id="video" src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
   video.play();
})

手动触发播放
借助一个额外的动作去引导与用户发生一次交互，触发视频播放，效果是可以，但是不满足真正进入页面就播放视频的需求，

$('html').one('touchstart', function() {
      $('video')
        .get(0)
        .play()
    })

方案

1、下载 jsmpeg.js

ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64

https://evermeet.cx/ffmpeg/ mac OS X 64

jsmpeg.js :https://github.com/phoboslab/jsmpeg

2、使用
win 64 版为例：
下载 ffmpeg 后,解压 ffmpeg，进入 bin 目录看到几个 exe 这就是处理程序。
下载解压后：
在这里插入图片描述

win+r 输入 cmd 打开命令窗口，转到 bin 目录，并输入转码代码:
ffmpeg -i demo1.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 ts.ts

画质清晰些的转码代码：
ffmpeg -i niudan.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -q 0 out22.ts

demo1.mp4 是我们要原始视频（这里我直接把视频放在 bin 目录里）

回车运行后，bin 目录输出 ts.ts

更多参数配置命令

ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640x1040 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out.ts
原始视频　　　　　　　　　　　　　　导出尺寸　导出码率导出帧频　　　　　　　音频采样率　　音频比特率

ps:相关参数请参看https://github.com/phoboslab/jsmpeg 文档

播放控制：

play() – start playback
pause() – pause playback
stop() – stop playback and seek to the beginning
destroy() – stops playback, disconnects the source and cleans up WebGL and WebAudio state. The player can not be used afterwards.
volume – get or set the audio volume (0-1)
currentTime – get or set the current playback position in seconds

例如 player.pause()

注意：

清晰度和原视频差不多的条件下，码率几乎需要多设置 1 倍；
跨域问题
jsmpeg 请求 ts 媒体文件，使用的是 XMLHttpRequest，且同时使用了 setRequestHeader(“Range”, “bytes=xxxx”); 来请求切割数据，这样拿到我们设定 xxx 的字节的数据后，我们可以及时对数据进行处理（jsmpeg 设置参数 chunkSize 就是这里的 xxx）。
因为跨域，切割数据服务器认为这是对文件进行二次操作所以被拒绝。
demo必须放在服务器上面跑才能正常加载ts文件，如果是在本地的话，不能直接拖进浏览器运行，需要起个本地服务器
ts文件编码方式必须为MPEG编码，考虑到现在先进的ts编码方式是H.264了，之前用H.264编码的ts发现播放不了

那么对服务进行配置一下：我这里使用的 serve 工具跑个服务即可

serve 实例：

首先需要安装 node
使用 npm 命令行来安装 serve
npm install -g serve
安装完成后，使用 serve -s .\dist 进入文件文件目录就可以了

<body>
    <canvas id="video-canvas"></canvas>    
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        var canvas = document.getElementById('video-canvas');
        var url = 'demo-ts.ts';
        //var url = 'ws://'+document.location.hostname+':8082/';
        var player = new JSMpeg.Player(url, {canvas: canvas,loop: true, autoplay: true});
    }
    </script>
</body>

总结

其实关于浏览器video的问题困扰了我很久，昨日在segment上浏览到“chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗”这样一个提问的时候，进去看到回答，突然想起video是不是也是一样的情况，今天看了下，果然是类似的，解了很久的疑问，所以勉励自己一定要善于发现并举一反三。
上面提到的不论是解决方案或者说补充的，大概能解决一大半手机浏览器视频相关的问题，剩下的问题有机会再补充。

参考链接：
chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗
 微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频
 mac osx 下 homebrew安装
 mac 系统安装使用 ffmpeg
HTML5音视频播放(Video,Audio)和常见的坑处理
 video在微信和QQ浏览器中不全屏播放解决

街角小强

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
利用ffmpeg转ts视频，通过jsmpeg.js播放(自动播放视频，无video默认控制条）

最近研究了下视频自动播放，无控制条问题，记录下。尝试解决加autoplay“视频自动播放”这个需求是ok的，那我就在video标签上加个autoplay属性嘛，在PC端浏览器里面试了一下，运行流畅，没有遇到什么问题，但是放在手机浏览器里面打开，就跟没设置autoplay是一样的。监听canplay那不行的话，我在页面加载完成的时候，监听video的canplay，然后执行play()，应...
复制链接

扫一扫