h5 での新しいタグ audio と video の使用-H5 チュートリアル-php.cn

h5 での新しいタグ audio と video の使用

灭绝师太

リリース： 2021-10-27 19:15:46

オリジナル

4119 人が閲覧しました

Web ページにオーディオリソースを追加するように求められた場合、どのように実装しますか?

h5 が登場する前は、iframe 要素を使用して Web ページにビデオリソースを挿入できました。コードは次のように実装されています:

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

ログイン後にコピー

結果は次のとおりです:

h5 での新しいタグ audio と video の使用

さらに、HTML5 のオーディオタグとビデオタグを使用してオーディオメディアリソースを導入することもできます。 Web ページの充実度を高めるために Web ページに追加します。

効果は次のとおりです (Chrome ブラウザ):controls 属性を audio タグに追加すると、再生ボタンなどのコントロールをユーザーに表示できます。loop 属性は、再生が開始されることを意味します。音声が終了するたびにもう一度。

# audio タグはブラウザごとに異なる効果を持ちます: h5 での新しいタグ audio と video の使用

# #多くのトレンドWeb サイトはビデオを提供します。 h5 での新しいタグ audio と video の使用

これまで、Web ページにビデオを表示するための標準はまだありませんでした。現在、ほとんどのビデオは Flash などのプラグインを介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。

HTML5 では、video 要素を通じてビデオを含める標準的な方法を指定しています。また、video 要素は、HTML のグローバル属性 (class、id、title、style など) とイベント属性 (onresize、onredo など) をサポートします。

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

ログイン後にコピー

h5 での新しいタグ audio と video の使用 ##動画属性

ビデオウィンドウサイズを設定することもできます。

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

ログイン後にコピー

再生アドレスの切り替え (通常は超クリアと高解像度の滑らかな、異なる品質の異なるビデオアドレスを切り替えるために使用されます)

    <video src="test.mp4" controls width="400" height="300"></video>

ログイン後にコピー

代替アドレスを切り替えると、複数のソース要素をビデオタグに埋め込むことができます再生アドレスがバックアップの切り替えであるため、最初のビデオのロードに失敗した場合、次のビデオが自動的にロードされます。

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

ログイン後にコピー

以上がh5 での新しいタグ audio と video の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。