Implémentez un exemple de code pour un lecteur HTML5 personnalisé à partir de zéro

Ce partage est un lecteur vidéo personnalisé basé sur l'étiquette HTML5. Parmi eux, les fonctions telles que la pause, la traînée de progression, le contrôle du volume et l'écran complet sont implémentées.

Cliquez sur moi pour afficher l'entrepôt de code source.

Je crois que certaines chaussures pour enfants qui n'ont pas été exposées à la fabrication de joueurs personnalisés resteront ici pour les étiquettes.

 <Video Controls = Controls AutoPlay = AutoPlay> <source src = movie.ogg type = vidéo / ogg /> </ vidéo>

La propriété Controls est définie pour afficher la barre de contrôle d'un navigateur dans l'interface. S'il n'y a pas de demande d'interface utilisateur, son contrôleur construit peut déjà répondre à la plupart des besoins. Bien sûr, si c'est le cas, vous ne verrez pas ce partage =. =

Ensuite, la clé du lecteur qui implémente une fonction personnalisée est que nous n'utilisons pas le contrôleur natif pour le cacher. nous, ainsi que l'interface utilisateur de simulation et la lecture vidéo correspondante du comportement de fonctionnement de l'utilisateur.

 MyVid = document.getElementById (Video1); .Duration // Renvoie la longueur totale de la vidéo // Volume vidéo de simulation Myvid.Volume // Volume // Après avoir obtenu la vidéo, il est déterminé lorsqu'il est passé du chargement pour lire Myvid.readyState // 0 = have_nothing -NO À propos de l'audio / si la vidéo est prête // 1 = have_metadata -pout audio / vidéo à métadonnées // 2 = have_current_data -data sur l'emplacement de lecture actuel est disponible, mais il n'y a pas suffisamment de données pour lire le cadre / milliseconde suivant // 3 = have_future_data -Le actuel et au moins le cadre suivant des données est disponible // 4 = have_enough_data - Les données disponibles sont suffisantes pour commencer à jouer

Dans tous les points clés de la mise en œuvre, plus la simulation de la barre de progrès est fastidieuse. Parmi eux, les attributs de temps en cours et de durée dans l'étiquette vidéo sont utilisés pour calculer la position de la barre de progrès par rapport à la longueur totale à travers le temps de lecture actuel et le temps de lecture total. Dans le même temps, la longueur de l'utilisateur au paramètre final de l'utilisateur peut également être utilisée pour inverser la position de la vidéo pour le moment.

 // CODE CODE Exemple var dragdis = 0var proceswidth = xxx // Longueur totale de la barre de traînée («corps»). Rendu au même emplacement videosource.pause ()}). (Left <0) {Left = 0} dragtarget.css ({Left: Left}) dragProcess.css ({width: Left}).). ProcessWidth * durée // Calculez la position de lecture correcte de la vidéo après la traînée

Le contrôle du volume est fondamentalement le même que le comportement ci-dessus.

 function ifState () {var state = videosource.readystate if (state === 4) {// 状态为 4 即可播放 videoPlayer ()} else {$ ('. play-sym-wrapper'). retire () $ ('Corps'). fstate, 10)}} setTimeout (ifState, 10)

La partie de contrôle de base a été terminée. Les fonctions de base de l'ensemble du lecteur vidéo sont réalisées.

Ce qui précède est tout le contenu de cet article.