Implémentation personnalisée du lecteur H5 pouvant lire la pause, la progression, le contrôle du volume et le plein écran

Cette fois, nous vous proposons une implémentation personnalisée d'un lecteur H5 qui peut lire, mettre en pause, faire glisser la progression, contrôler le volume et plein écran. Une implémentation personnalisée d'un lecteur H5 qui peut lire, mettre en pause, faire glisser la progression, contrôler le volume et plein écran. screenNotesQuels sont les éléments suivants ? Jetons un coup d'œil à des cas réels.

Ce partage est un lecteur vidéo personnalisé basé sur des balises HTML5. Il implémente des fonctions telles que la pause de lecture, le glissement de progression, le contrôle du volume et le plein écran.

Aperçu de l'effet

Cliquez ici pour voir l'entrepôt du code source.

Idée de base

Je crois qu'il doit y avoir des chaussures pour enfants qui n'ont jamais été exposées à la fabrication de joueurs personnalisés, et leur compréhension des balises s'arrêtera ici.

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

Une fois l'attribut de contrôle défini, une barre de contrôle fournie avec le navigateur sera affichée dans l'interface. S'il n'y a aucune exigence pour l'interface utilisateur, son Contrôleur intégré peut déjà répondre à la plupart des besoins. Bien sûr, si c’était le cas, vous ne verriez pas ce partage =. =

Masquer la barre de contrôle et simuler

La clé pour implémenter un lecteur avec des fonctions personnalisées est que nous n'utilisons pas le contrôleur natif et ne le cachons pas, de la même manière position ci-dessous, simulez le style requis via html et css, et en même temps utilisez js pour appeler les fonctions et attributs d'interface qui nous sont exposés par la balise vedio, et détectez le comportement de fonctionnement de l'utilisateur pour simuler de manière synchrone la réponse de l'interface utilisateur et de la vidéo changement de données de lecture.

Utilisation de plusieurs fonctions et attributs de base

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 - 可用数据足以开始播放

Le point clé de toutes les implémentations est la simulation de la barre de progression. Les attributs currentTime et duration dans la balise vidéo sont utilisés. Grâce au rapport entre la durée de lecture actuelle et la durée totale de lecture, la position de la barre de progression par rapport à la durée totale peut être calculée. Dans le même temps, la dernière longueur définie par l'utilisateur en faisant glisser la barre de progression peut également être utilisée pour calculer inversement la position où la vidéo doit être lue à ce moment-là.

Idée de code glisser-déposer

//核心代码示例
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 //拖拽后计算视频的正确播放位置
})

De même, le contrôle du volume est fondamentalement le même que le comportement ci-dessus, donc dans le code source, l'auteur utilise différents éléments pour contrôler le volume et la progression. Déterminez s'il faut effectuer un contrôle par glissement de la progression ou du volume.

Contrôlez l'animation de chargement avant la lecture en interrogeant l'état du flux vidéo

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)

La partie de contrôle principale est terminée. Les étudiants intéressés peuvent accéder au code source html. Cliquez pour jouer, qui doit avoir de nombreuses exigences fragmentaires, telles que cliquer pour mettre en pause, enregistrer le volume, etc. Les fonctions de base de l'ensemble du lecteur vidéo sont assez bien mises en œuvre.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment résoudre le problème selon lequel la balise vidéo dans H5 ne peut pas lire les fichiers mp4

Le nouveau les balises ajoutées en html5 sont Which

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!