Analyse de l'élément vidéo (vidéo) en HTML5

Le contenu partagé avec vous dans cet article concerne l'analyse de l'élément vidéo (vidéo) en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Utiliser des arrière-plans vidéo html5

Jusqu'à présent, il n'existait toujours pas de standard pour afficher des vidéos sur les pages Web. Aujourd'hui, la plupart des vidéos sont affichées via des plug-ins tels que Flash. Cependant, tous les navigateurs ne disposent pas des mêmes plugins. HTML5 spécifie une manière standard d'inclure de la vidéo via l'élément vidéo.

Formats vidéo pris en charge par les navigateurs

Actuellement, l'élément vidéo prend en charge trois formats vidéo : Ogg, MPEG4 et WebM. La prise en charge par le navigateur pour ces trois formats est la suivante. :

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Format

IE

Firefox

Opéra

Chrome

Safari

Ogg

Non

3,5+

10,5+

5,0+

Non

MPEG 4

9.0+

Non

Non

5.0+

3.0+ td>

WebM

Non

4.0+

10.6+

6.0+ td>

Non

<video controls=" controls">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source>
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持该格式的视频播放
</video>

Ogg le format est un fichier Ogg avec un encodage vidéo Theora et un encodage audio Vorbis, le format MPEG4 est un fichier MPEG 4 avec un encodage vidéo H.264 et un encodage audio AAC, le format mp4 appartient à ce format, le format WebM est avec un encodage vidéo VP8 et un encodage audio Vorbis WebM codé déposer.

Utilisez l'élément vidéo pour implémenter la lecture vidéo

L'attribut de contrôle de l'élément vidéo est utilisé pour ajouter des commandes de lecture, de pause et de volume, entre 36a905548c8276df5a0a9467f3407669 a6a9c6d3f311dabb528ad355798dc27d Le contenu inséré est destiné à être affiché par les navigateurs qui ne prennent pas en charge l'élément vidéo. L'élément source peut lier différents fichiers vidéo pour résoudre le problème des formats vidéo compatibles avec les navigateurs. Deux éléments sources sont utilisés ci-dessous pour activer les cinq ci-dessus. navigateurs pour lire la vidéo. Le code simple est le suivant :

<video id="view">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source><!--播放多个格式的视频-->
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持视频格式
</video>
<button onclick="play()">停止/开始</button><button onclick="toSmall()">缩小</button> <button onclick="toBig()">放大</button>
<script>
var v =document.getElementById("view");
function play(){
if(v.paused){
v.play();//播放
} else{
v.pause();//停止
}
}
function toSmall(){
v.width=300;
v.height=300;
}
function toBig(){
v.width=500;
v.height=500;
}
</script>

Utilisez Dom pour faire fonctionner la vidéo

Utilisez des boutons personnalisés pour implémenter le contrôle de la lecture, de la pause et de la taille de la vidéo de l'attribut de contrôle. .

Conversion du format vidéo (convertir le format MP4 au format ogg)

1. Téléchargez d'abord ffmpeg et entrez l'URL www.ffmpeg.org( URL Open source), entrez Windows pour télécharger la version Windows du fichier.

2. Décompressez le fichier compressé ffmpeg (prenez ffmpeg-20180803-5aeb3b0-win32-static.zip comme exemple) et ajoutez le chemin du répertoire ffmpegbin au chemin de la variable d'environnement (G:mydeveloperapplicationhbuilderhtml5ffmpeg-20180803). -5aeb3b0-win32-staticbin).

3. Après avoir défini les variables d'environnement, tapez ffmpeg dans le formulaire de commande DOS pour tester s'il peut s'exécuter.

4. Basculez vers le répertoire où se trouve le fichier vidéo mp4 dans la fenêtre de commande DOS, et enfin tapez ffmpeg -i 1.mp4 -acodec libvorbis 1.ogg (ici, remplacez 1.mp4 par 1. ogg).
5.ffmpeg commandes détaillées.

Articles connexes recommandés : HTML5 combiné avec Internet + pour réaliser un tunnel 3D (avec code) Canevas, événements glisser-déposer en H5 Et exemples de codes audio et vidéo

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!