<video src="http://xxx.mp4" x5-video-player-type="h5"/>
x5-video-player-type="h5" 只适用于微信浏览器
注意:
1.jsmpeg 需要将视频转为.ts的文件
先安装ffmpeg,然后执行以下命令,将mp4格式的文件转成 .ts(用命令行转的才能正常播放)
ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路径不太好找,建议全局搜索一下)
2.安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隐藏控制条等设置
3. http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js 请使用此js,原作者的js没有回调设置
4. https://github.com/phoboslab/jsmpeg 原作者github地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSMpegPlayer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<style>
html,body{
padding: 0
margin: 0
}
.msg-wrap{
position: fixed
top: 0
left: 0
background: #fff
border: 1px solid #000
}
.video-wrap{
width: 100%
display: none
}
</style>
</head>
<body>
<video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"></video>
<canvas class="video-wrap" id="video-android"></canvas>
<div class="msg-wrap" id="msgTxt">loading...</div>
<script src="http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js"></script>
<script>
var msgTxt = document.getElementById('msgTxt')
var video = document.getElementById('video-ios')
var canvas = document.getElementById('video-android')
//检测是否为非安卓浏览器并作处理
var check = !! navigator.userAgent.match(/\(i[^]+( U)? CPU.+Mac OS X/)
if(check){
msgTxt.innerHTML = "not Android mode"
video.style.display="block"
video.play()
//监听video加载完成
video.addEventListener("loadedmetadata",function(){
msgTxt.innerHTML = "not Android mode:videoPlaying"
})
//监听video播放结束
video.addEventListener("ended",function(){
msgTxt.innerHTML = "not Android mode:videoEnd"
})
}else{
// jsmpegPlay(canvas,'1_BG_4s_5.ts',startCallBack,playingCallBack,endCallBack)
jsmpegPlay(canvas,'out.ts',startCallBack,playingCallBack,endCallBack)
}
function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {
var player = new JSMpeg.Player(
vVideo ,{
canvas: Vcanvas,
loop: false,
autoplay: true,
startSign: true,
startCallBack: startFun,
playingCallBack: playingFun,
endCallBack: endFun
})
}
//视频开始播放（即解码完成）执行
function startCallBack() {
msgTxt.innerHTML = "Android mode:videoPlaying"
canvas.style.display="block"
}
//视频播放进度
function playingCallBack(currentTime) {
// console.log(currentTime)
}
//视频播放完成执行
function endCallBack() {
msgTxt.innerHTML = "Android mode:videoEnd"
}
</script>
</body>
</html>
项目中遇到的坑,把使用方法记录一下
在线演示DOMO
JSMpegPlayer
https://github.com/xxfxx/android-video-autuplay github地址,欢迎小星星~~~
js一加载网页就自动播放是通过iframe的方式。通过iframe的方式加载带音视频的网页。此页面已经获取了使用音视频设备权限。就是此页面可以获得了使用麦克风和摄像头的权限就可以自动播放。开发项目中经常需要插入视频切自动播放，但是在不同浏览器或不同设备上会各种各样的问题。 为了做到适配不同的场景，我们将默认设置视频不自动播放，由js去控制播放。 虽然video标签自带有自动播放，不过一般不适用这个被各种浏览器以及设备欺负的属性，而是使用video标签自带的play()方法 例：微信端自动播放写法 大多数情况下我们都会使用各种依赖或库来引入视频，而这些库也会有autoplay配置入口和play()方法，推荐都使用play()方法去启动视频播放，而不要用autoplay属性。 个人比较奇葩，在有充足时间的情况下不太喜欢第三方库，所以对与不同库的autoplay是什么实现机制也没去了解过，可能有些也是用play方法写的。 由于最近比较忙，没有时间去整理各种情况，这里写的一些都是自己以前开发时候遇到的问题，所以拿出来做例子。 希望各位有其他经验也可以添加进来，或者踩到过其他坑也可以提出来大家想办法。
