Maison > interface Web > Questions et réponses frontales > javascript comment jouer

javascript comment jouer

王林
Libérer: 2023-05-17 15:44:07
original
885 Les gens l'ont consulté

JavaScript est un langage de programmation populaire qui fait partie intégrante du développement Web. En plus de son large éventail d’utilisations, JavaScript est également très utile pour ajouter de l’interactivité et du dynamisme aux pages Web. L'un des éléments les plus importants est le multimédia, notamment l'audio et la vidéo. Cet article explique comment utiliser JavaScript pour lire de l'audio et de la vidéo et comment contrôler leur lecture.

Comment lire de l'audio

La lecture de fichiers audio est l'un des éléments fréquemment utilisés dans le développement d'applications Web. HTML5 fournit un élément audio qui facilite l'ajout de fichiers audio sur une page Web. Le fichier audio peut être lu en utilisant le code suivant :

<audio src="audio_file.mp3"></audio>
Copier après la connexion

Dans le code ci-dessus, nous avons spécifié le chemin et le nom du fichier audio. Lorsqu'un utilisateur visite une page Web, le navigateur charge automatiquement le fichier audio et commence à le lire.

De plus, nous pouvons également contrôler la lecture audio via JavaScript. Tout d’abord, vous devez obtenir l’élément joueur. Nous pouvons obtenir l'élément player via le code suivant :

var audioPlayer = document.getElementsByTagName('audio')[0];
Copier après la connexion

Le code ci-dessus obtiendra le premier élément audio et l'enregistrera dans la variable audioPlayer. Ensuite, le comportement du lecteur peut être contrôlé à l'aide du code suivant :

audioPlayer.play(); // 播放音频
audioPlayer.pause(); // 暂停音频
Copier après la connexion

Comment lire une vidéo

Comme les fichiers audio, HTML5 fournit également un élément vidéo, qui peut lire des fichiers vidéo sur une page Web. Le fichier vidéo peut être lu en utilisant le code suivant :

<video src="video_file.mp4"></video>
Copier après la connexion

Dans le code ci-dessus, nous avons spécifié le chemin et le nom du fichier vidéo. Lorsqu'un utilisateur visite une page Web, le navigateur charge automatiquement le fichier vidéo et commence à le lire.

Comme les fichiers audio, nous pouvons également contrôler la lecture des vidéos via JavaScript. Tout d’abord, vous devez obtenir l’élément joueur. Nous pouvons obtenir l'élément player via le code suivant :

var videoPlayer = document.getElementsByTagName('video')[0];
Copier après la connexion

Le code ci-dessus obtiendra le premier élément vidéo et l'enregistrera dans la variable videoPlayer. Ensuite, le comportement du lecteur peut être contrôlé à l'aide du code suivant :

videoPlayer.play(); // 播放视频
videoPlayer.pause(); // 暂停视频
videoPlayer.currentTime = 10; // 将视频跳转到第10秒
Copier après la connexion

Contrôler la lecture audio et vidéo

Avec JavaScript, nous pouvons contrôler la vitesse de lecture, le volume et la position actuelle de l'audio et de la vidéo. Voici quelques instructions connexes :

// 播放速度 (1.0 是默认速度)
audioPlayer.playbackRate = 2.0;

// 音量 (0.0 到 1.0)
audioPlayer.volume = 0.5;

// 当前播放位置
audioPlayer.currentTime = 60; // 跳转到1分钟处
Copier après la connexion

Résumé

Dans cet article, nous avons expliqué comment lire de l'audio et de la vidéo à l'aide de JavaScript, et comment contrôler leur lecture. Nous pouvons facilement ajouter de l'audio et de la vidéo aux pages Web à l'aide des éléments audio et vidéo fournis par HTML5, et contrôler leur lecture et d'autres attributs à l'aide de JavaScript. Que vous travailliez avec de l'audio ou de la vidéo, JavaScript facilite l'ajout d'éléments multimédias à vos applications Web.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal