移动端视频组件

mmd.domWidget.js[适配组件] & mmd.videoPlayer.js[视频组件]

作者：强权，lenny

更新内容

• 移除 isVideoCanAutoPlay 属性,无法准确判定浏览器是否能自动播放,不建议自动播放视频;
• 移除 PTT 默认上报逻辑;
• 新增事件回调写法;

更新日期:2022/10/10

功能介绍

• videoPlayer
  • 是适用于移动端H5的轻量视频播放组件,可快速制作视频相关H5需求,兼容平台微信,手Q,游戏内msdk.封装常用功能,包括内联播放,视频首次开始播放,视频播放结束.同时还提供进阶功能,包括预先激活视频,预加载视频,视频提示点;
• domWidget
  • 在标签上通过简单的参数配置实现全屏适配,强制横竖屏等常用功能,还提供子元素对齐功能;

• 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

    <script src="//game.gtimg.cn/images/js/domWidget/mmd.domWidget.min.js"></script>
    <script src="//game.gtimg.cn/images/js/mmdVideoPlayer/mmd.videoPlayer.min.js"></script>
   

2. 初始化

    <div view-mode="v" view-rotation="auto" view-scale="height" view-width="800" view-height="1024" view-align="">
        <div style="position: absolute;">
            <video id="video" style="display:block;"></video>
        </div>
        <button id="btn"></button>
    </div>
    <script>
   

   const videoPlayer=new MMD.VideoPlayer({
    videoElement:document.getElementById('video'),
    src:'***.mp4'
   });
   const btn=document.getElementById('btn');
   btn.onclick=()=>{
    /**
     * 必须在用户点击回调执行;
     */
    videoPlayer.play();
   }
   

3. 完整用法1,旧版本用法;

   const videoPlayer=new MMD.VideoPlayer({
     videoElement:video,
     src:'***.mp4',
     // 页面前后台切换是否做暂停处理；
     visibilityHandle:true,
     // 自定义提示点；
     timesParam:[
       {name:'b0',time:1},
       {name:'b1',time:2},
       {name:'b2',time:3},
     ],
     // 视频开始播放；
     onStart:()=>{
       console.log('onStart');
       // 可以隐藏loading,显示skip按钮等;
       // loading.style.display='none';
       // skipVideoBtn.style.display='block'
     },
     // 视频因需要缓冲而暂停；
     onWaiting:()=>{
       console.log('onWaiting');
     },
     // 视频缓冲区满足播放；
     onPlaying:()=>{
       console.log('onPlaying');
     },
     // 视频加载进度；
     onLoadedProgress:(progress)=>{
       console.log('onLoadedProgress progress:',progress);
     },
     // 视频加载完成；
     onLoadedComplete:()=>{
       console.log('onLoadedComplete');
     },
     // 视频自定义提示点；
     onTimes:(name,time)=>{
       console.log('onTimes name:',name,'time:',time);
     },
     // 视频报错；
     onError:(error)=>{
       console.log('onError error:',error);
     },
     // 视频播放完成；
     onEnd:()=>{
       console.log('onEnd')
     }
   });
   

