背景：

如果使用原生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 = 0for(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端视频表现形式一致，大家有更好的方案欢迎留言~