移动端视频组件

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:

  • 常规使用;

    avatar

    link

  • 搭配cuePoints,实现AB跳转;

    avatar

    link

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

    avatar

    link

VideoPlayer.js视频组件详细说明

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

参数名 类型 是否必填 描述
videoElement HTMLVideoElement video元素
src string 视频播放地址
cuePoints CuePoint[] 提示点数组
poster string 视频封面图
visibilityHandle boolean 页面隐藏时暂停,重新显示时恢复播放
muted boolean 是否禁音播放
loop boolean 是否循环播放
timesParam CuePoint[] (旧) 提示点数组
onStart function() (旧) 视频首次播放回调
onLoadedProgress function(progress) (旧) 视频下载进度回调
onLoadedComplete function() (旧) 视频下载完成回调
onTimes function(name,time) (旧) 时间轴提示点回调
onPlaying function() (旧) 视频因缓冲区数据足够可以播放时回调
onWaiting function() (旧) 视频因缓冲区数据不够需要暂停时回调
onError function(mediaError) (旧) 视频报错回调
onEnd function() (旧) 视频播放完成回调

属性

属性名 类型 默认值 描述
videoElement HTMLVideoElement video元素
src string 视频播放地址
cuePoints {name:string,time:number}[] 时间轴提示点
poster string 视频封面图
visibilityHandle boolean true 页面隐藏时暂停,重新显示时恢复播放
muted boolean false 静音
currentTime number 视频播放位置
paused boolean 是否暂停
duration[只读] number 视频总时长(单位:秒)
ended[只读] boolean 视频是否播放完成

方法

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

详细信息:

标签元素 说明
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 ""