Maison > Article > interface Web > L'utilisation de nouvelles balises audio et vidéo dans h5

L'utilisation de nouvelles balises audio et vidéo dans h5

灭绝师太original: 2021-10-27 17:52:233971parcourir

Si l'on vous demande d'ajouter des ressources audio à la page Web, comment allez-vous le mettre en œuvre ?

Avant l'émergence de h5, nous pouvions utiliser des éléments iframe pour insérer des ressources vidéo dans nos pages Web. Le code est implémenté comme suit :

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <iframe height=498 width=510 src=&#39;http://player.youku.com/embed/XMzIzNTc0MTAwMA==&#39; frameborder=0 &#39;
            allowfullscreen&#39;></iframe>
        </body>
    </html>

L'effet est le suivant :

Lutilisation de nouvelles balises audio et vidéo dans h5

Dans. De plus, nous pouvons également utiliser Ht ml5audio Utilisez la balise vidéo pour introduire des ressources multimédias audio dans nos pages Web afin d'augmenter la richesse des pages Web.

La balise

        <!DOCTYPE html>
        <html lang="en">
        
            <head>
                <meta charset="UTF-8">
                <title>h5 audio标签的使用</title>
            </head>
            
            <body>
                <audio controls loop>
                    <source src="bgsound.mp3" />
                    <source src="music.ogg" />
                    您的浏览器版本太低
                </audio> 
            </body>
        
        </html>

L'effet est le suivant (navigateur Chrome) : l'ajout de l'attribut "controls" à la balise audio peut afficher des commandes à l'utilisateur, comme un bouton de lecture ; l'attribut de boucle signifie que la lecture recommence à chaque fois que l'audio se termine.

Lutilisation de nouvelles balises audio et vidéo dans h5

Il existe des différences dans l'effet de la balise audio selon les navigateurs :

Lutilisation de nouvelles balises audio et vidéo dans h5

De nombreux sites Web à la mode proposent des vidéos,

Jusqu'à présent, personne n'a encore pour objectif d'afficher des vidéos sur des pages Web. standard. 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 des vidéos via l'élément vidéo. Et l'élément vidéo prend en charge les attributs globaux (tels que classe, identifiant, titre, style, etc.) et les attributs d'événement (tels que onresize, onredo, etc.) en HTML. Vous pouvez également définir la taille de la fenêtre vidéo

        <!DOCTYPE html>
        <html lang="en">
        
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
            </head>
            
            <body>
            
                <video autoplay controls>
            
                    <source src="movie04.ogg" />
                    <source src="mp4.mp4" />
                    Opps,您的浏览器版本太低,暂不支持该视频的播放~
                </video>
            </body>
        
        </html>

Changer d'adresse de lecture (généralement utilisée pour basculer entre l'ultra-clair et la haute définition. Lisse, différentes adresses vidéo de qualité différente) Lutilisation de nouvelles balises audio et vidéo dans h5

    <video src="test.mp4" controls width="400"  style="max-width:90%"></video>

Changer d'adresse alternative, plusieurs Les éléments source peuvent être intégrés dans la balise vidéo pour une commutation de sauvegarde de l'adresse de lecture. Lorsque la première vidéo ne parvient pas à se charger, la suivante sera automatiquement chargée.

<video src="test.mp4" controls autoplay width="400" height="300" id="test1"></video>
  <script>
    var video = document.getElementById(&#39;test1&#39;)
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   绝对地址，DOM 中是相对地址
    // video.src = &#39;test-2.mp4&#39;   // 直接替换掉了原来的视频src    
    setTimeout(() => {
      video.src = &#39;test-2.mp4&#39;  // 播放到第 30s 的时候，自动切换视频    
    }, 30000)  
  </script>

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!

html5 chrome html class 事件

Déclaration：

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

Article précédent：Quels sont les frameworks de développement d’applications HTML5 ?Article suivant：Quels sont les frameworks de développement d’applications HTML5 ?

Articles Liés

Voir plus