4. 完整用法2,事件回调;

   const videoPlayer=new MMD.VideoPlayer({
     videoElement:video,
     src:'***.mp4',
     // 页面前后台切换是否做暂停处理；
     visibilityHandle:true,
     // 自定义提示点；
     cuePoints:[
       {name:'a0',time:1.5},
       {name:'a1',time:2.5},
       {name:'a2',time:3.5},
     ]
   });
    // 视频开始播放；
    videoPlayer.on(MMD.VideoEvent.START,()=>{
     console.log(MMD.VideoEvent.START);
     // 可以隐藏loading,显示skip按钮等;
     // loading.style.display='none';
     // skipVideoBtn.style.display='block'
   });
    // 视频因需要缓冲而暂停；
    videoPlayer.on(MMD.VideoEvent.WAITING,()=>{
     console.log(MMD.MMD.VideoEvent.WAITING);
   })
    // 视频缓冲区满足播放；
    videoPlayer.on(MMD.VideoEvent.PLAYING,()=>{
     console.log(MMD.VideoEvent.PLAYING);
   })
    // 视频加载进度；
    videoPlayer.on(MMD.VideoEvent.LOAD_PROGRESS,(progress)=>{
     console.log(MMD.VideoEvent.LOAD_PROGRESS,progress);
   });
    // 视频加载完成；
    videoPlayer.on(MMD.VideoEvent.LOAD_COMPLETE,()=>{
     console.log(MMD.VideoEvent.LOAD_COMPLETE);
   })
    // 视频报错；
    videoPlayer.on(MMD.VideoEvent.ERROR,(error)=>{
     console.log(MMD.VideoEvent.ERROR,error);
   })
    // 视频自定义提示点；
    videoPlayer.on(MMD.VideoEvent.CUE_POINT,(name,time)=>{
     console.log(MMD.VideoEvent.CUE_POINT,name,time)
   })
    // 视频播放完成；
    videoPlayer.on(MMD.VideoEvent.END,()=>{
     console.log(MMD.VideoEvent.END);
   })
   

DEMO:

• 常规使用;

  

  link

• 搭配cuePoints,实现AB跳转;

  

  link

• 利用activeVideo函数,实现提前激活video;

  

  link

VideoPlayer.js视频组件详细说明

配置参数('描述中 旧 代表旧版本属性或回调')

属性

方法

• play()
  • 播放视频,首次/非激活状态下,需要在点击回调中执行;
• pause()
  • 暂停视频;
• replay()
  • 重新播放;
• activeVideo()
  • 激活视频,需要在点击回调中执行;
• preload()
  • 预加载视频;
• stopPreload()
  • 停止预加载;
• destroy()
  • 销毁,移除内部侦听事件;

事件

• MMD.VideoEvent.START
  • 视频首次出现画面时回调;

    // 在视频没有加载画面时,显示loading;
    videoPlayer.on(MMD.VideoEvent.START,()=>{
      // todo 视频有画面,可以移除loading;
    });
    

• MMD.VideoEvent.END
  • 视频播放完成;

    videoPlayer.on(MMD.VideoEvent.END,()=>{});
    

• MMD.VideoEvent.CUE_POINT
  • 提示点回调,配合cuePoints使用;

    videoPlayer.cuePoints=[
      {name:'cue_0',time:1},
      {name:'cue_1',time:2},
      ...
    ];
    videoPlayer.on(MMD.VideoEvent.CUE_POINT,(name,time)=>{
      console.log(name,time);
      // cue_0 1;
      // cue_1 2;
    })
    

• MMD.VideoEvent.WAITING
  • 因为缓冲区数据不足而需要暂停;

    videoPlayer.on(MMD.VideoEvent.WAITING,()=>{
      // todo 显示loading;
    });
    

• MMD.VideoEvent.PLAYING
  • 因为缓冲区数据满足播放,重新播放;

    videoPlayer.on(MMD.VideoEvent.PLAYING,()=>{
      // todo 隐藏loading;
    });
    

• MMD.VideoEvent.LOAD_PROGRESS
  • 视频加载进度;

    videoPlayer.on(MMD.VideoEvent.LOAD_PROGRESS,(progress)=>{
       // progress 
    });
    

• MMD.VideoEvent.LOAD_COMPLETE
  • 视频加载完成;

    videoPlayer.on(MMD.VideoEvent.LOAD_COMPLETE,()=>{});
    

• MMD.VideoEvent.ERROR
  • 视频报错;

    videoPlayer.on(MMD.VideoEvent.ERROR,(mediaError)=>{});
    

domWidget 适配组件详细说明

在标签上通过简单的参数配置实现全屏适配,强制横竖屏等常用功能,还提供子元素对齐功能;

快速上手:

<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>
<script src="//game.gtimg.cn/images/js/domWidget/mmd.domWidget.min.js"></script>
<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>

详细信息:

DEMO:

API线上DEMO：点击查看