Benutzerdefinierte Implementierung des H5-Players, der Wiedergabe und Pause, Fortschrittsanzeige, Lautstärkeregelung und Vollbildmodus ermöglicht

Dieses Mal stellen wir Ihnen eine benutzerdefinierte Implementierung eines H5-Players vor, der Wiedergabe, Pause, Fortschrittsanzeige, Lautstärkeregelung und Vollbildmodus ermöglicht BildschirmNotizenWas sind die folgenden?

Diese Freigabe ist ein benutzerdefinierter Videoplayer, der auf HTML5-Tags basiert. Es implementiert Funktionen wie Wiedergabepause, Fortschrittsverschiebung, Lautstärkeregelung und Vollbild.

Effektvorschau

Klicken Sie hier, um das Quellcode-Warehouse anzuzeigen.

Kernidee

Ich glaube, dass es einige Kinderschuhe geben muss, die noch nie mit der Herstellung benutzerdefinierter Player in Berührung gekommen sind, und ihr Verständnis von Tags wird hier aufhören.

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
</video>

Nachdem das Steuerattribut festgelegt wurde, wird eine mit dem Browser gelieferte Steuerleiste in der Benutzeroberfläche angezeigt. Wenn keine Anforderungen an die Benutzeroberfläche bestehen, kann der integrierte Controller bereits die meisten Anforderungen erfüllen. Wenn das der Fall wäre, würden Sie dieses „sharing =“ natürlich nicht sehen. =

Steuerleiste ausblenden und simulieren

Der Schlüssel zur Implementierung eines Players mit benutzerdefinierten Funktionen besteht darin, dass wir nicht den nativen Controller verwenden und ihn im selben verstecken Positionieren Sie unten, simulieren Sie den erforderlichen Stil über HTML und CSS und rufen Sie gleichzeitig mit js die Schnittstellenfunktionen und -attribute auf, die uns durch das Vedio-Tag zur Verfügung gestellt werden, und erkennen Sie das Betriebsverhalten des Benutzers, um die Reaktion der Benutzeroberfläche und des Videos synchron zu simulieren Änderung der Wiedergabedaten.

Nutzung mehrerer Kernfunktionen und Attribute

myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.readyState
//0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

Der entscheidende Punkt bei allen Implementierungen ist die Simulation des Fortschrittsbalkens. Mithilfe der Attribute „currentTime“ und „duration“ im Video-Tag kann die Position des Fortschrittsbalkens im Verhältnis zur Gesamtlänge berechnet werden. Gleichzeitig kann die vom Benutzer zuletzt durch Ziehen des Fortschrittsbalkens festgelegte Länge auch zur umgekehrten Berechnung der Position verwendet werden, an der das Video zu diesem Zeitpunkt abgespielt werden soll.

Drag-and-Drop-Code-Idee

//核心代码示例
var dragDis = 0
var processWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit为拖拽条起始点巨屏幕左侧的距离
    dragTarget.css({ //拖拽按钮
        left: dragDis
    })
    dragProcess.css({ //进度条(蓝色进度条)
        width: dragDis
    }) // 令进度条和拖拽按钮渲染在同一位置
    videoSource.pause()
}).mousemove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $(&#39;蓝色拖拽条&#39;).width() / processWidth * duration //拖拽后计算视频的正确播放位置
})

In ähnlicher Weise ist die Lautstärkeregelung grundsätzlich das gleiche wie das obige Verhalten, also im Quellcode der Autor Verwendet verschiedene Elemente, um die Lautstärke und den Fortschritt zu steuern. Bestimmen Sie, ob eine Drag-Steuerung des Fortschritts oder der Lautstärke durchgeführt werden soll.

Kontrollieren Sie die Ladeanimation vor der Wiedergabe, indem Sie den Videostream-Status abfragen

function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //状态为4即可播放
        videoPlayer()
    } else {
        $('.play-sym-wrapper').remove()
        $(&#39;body&#39;).append(&#39;<p class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></p>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

Der Kernsteuerungsteil ist abgeschlossen und kann zum HTML-Quellcode gehen Klicken Sie zum Abspielen, was viele fragmentierte Anforderungen erfordert, z. B. Klicken zum Anhalten, Speichern der Lautstärke usw. Die Grundfunktionen des gesamten Videoplayers sind recht gut umgesetzt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So lösen Sie das Problem, dass das Video-Tag in H5 keine MP4-Dateien abspielen kann

Das neue Hinzugefügte Tags in HTML5 sind Which

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Implementierung des H5-Players, der Wiedergabe und Pause, Fortschrittsanzeige, Lautstärkeregelung und Vollbildmodus ermöglicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!