H5 mobile page uses DPlayer video player

background:

If you use the native video tag, the style will be different on different types of mobile browsers, and the playback performance will be different. For example, using css to hide the play button will be effective on the PC side, but not on the mobile side. Therefore, we chose to introduce a mature third-party player.

need:

1. Customized play button;

2. The video stops playing when the video being played leaves the visible range of the screen;

3. The video control bar is hidden when the video is paused and displayed during playback;

4. The video playback styles of different mobile phone models are consistent;

Examples of effects are as follows:

DPlayer official document address: https://dplayer.diygod.dev/zh/guide.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Introduce DPlayer.min.js in html (available on the official website)

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

Initialize multiple instances:

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()
            }
        });

The custom play button style code is as follows: 

/* 修改播放器相关样式 */
.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;
}

Call it a day, all the requirements mentioned so far can be realized, and the video display format on different models + PC is consistent. If you have a better solution, please leave a message~