Die mobile H5-Seite verwendet den DPlayer-Videoplayer

Hintergrund:

Wenn Sie das native Video-Tag verwenden, unterscheidet sich der Stil in verschiedenen mobilen Browsertypen und die Wiedergabeleistung. Beispielsweise ist die Verwendung von CSS zum Ausblenden der Wiedergabeschaltfläche auf der PC-Seite wirksam, auf der PC-Seite jedoch nicht mobile Seite. Deshalb haben wir uns entschieden, einen ausgereiften Drittanbieter-Player einzuführen.

brauchen:

1. Benutzerdefinierte Wiedergabetaste;

2. Die Wiedergabe des Videos stoppt, wenn das abgespielte Video den sichtbaren Bereich des Bildschirms verlässt.

3. Die Videosteuerleiste wird ausgeblendet, wenn das Video angehalten ist, und während der Wiedergabe angezeigt.

4. Die Videowiedergabestile verschiedener Mobiltelefonmodelle sind konsistent;

Beispiele für Effekte sind wie folgt:

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

Führen Sie DPlayer.min.js in HTML ein (verfügbar auf der offiziellen 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>

Mehrere Instanzen initialisieren:

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

Der Code für den benutzerdefinierten Play-Button-Stil lautet wie folgt: 

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

Machen Sie Schluss, alle bisher genannten Anforderungen können realisiert werden und das Videoanzeigeformat auf verschiedenen Modellen + PC ist konsistent. Wenn Sie eine bessere Lösung haben, hinterlassen Sie bitte eine Nachricht~