Dans cet article, nous apprendrons comment modifier la vitesse de lecture d'une vidéo à l'aide de la balise vidéo HTML5 Intégré dans un document HTML.
Un nombre inférieur à 1 ralentira la vidéo, un nombre supérieur à 1 accélérera la vidéo, puis Le numéro 1 ramènera la vidéo à sa vitesse d'origine. Notez également que playbackRate est une propriété au lieu des attributs HTML.
Bien que vous ne souhaitiez pas modifier la vitesse de lecture de chaque site vidéo, vous pouvez le faire si vous le souhaitez. Pensez que vos visiteurs l’apprécieront davantage. Cela ne nécessite qu’un seul élément HTML à configurer !
La propriétéPlaybackRate nous permet de modifier la vitesse de lecture. Ce sont ses règles grammaticales.
let video = document.querySelector('video')
video.playbackRate = newPlaybackRate
Les utilisateurs peuvent facilement modifier la vitesse de lecture par défaut en utilisant le paramètre defaultPlaybackRate. il Utilisez la syntaxe répertoriée ci-dessous.
let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()
<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
text-align: center;
margin-top: 5%;
}
h1 {
color: rgb(3, 95, 121);
}
p {
margin-top: 5%;
}
button {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>TutorialsPoint Sample Video</h1><br>
<video width="420" height="240" controls loop>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
The video tag is incompatible with your browser.
</video>
<p>
<button type="button" class="btn btn-primary" onclick="speedUp()"> Speed Up</button>
<button type="button" class="btn btn-primary" onclick="speedDown()"> Speed Down</button>
</p>
<script>
let video = document.querySelector('video');
// Make the playing speed the default
video.defaultPlaybackRate = 0.5
// The video is loaded after setting
video.load();
function speedUp() {
// The playback speed has been increased by 1
video.playbackRate += 1;
}
function speedDown() {
// The playback speed has been decreased by 1
if (video.playbackRate > 1)
video.playbackRate -= 1;
}
</script>
</body>
</html>
La vitesse de lecture de l'audio ou de la vidéo est définie ou renvoyée via la propriété playbackRate.
| Valeur | Description |
|---|---|
| Vitesse de lecture | Afficher la vitesse de l'audio ou de la vidéo Je joue actuellement. Type de valeur de situation -
|
Quelle est la vitesse de lecture ?
Le média est lu à une vitesse définie en fonction de la propriété playbackRate. Avec cela, les utilisateurs Réalise le contrôle de l'avance rapide, du ralenti et d'autres fonctions. Une valeur de 1,0 signifie Vitesse standard, calculée en multipliant la fréquence actuelle par la fréquence de lecture habituelle.
Quelle vitesse de lecture est parfaite ?
La plupart des navigateurs mettent l'audio en pause en dehors de la lecture. La vidéo a des limites de débit de 0,5 et 4. Jouez en silence. Dans la plupart des cas, vous devez conserver une plage comprise entre 0,5 et 4. application.
<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
text-align: center;
margin-top: 5%;
}
h1 {
color: rgb(3, 95, 121);
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>TutorialsPoint Sample Video</h1><br>
<video id="myVideo" width="420" height="240" controls>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
HTML5 video is not compatible with your browser.
</video>
<br>
<button type="button" class="btn btn-primary" onclick="getSpeed()" type="button">Get Frequency of playback</button>
<button type="button" class="btn btn-primary" onclick="setSpeed()" type="button">Slow motion video</button><br>
<script>
let demoVideo = document.getElementById("myVideo");
function getSpeed() {
alert(demoVideo.playbackRate);
}
function setSpeed() {
demoVideo.playbackRate = 0.5;
}
</script>
</body>
</html>
Après avoir cliqué sur le bouton « Obtenir la fréquence de lecture », vous verrez l'écran suivant.
De plus, après avoir cliqué sur le bouton "Vidéo au ralenti", puis sur "Obtenir", vous le verrez sous l'écran Bouton "Fréquence de lecture".
Dans l'exemple ci-dessus, une variable (demoVideo dans ce cas) est utilisée pour modifier la vitesse de lecture (ou tout ce que nous voulons faire). Par exemple, entrez simplement demoVideo et remplacez playbackRate par 2. Courez deux fois plus vite. playbackRate est égal à 2.
La conclusion de tout cela. Lorsque vous appuyez sur Play, la vidéo sera lue deux fois plus vite en général. Aimez-vous rouler à moitié vitesse ? Au lieu de cela, définissez playbackRate sur 0,5. je veux qu'il récupère Courir à vitesse normale ? Fondamentalement, définissez playbackRate sur 1.
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!
Introduction au protocole xmpp
Comment ouvrir la fenêtre du terminal dans vscode
Comment modifier le registre
Comment définir le retour à la ligne automatique dans Word
Comment créer une page Web en python
l'espacement des lettres
Que signifie le concept de métaverse ?
La différence entre ipv4 et ipv6
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
