Die Verwendung der neuen Tags Audio und Video in h5-H5-Tutorial-php.cn

Die Verwendung der neuen Tags Audio und Video in h5

灭绝师太

Freigeben： 2021-10-27 19:15:46

Original

4164 Leute haben es durchsucht

Wenn Sie aufgefordert werden, Audioressourcen zur Webseite hinzuzufügen, wie werden Sie dies umsetzen?

Vor dem Aufkommen von h5 konnten wir iframe-Elemente verwenden, um Videoressourcen in unsere Webseiten einzufügen. Der Code ist wie folgt implementiert:

    <!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Die Verwendung der neuen Tags Audio und Video in h5

In Darüber hinaus können wir auch Ht ml5audio verwenden. Verwenden Sie das Video-Tag, um Audio-Medienressourcen in unsere Webseiten einzuführen und so den Reichtum der Webseiten zu erhöhen.

Das

        <!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>

Nach dem Login kopieren

Der Effekt ist wie folgt (Chrome-Browser): Durch Hinzufügen des Steuerelementattributs zum Audio-Tag können dem Benutzer Steuerelemente angezeigt werden, z. B. eine Wiedergabeschaltfläche, die bedeutet, dass die Wiedergabe jedes Mal erneut beginnt, wenn das Audio endet.

Die Verwendung der neuen Tags Audio und Video in h5

Es gibt Unterschiede in der Wirkung des Audio-Tags unter verschiedenen Browsern:

Die Verwendung der neuen Tags Audio und Video in h5

Viele modische Websites bieten Videos an,

Bisher gibt es noch niemanden, der darauf abzielt, Videos auf Webseiten anzuzeigen Standard. Heutzutage werden die meisten Videos über Plug-Ins wie Flash angezeigt. Allerdings verfügen nicht alle Browser über die gleichen Plugins.

HTML5 gibt eine Standardmethode zum Einbinden von Videos über das Videoelement an. Und das Videoelement unterstützt globale Attribute (wie Klasse, ID, Titel, Stil usw.) und Ereignisattribute (wie onresize, onredo usw.) in HTML. Sie können auch die Größe des Videofensters festlegen

        <!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>

Nach dem Login kopieren

sind unterschiedlich) Die Verwendung der neuen Tags Audio und Video in h5

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

Nach dem Login kopieren

kann eingebettet werden Mehrere Quellelemente zum Backup-Umschalten der Wiedergabeadresse. Wenn das erste Video nicht geladen werden kann, wird das nächste Video automatisch geladen.

<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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDie Verwendung der neuen Tags Audio und Video in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!