Comment modifier la vitesse de lecture des vidéos en HTML5 ?

Question

Comment modifier la vitesse de lecture d'une vidéo en HTML5 ? J'ai vérifié attributs de la balise vidéo Toute aide serait appréciée !

Answer 1

Selon ce site Cette fonction est prise en charge par l playbackRate y defaultPlaybackRate accessibles via le DOM. Exemple :

/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();

/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;

Ce qui précède travaux sur Chrome 43+, Firefox 20+, IE 9+, Edge 12+.

Answer 2

Tapez simplement

document.querySelector('video').playbackRate = 1.25;

dans la console JS de votre navigateur moderne.

Answer 3

(Testé dans Chrome lors de la lecture de vidéos sur YouTube, mais devrait fonctionner partout - particulièrement utile pour accélérer les vidéos de formation en ligne).

Si vous souhaitez les ajouter à votre navigateur en tant que "bookmarklets" (signets contenant du code JavaScript au lieu d'URL), utilisez les éléments suivants marque-page du navigateur et les URL, et ajoutez chacun des signets suivants en haut de votre navigateur. Lorsque vous copiez la partie "URL" de chaque signet ci-dessous, copiez l'intégralité du bloc de code de plusieurs lignes, nouvelles lignes et tout, dans le champ "URL" de votre outil de création de signets dans votre navigateur.

Nom : 0.5x
URL :

javascript:

document.querySelector('video').playbackRate = 0.5;

Nom : 1.0x
URL :

javascript:

document.querySelector('video').playbackRate = 1.0;

Nom : 1.5x
URL :

javascript:

document.querySelector('video').playbackRate = 1.5;

Nom : 2.0x
URL :

javascript:

document.querySelector('video').playbackRate = 2.0;

Voici tous mes bookmarklets à vitesse de lecture :

J'ai ajouté tous les bookmarklets de vitesse de lecture ci-dessus, et plus encore, dans un dossier nommé 1.00x sur ma barre de signets, comme indiqué ici :

Références :

1. El réponse principale de Jeremy Visser
2. Copié de mon gist GitHub ici : https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
   1. Vous trouverez également d'autres bookmarklets ici, notamment pour vous aider sur GitHub.

Answer 4

Je préfère avoir une approche plus fine pour la vitesse des vidéos. J'aime pouvoir accélérer et ralentir la vidéo sur commande. C'est pourquoi j'utilise ceci :

window.addEventListener("keypress", function(e) {
  if(e.key==="d") document.getElementsByTagName("video")[0].playbackRate += .1; else if(e.key==="s") document.getElementsByTagName("video")[0].playbackRate -= .1;
}, false);

Appuyez sur d pour accélérer, s pour ralentir.

Answer 5

Vous pouvez utiliser ce code :

var vid = document.getElementById("video1");

function slowPlaySpeed() { 
    vid.playbackRate = 0.5;
} 

function normalPlaySpeed() { 
    vid.playbackRate = 1;
} 

function fastPlaySpeed() { 
    vid.playbackRate = 2;
}