移动端视频组件
mmd-plugin.min.1.0.2.js+mmd.videoplayer.1.0.1.js快速上手
作者:强权,lenny
功能介绍
适用于移动端视频H5,将常用功能进行了封装,集成了以下功能:
- 内联播放兼容处理;
- 适配屏幕,实现全屏;
- 横竖屏兼容,可强制横/竖屏;
- 判断是否能自动播放;
note:
- 必须是click事件触发video.play()方法,在第一次播放的时候;
video.play()的第一次触发必须是同步,不能异步执行;
//正确用法: div.on('click',function() { video.play(); }); //错误用法; //没有使用click事件; div.on('touchend',function() { video.play(); }); //异步调用video.play()方法错误,必须同步执行; div.on('click',function() { setTimeout(()=>{ video.play(); },300); });
快速上手
引入两个js 注:两个JS分别为全屏视频控制,以及视频适配
<script src="//game.gtimg.cn/images/js/mmdPlugin/mmd-plugin.min.1.0.2.js" charset="utf-8"></script> <script src="//game.gtimg.cn/images/js/mmdVideoPlayer/mmd.videoplayer.min.1.0.1.js" charset="utf-8"></script>
初始化
<div view-mode="h" view-rotation="auto" view-scale="noborder" view-width="1334" view-height="750" view-align=""> <div style="position: absolute;"> <video id="video" style="display:none;"></video> </div> </div> <script> var src='test.mp4'; var videoPlayer=new MMD.VideoPlayer( { videoElement:document.getElementById('video'),//[必填],video元素; src:src,//[必填],video src; loop:false,//[可选],是否循环,默认false,true为循环; muted:false,//[可选],是否静音,默认false,IOS下只有IOS10生效,安卓生效; poster:'',//[可选],video默认图片; tryMultipleVideoPlayAtTheSameTime:false,//[可选],尝试同时播放多个视频,默认false; timesParam:[ {name:'firstPoint',time:11.48} ],//[可选],video currenttime时间点; onTimes:function(name){ console.log(name) switch (name) { case 'firstPoint': break; } },//[可选],video currenttime回调; onStart:function(){ console.log('video start'); },//[可选],video第一个画面出现回调; onEnd:function(){ console.log('video end'); }//[可选],video播放完成回调; } ); //当isVideoCanAutoPlay属性为true时,则代表允许自动播放; //false时,则需要通过用户点击才能播放视频; if(videoPlayer.isVideoCanAutoPlay) { videoPlayer.play(); } else { //click to play; } </script>
DEMO:
竖屏常规视频播放,一播到底:
视频播放,视频循环动画交互:
mmd.videoplayer.1.0.1.js视频组件详细说明
就已知video兼容问题进行封装优化,增加了属性和功能,灵活性更高;
属性:
属性 | 详细说明 |
---|---|
src | [读写]:String,视频url地址; 可重新设置,重新设置之后会暂停当前视频播放,需要配合play()方法,新视频会开始播放,并且重新触发onStart回调函数; |
loop | [读写]:Boolean,视频是否循环播放; false:不循环; true:循环播放; |
muted | [读写]:Boolean,视频是否静音; false:不静音; true:静音; 注意点:在Android,IOS10适用,IOS9,IOS8不生效; |
poster | [读写]:String,视频第一帧图片; |
timesParam | [读写]:Array,设置视频时间节点: 写法如下: [ {name:’firstPoint’,time:2}, {name:’secondPoint’,time:6}, …. ]; 注意点:由于视频时间节点的触发是通过帧循环检测出来的,不可能完全按照用户设置的时间点触发,必定会出现少许偏差,还有相邻时间节点的间隔,最好是1秒以上; 视频制作的过程中,也需要提前预留好容错空间,假如视频要跳转到2秒位置,那么可以在2秒后预留0.5秒的容错空间,这样视频跳转到2-2.5秒这个区间的时候,用户就不会感觉到突兀了; |
playbackRate | [读写],Number,视频播放速度; 1:正常速度向前播放; >1:加速向前播放(该功能在IOS上表现良好,Android表现不佳,不建议在Android上使用); <0:倒退播放(同上,建议只在IOS上使用); |
currentTime | [只读],获取当前视频播放位置,单位秒; |
currentTimeAndPlay | [只写],Number,跳转到视频某个时间点并播放,单位秒; |
currentTimeAndPause | [只写],Number,跳转到视频某个时间点并暂停,单位秒; |
isVideoCanAutoPlay | [只读],Boolean,当前视频是否运行自动播放 true:可以直接调用播放; false:需要通过用户交互才能播放; |
paused | [只读],Boolean,视频的播放状态 true:暂停专题,false:播放状态; |
duration | [只读],Number,视频的总时长; |
方法:
方法 | 详细说明 |
---|---|
play() | 视频播放,封装了微信自动播放触发事件,使得IOS下微信能自动播放视频; |
pause() | 视频暂停; |
replay() | 视频重新播放; |
回调方法:
回调方法 | 详细说明 |
---|---|
onStart | 当视频第一帧画面出现时回调; 注意,重新设置src,然后调用play()方法,会再次回调该函数; |
onEnd | 当视频播放完成一次的时候回调; |
onTimes | 当设置了timesParam属性之后回调,并返回设置的name参数; |
DEMO
常规视频播放;
跳帧,静音,变速;
视频循环播放;
视频回调函数;
更换视频src;
在更换src之后,不会自动播放视频,需要调用play()函数,会再次回调onStart函数;
尝试同时播放多个视频;
[info] 现阶段:
安卓,目前微信里面支持同时播放多个视频,但无法完全覆盖;
IOS下需要静音才能支持多个视频同时播放;
IOS8和IOS9:静音加上使用iphone-inline-video.js插件,原理就是在暂停视频的状态下,通过改变currentTime来模拟视频播放;
IOS10:静音情况下运行同时播放多个视频;
同时播放多个视频只是一种尝试,它对网络和手机性能有较高要求,且目前的应用场景也较少,所以有这方面的创意的时候,建议提前测试和告知兼容问题,无法保证所有手机都能同时播放多个视频
注意事项:
在PC调试过程中,我们一般会在Chrome下用手机模式去调试项目,在选择iPhone模拟时,我们会发现播放时候的时候画面会出现卡顿,这是由于启用了iphone-inline-video.js插件,他的播放原理是通过跳转currentTime来模拟的,所以才会出现卡顿情况;在IOS系统下,除了手Q和微信,其他浏览器我们都会判断为需要启用iphone-inline-video.js插件,因此会给PC端调试带来些许不变,建议切换成非iphone模式调试;
PTT统计上报功能,为了统计组件的使用情况以及视频是否正常播放,不会主动初始化PTT上报组件,而是判断PTT是否存在,假如存在则顺带上报数据,否则不处理;
IOS系统每次大版本更新的时候,前端表现都会出现不同程度的震荡,例如IOS10发布的时候,还有2017年9月份发布的IOS11,在版本更新之后出现的bug,希望大家不要过于慌乱,我们会持续关注和维护的;
mmd-plugin.min.1.0.2.js适配组件详细说明
提供自适应功能,通过自定义标签元素的方法来初始化和赋值;
快速上手:
<style>
/* 假如添加了video标签,可能会出现video标签默认置顶的情况,解决这个bug可以通过样式设置来规避; */
.compatibleStyle {
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
-webkit-perspective: 0;
-webkit-transform: translate3d(0,0,0);
visibility:visible;
}
</style>
<div view-mode="v" view-rotation="auto" view-scale="noscale" view-width="231" view-height="240" view-align="">
<img src="imageUrl" class="compatibleStyle" style="position: absolute;"/>
</div>
<script src="//ossweb-img.qq.com/images/js/mmdPlugin/mmd-plugin.min.1.0.2.js"></script>
详细信息:
标签元素 | 说明 |
---|---|
view-mode | 横屏/竖屏显示,参数’v’:竖屏,’h’:横屏; |
view-rotation | 是否旋转可见,参数’v’:仅竖屏可见,’h’:仅横屏可见; |
view-scale | 缩放方式,参数: "exactfit":宽高等于屏幕宽高,无法保持原始宽高比; "noborder”:裁剪铺满,保持原始宽高比; "noscale":不缩放,保持原始宽高比; "showall":显示全部,保持原始宽高比; "width":宽度等于屏幕宽, 保持原始宽高比; "height":高度等于屏幕高, 保持原始宽高比; |
view-align | 对齐方式,参数:默认为"":居中; t:靠顶,l:靠左,r:靠右,b:靠底; 可以结合一起用,比如tl,tr,bl,br; |
view-width | 目标宽度,参数:默认400; |
view-height | 目标高度,参数:默认400; |
DEMO:
API线上DEMO:点击查看