Introduction au plug-in de lecture vidéo HTML5 video.js

video.js est un plug-in de lecture vidéo HTML5 très populaire. Il est très approprié pour lire des vidéos sur des terminaux mobiles (tels que les pages Web WeChat). Il possède des fonctions puissantes, prend en charge la rétrogradation vers Flash et est compatible avec IE8. Site officiel : http://videojs.com/git&demo : http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

contrôles représente la barre de contrôle, prload : préchargement et poster représente l'image affichée initiale. L'ensemble de données prend en charge l'utilisation de json pour définir certains paramètres. Inutile de dire que la source fait référence aux sous-titres.

Cela se passe ainsi, mais en réalité nous avons d’autres besoins.

Vous devez appliquer le js de novtt, qui se trouve dans le fichier alt de la démo. De cette façon, la sélection de lettres n'apparaîtra pas dans la barre de contrôle vidéo. Bien entendu, vous n’avez plus besoin de l’élément track dans la page.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

J'ai commencé à le configurer moi-même en utilisant CSS, mais j'ai constaté que rien ne fonctionnait. Les éléments vidéo sont différents des éléments ordinaires dans la mesure où ils doivent atteindre une largeur et une hauteur réactives en définissant le rapport des éléments internes. video.js propose deux méthodes.

js : définit un fluide sur true.

 var player = videojs('video', { fluid: true }, function () { console.log('Good to go!'); this.play(); // si vous ne faites pas confiance à la lecture automatique pour une raison quelconque } )

Mais cela nécessite également de définir une largeur et une hauteur de départ pour l'élément vidéo, sinon l'image de départ ne sera pas visible.

css : les styles peuvent être ajoutés directement. Il en existe trois types : .vjs-fluid, .vjs-4-3, .vjs-16-9 Le premier sera calculé automatiquement, et les deux derniers préciseront le ratio. Le style doit également définir la largeur et la hauteur de départ pour afficher l'image.

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 contrôles preload=none data-setup=' { html5 : { nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> JavaScript doit être activé pour lire des vidéos. Il est recommandé d'utiliser un <a href=http://videojs.com/html5-video-support/ target=_blank> navigateur prenant en charge HTML5<. /a> pour y accéder. </p> </vidéo>

Attention à l'événement :

Nous nous concentrons généralement sur les trois événements de début, de pause et de fin.

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // si vous ne faites pas confiance à la lecture automatique pour une raison quelconque }) ; player.on('play', function () { console.log('Start/Resume play'); }); player.on('pause', function () { console.log('Pause play'); }); player.on('ended', function () { console.log('Ended play'); });

Il existe également des événements de mise à jour :

 player.on('timeupdate', function() { console.log(player.currentTime()); });

Vous pouvez déterminer si la vidéo se termine en jugeant si l'heure actuelle et la durée totale sont égales :

 player.on('timeupdate', function () { // Si currentTime() === durée(), la lecture de la vidéo est terminée if (player.duration() != 0 && player.currentTime() === player .duration()) { // Fin de la lecture} });

Certaines personnes âgées ont souligné que l'événement terminé ne se déclenche pas correctement sur les appareils Android (soyez prêt en premier).

Le paramètre iis MIME par défaut n'ajoute pas le type mp4. Il n'y aura aucun problème avec la lecture locale, mais une erreur 404 se produira lorsqu'il atteindra le serveur. Cela nécessite de définir MIME dans iis :

Le format flv est ajouté avec l'extension associée : .flv, type de contenu : application/octet-stream

Le format f4v est l'extension : .f4v, type de contenu : application/octet-stream

Le format mp4 est l'extension : .mp4, type de contenu : vidéo/mp4

Le format ogv est l'extension : .ogv, type de contenu : video/ogg

Le format webm est l'extension : .webm, type de contenu : video/webm

Redémarrez iis après le réglage pour prendre effet.

Le responsable a donné une adresse codepen http://codepen.io/heff/pen/EarCt que vous pouvez modifier et avec laquelle vous pouvez jouer. Principalement le bouton de lecture, la barre de contrôle et la barre de progression. La valeur par défaut est comme ci-dessus.

Il y a aussi celui-ci : http://codepen.io/zanechua/pen/GozrNe SublimeVideo

La technologie de lecture est utilisée pour lire des fichiers vidéo ou audio dans des navigateurs ou des plug-ins. S'il s'agit de h5, elle utilisera des éléments vidéo ou audio. S'il s'agit de flash, elle définira un lecteur flash. Non seulement Flash, mais prend également en charge Silverlight, Quicktime et d'autres technologies de lecture. La configuration des données peut être définie directement dans l'élément. Spécifiez les technologies prises en charge.

 <video data-setup='{techOrder : [html5, flash, autres technologies prises en charge]}'

Ou utilisez JavaScript :

 videojs(videoID, { techOrder : [html5, flash, autre technologie prise en charge]});

La règle par défaut ici est que la première technologie sera utilisée pour jouer, et si elle échoue, les options suivantes seront utilisées. Par exemple, si HTML5 est écrit en premier lieu ci-dessus, toutes les vidéos seront lues en utilisant HTML5. Si nous voulons que le flash soit prioritaire, il suffit de le mettre devant :

 data-setup='{ techOrder : [flash,html5] }'

Dans les éléments de la page, vous constaterez que video.js nous donne l'objet flash que nous utilisons.

Ajoutez l'attribut autoplay à l'élément vidéo ou ajoutez autoplay:true à js

 <video id=video autoplay poster=/images/bk.png width=375 height=200 contrôles preload=none > </video>

ou

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // Assurance, vous pouvez également appeler activement play( ) });

La lecture automatique est toujours ennuyeuse, donc le contraire est de supprimer l'attribut de lecture automatique ou de le définir sur false.

autre:

video.js prend en charge les plug-ins d'extension, ce qui est très pratique à utiliser.

 //Définir une fonction de plug-in examplePlugin(options) { this.on('play', function (e) { console.log('playback has start!'); } } //Enregistrer videojs.plugin(' examplePlugin' , examplePlugin); // Utilisez player.examplePlugin({ exampleOption: true });

L'API du lecteur peut être appelée directement dans le plug-in. Il existe un plug-in de playlist que vous pouvez étudier si vous avez besoin d'une playlist. https://github.com/brightcove/videojs-playlist et http://videojs.com/advanced/ ont cet effet :

Ce qui précède est l'introduction du plug-in de lecture vidéo HTML5 video.js introduit par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !