HTML5 VideoAPI, créez votre propre lecteur vidéo Web

1. Connaissances de base

1. Utilisation

<video src="./video/mv.mp4">video>

　Remarque : les éléments audio et vidéo doivent contenir à la fois des balises de début et de fin,

ne peuvent pas être utilisés 2. Attributs HTML importants

Contrôles : ontrol : Si cet attribut apparaît, des contrôles sont affichés à l'utilisateur, comme un bouton de lecture. Les commandes de lecture dans chaque navigateur sont différentes, mais le but est le même. Vous pouvez contrôler le début et la fin, passer à une nouvelle position et régler le volume

　lecture automatique : lecture automatique : si. il apparaît Avec cet attribut, la vidéo sera lue dès qu'elle sera prête. Si l'attribut de lecture automatique n'est pas défini, le fichier audio doit être lu lorsque l'utilisateur clique sur le bouton de lecture.

　loop : loop : (lecture en boucle) indique au navigateur de recommencer la lecture depuis le début lorsque l'audio atteint la fin

préchargement : auto, mete, none : indiquez au navigateur comment télécharger l'audio

• auto : indiquez au navigateur de télécharger l'intégralité du fichier afin qu'il puisse être lu lorsque le l'utilisateur clique sur le bouton de lecture. Bien entendu, le processus de téléchargement se déroule en arrière-plan, de sorte que les visiteurs de la page Web n'ont pas à attendre la fin du téléchargement et peuvent toujours visualiser la page Web comme ils le souhaitent.

• méta : demande au navigateur d'obtenir d'abord le bloc de données au début du fichier audio, ce qui est suffisant pour déterminer certaines informations de base (telles que le total durée de l'audio)

• aucun : ** Indique au navigateur de ne pas le télécharger au préalable. L'utilisation appropriée de ces valeurs peut économiser de la bande passante.

Si l'attribut de préchargement n'est pas défini, le navigateur décidera s'il doit le pré-télécharger. Différents navigateurs gèrent cela différemment. La plupart des navigateurs utilisent auto comme valeur par défaut, mais la valeur par défaut de Firefox est les métadonnées. Cependant, veuillez également noter que cet attribut de préchargement n'est pas une règle qui doit être strictement implémentée, mais simplement une suggestion pour le navigateur. Selon les circonstances, le navigateur peut ignorer vos paramètres. (Certains navigateurs plus anciens ne se soucient pas de l'attribut preload.)

3. Événements courants

Nom de l'événement : Explication

oncanplay  : Script qui s'exécute lorsque le fichier est prêt à démarrer la lecture (lorsque la mise en mémoire tampon est suffisante pour démarrer).

ontimeupdate : Un script qui s'exécute lorsque la position de lecture change (par exemple lorsque l'utilisateur avance rapidement vers un emplacement différent dans le média).

onended : Un script qui s'exécute lorsque le média a atteint la fin (peut envoyer un message du type "Merci d'avoir regardé").

4. Méthodes couramment utilisées

Nom de la méthode : Explication

play() : Démarrer la lecture audio/vidéo

　pause() : Mettre en pause l'audio/vidéo en cours de lecture

　5. Attributs API couramment utilisés

Nom de l'attribut : Explication

　durée : renvoie la durée de l'audio/vidéo actuel (en secondes)

en pause : définit ou renvoie si l'audio/vidéo est en pause

　currentTime : Définit ou renvoie la position de lecture actuelle dans l'audio/vidéo (en secondes)

　terminée : Indique si la lecture du l'audio/vidéo est terminé

Pour plus d'attributs, d'événements et de méthodes, veuillez consulter w3school

2. Créez votre propre lecteur

Nous utilisons JavaScript pour contrôler la lecture. Le comportement du contrôle (contrôle de lecture personnalisé) implémente les fonctions suivantes :

• Utilisez HTML+CSS pour créer le vôtre barre de contrôle de lecture, puis positionnez-la en bas de la vidéo

• Effet de chargement de chargement vidéo

• Lecture, pause

• Affichage de la durée totale et de la durée de lecture actuelle

• Barre de progression de la lecture

• Affichage plein écran

　1. Contrôles de lecture

Ci-dessus C'est tout le code HTML La classe .controls est le contrôle de lecture HTML, citant le code CSS :

<link rel="stylesheet" href="./css/font-awesome.css"><link rel="stylesheet" href="./css/player.css">

Afin d'afficher. des icônes telles que le bouton de lecture, j'ai utilisé l'icône de police

2. Effet de chargement de chargement vidéo

Masquez la vidéo au début et remplacez-la par une image de fond. Attendez que la vidéo soit chargée et puisse être lue avant d'afficher la vidéo

CSS :

.player {    width: 720px;    height: 360px;    margin: 0 auto;    background: #000 url(../images/loading.gif) center/300px no-repeat;    position: relative;}
 video {    display: none;    height: 100%;    margin: 0 auto;

　3. Fonction de lecture

Commençons à écrire code javascript. Nous récupérons d'abord les éléments DOM à utiliser :

var video = document.querySelector("video");var isPlay = document.querySelector(".switch");var expand = document.querySelector(".expand");var progress = document.querySelector(".progress");var loaded = document.querySelector(".progress > .loaded");var currPlayTime = document.querySelector(".timer > .current");var totalTime = document.querySelector(".timer > .total");

Lorsque la vidéo peut être lue, Afficher la vidéo

//当视频可播放的时候video.oncanplay = function(){      //显示视频
      this.style.display = "block";      //显示视频总时长
      totalTime.innerHTML = getFormatTime(this.duration);
};

　　4.播放、暂停

　　点击播放按钮时显示暂停图标，在播放和暂停状态之间切换图标

//播放按钮控制isPlay.onclick = function(){        if(video.paused) {
            video.play();
        } else {
            video.pause();
        }        this.classList.toggle("fa-pause");
};

　　5.总时长和当前播放时长显示

　　前面代码中其实已经设置了相关代码，此时我们只需要把获取到的毫秒数转换成我们需要的时间格式即可，提供getFormatTime()函数：

function getFormatTime(time) {        var time = time  0; 
        var h = parseInt(time/3600),
            m = parseInt(time%3600/60),
            s = parseInt(time%60);
        h = h < 10 ? "0"+h : h;
        m = m < 10 ? "0"+m : m;
        s = s < 10 ? "0"+s : s; 
        return h+":"+m+":"+s;
    }

　　6.播放进度条

//播放进度video.ontimeupdate = function(){    var currTime = this.currentTime,    //当前播放时间
    duration = this.duration;       // 视频总时长
    //百分比
    var pre = currTime / duration * 100 + "%";    //显示进度条
    loaded.style.width = pre; 
     //显示当前播放进度时间
    currPlayTime.innerHTML = getFormatTime(currTime);
};

　　这样就可以实时显示进度条了，此时，我们还需要点击进度条进行跳跃播放，即我们点击任意时间点视频跳转到当前时间点播放：

//跳跃播放progress.onclick = function(e){    var event = e  window.event;
    video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};

　　7.全屏显示

　　这个功能可以使用HTML5提供的全局API：webkitRequestFullScreen实现，跟video无关：

//全屏expand.onclick = function(){
     video.webkitRequestFullScreen();
};

　　经测试在firefox、IE下全屏功能不可用，这样正常了，全屏API是针对webkit内核的。