suchen

Heim >Web-Frontend >H5-Tutorial >Die Verwendung der neuen Tags Audio und Video in h5

Die Verwendung der neuen Tags Audio und Video in h5

灭绝师太
灭绝师太Original
2021-10-27 17:52:234165Durchsuche

        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>

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>

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>

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

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

                                                                                                                                                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>

​​​​

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!

html5 chrome html class 事件
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was sind die HTML5-App-Entwicklungsframeworks?Nächster Artikel：Was sind die HTML5-App-Entwicklungsframeworks?

In Verbindung stehende Artikel

Mehr sehen