移动端视频组件

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);               
      });
      

快速上手

  1. 引入两个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>
    
  2. 初始化

    <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:

竖屏常规视频播放,一播到底:

Link

视频播放,视频循环动画交互:

Link

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:点击查看

results matching ""

    No results matching ""