Pratique HTML5 et analyse des éléments multimédias (1. Introduction aux balises vidéo et balises audio)

Avec l'arrivée du HTML5, le flash ne peut plus être pris en charge sur les téléphones mobiles. Cela signifie que la lecture de musique et la lecture vidéo produites en flash ne peuvent être produites qu'à l'aide des balises multimédias vidéo et audio en HTML5. Par coïncidence, le terminal mobile prend très bien en charge les balises multimédia, vidéo et audio en HTML5. Cela rend HTML5 très populaire sur les appareils mobiles.

La balise vidéo et la balise audio fournissent également une API JavaScript très utile, permettant la création de contrôles personnalisés. L'utilisation des deux balises est la suivante.

　Code HTML

<!-- 视频标签 -->
<video src="meng.ogg" id="myVideo">视频不支持</video>

<!-- 音频标签 -->
<audio src="long.mp3" id="myAudio">音频不支持</audio>

Lors de l'utilisation de la balise vidéo et de la balise audio, vous devez inclure l'attribut src et pointez sur Le fichier multimédia à charger. Vous pouvez également définir les attributs de largeur et de hauteur pour spécifier la taille du joueur. L'affichage d'une image pendant le chargement du contenu vidéo peut être effectué en spécifiant l'URI de l'image dans l'attribut poster. De plus, il existe un attribut de contrôle dans la balise. Cet attribut signifie que le navigateur doit afficher les contrôles de l'interface utilisateur pour permettre aux utilisateurs d'utiliser directement le média. Tout ce qui se trouve entre les balises d'ouverture et de fermeture est utilisé comme contenu de secours et est affiché si le navigateur ne prend en charge aucun des deux éléments multimédias.

Précisément parce que tous les navigateurs ne prennent pas en charge différentes sources multimédias, plusieurs balises source doivent être écrites séparément. Un petit exemple est le suivant.

　Code HTML

<!-- 音频标签 -->
<audio id="audio">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	音频不支持
</audio>

<!-- 视频标签 -->
<video id="video">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	视频不支持
</video>

Les navigateurs qui prennent en charge la balise vidéo et la balise audio incluent Firefox 3.5 et Opera 10.5 , IE9, Safari 4, Chrome, Safari pour iOS et WebKit pour Android.

Le combat et l'analyse réels des éléments multimédias HTML5 (1. Introduction aux balises vidéo et aux balises audio) vous ont été présentés. Les balises multimédias sont bien prises en charge en HTML5, elles sont donc utilisées plus souvent. Des connaissances plus pertinentes sur HTML5 peuvent être trouvées sur le site Web de Menglong. Merci pour votre soutien.

Méthode de lecture vidéo nouvellement ajoutée

Code JavaScript

function bofangshipin(Num) {
            var u = navigator.userAgent;
            if (u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) {  //苹果
                $("#vid" + Num).css("width", "100%");
                document.getElementById('vid' + Num).style.display = 'block';
                document.getElementById('vid' + Num).play();
            } else {  //安卓
            $("#vid" + Num).css({
                "width": $(".wrapperW").width(),
                "height": $(".wrapperW").height(),
                "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
            });
                document.getElementById('vid' + Num).style.display = 'block';
                setTimeout(function () { document.getElementById('vid' + Num).play(); }, 1000);
            }

        }
        document.getElementById('vid' + 1).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 1).addEventListener("pause", end_playing, false);
        document.getElementById('vid' + 2).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 2).addEventListener("pause", end_playing, false);
        document.getElementById('vid' + 3).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 3).addEventListener("pause", end_playing, false);
        function end_playing() {
            document.getElementById('vid' + 1).style.display = 'none';
            document.getElementById('vid' + 2).style.display = 'none';
            document.getElementById('vid' + 3).style.display = 'none';

            $("#vid" + 1).css("width", "0%");
            $("#vid" + 2).css("width", "0%");
            $("#vid" + 3).css("width", "0%");
        }	

Code HTML

<video src="images/sanxing.mp4"  id="vid1" controls autoplay  style="position: absolute; z-index:100;  left: 0px; display:none" name="vid1">
     <source src="images/sanxing.mp4"></source>
  </video>

Ce qui précède est le contenu du combat réel HTML5 et de l'analyse des éléments multimédias (1. Introduction à la balise vidéo et à la balise audio Pour un contenu plus connexe, veuillez faire attention à PHP Chinese Net (www.php.cn) !