Verwenden Sie die HTML5-Anpassung, um die gemeinsame Nutzung von Player-Code zu realisieren

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung eines benutzerdefinierten HTML5-Players von Grund auf vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Dieses Mal teile ich einen benutzerdefinierten 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 sich unten, simulieren Sie den erforderlichen Stil über HTML und CSS und rufen Sie gleichzeitig mit js die Schnittstellenfunktionen und -eigenschaften 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-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 entspricht die Lautstärkeregelung grundsätzlich dem oben beschriebenen Verhalten, sodass der Autor im Quellcode unterschiedliche Elemente verwendet Steuern Sie die Lautstärke und den Fortschritt. Legen Sie fest, ob eine Drag-Steuerung des Fortschritts oder der Lautstärke durchgeführt werden soll.

Steuern 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>&#39;)
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

Der Kernsteuerungsteil ist abgeschlossen und kann zum Quellcode-HTML 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.

Das obige ist der detaillierte Inhalt vonVerwenden Sie die HTML5-Anpassung, um die gemeinsame Nutzung von Player-Code zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!