最近研究了下视频自动播放,无控制条问题,记录下。
文章已同步至我的 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()
那么对服务进行配置一下 :我这里使用的 serve 工具 跑个服务即可
<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浏览器中不全屏播放解决