H5移动端页面使用DPlayer视频播放器

背景：

如果使用原生video标签，那在不同类型手机浏览器上样式都不一样，而且播放表现不一样，比如使用css隐藏播放按钮在PC端有效，在手机端就无效，故我们选择引入第三方成熟的播放器。

需求：

1、自定义播放按钮；

2、正在播放的视频离开屏幕可见范围时视频停止播放；

3、视频暂停时视频控制条隐藏，播放时视频控制条显示；

4、不同型号手机视频播放样式一致；

效果示例如下：

DPlayer官方文档地址：https://dplayer.diygod.dev/zh/guide.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

在html种引入DPlayer.min.js（官网有）

<script type="text/javascript" src="js/DPlayer.min.js"></script>

<div class="block block1">
  <div class="item-line1-box">
     <div class="video-box">
         <div class="dplayer"></div>
     </div>
  </div>
</div>

初始化多个实例：

var tempArr = document.getElementsByClassName('dplayer')
    var dpArr=[]
    var currentDomIndex = 0
    for(let i=0;i<tempArr.length;i++) {
        console.log('遍历')
        dpArr[i] = new DPlayer({
            container: document.getElementsByClassName('dplayer')[i],
            video: {
                url: 'images/2.mp4', //视频地址
                pic: 'images/3.png', //视频封面
            }
        });
        dpArr[i].on('play', function () {
            console.log('播放视频',i);
            currentDomIndex=i
        });
    }
//监听滚动
        $(window).scroll(function(){
            var st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
            // 实现可见范围内保持播放，离开可见范围暂停播放
            if((st+_h+100)<$('.video-box').eq(currentDomIndex).offset().top||st>($('.video-box').eq(currentDomIndex).offset().top+300)) {
                dpArr[currentDomIndex].pause()
            }
        });

自定义播放按钮样式代码如下： 

/* 修改播放器相关样式 */
.dplayer-controller-mask,
.dplayer-controller{
  display: none;
}
.dplayer-playing .dplayer-controller-mask,
.dplayer-playing .dplayer-controller{
  display: inline-block;
}
.dplayer-mobile-play svg {
  display: none;
}
.dplayer-mobile-play {
  background: url(../images/play-btn.png) no-repeat;
  background-size: 100% 100%;
}
.dplayer-playing .dplayer-mobile-play {
  background:none;
}
.dplayer-playing svg {
  display: inline-block;
}

收工，目前所提需求皆可实现，而且不同机型+PC端视频表现形式一致，大家有更好的方案欢迎留言~

扫描二维码关注公众号，回复： 17362660 查看本文章