移动端视频组件

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兼容问题进行封装优化,增加了属性和功能,灵活性更高;

属性:

方法:

回调方法:

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>

详细信息:

DEMO:

API线上DEMO：点击查看