Penggunaan audio dan video tag baharu dalam h5-Tutorial H5-php.cn

Penggunaan audio dan video tag baharu dalam h5

灭绝师太

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

asal

4107 orang telah melayarinya

Jika anda diminta menambah sumber audio pada halaman web, bagaimanakah anda akan melaksanakannya?

Sebelum kemunculan h5, kami boleh menggunakan elemen iframe untuk memasukkan sumber video ke dalam halaman web kami. Kod ini dilaksanakan seperti berikut:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

Penggunaan audio dan video tag baharu dalam h5

Selain itu, kami juga boleh menggunakan tag audio dan video Html5 untuk memperkenalkan audio sumber media ke dalam halaman web kami dan menambah halaman web kekayaan.

Teg

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

Salin selepas log masuk

Kesannya adalah seperti berikut (pelayar chrome): Menambah atribut kawalan pada teg audio boleh memaparkan kawalan kepada pengguna, seperti butang mainkan bermakna main balik bermula semula setiap kali audio tamat.

Penggunaan audio dan video tag baharu dalam h5

Teg audio mempunyai kesan berbeza di bawah penyemak imbas yang berbeza:

Penggunaan audio dan video tag baharu dalam h5

>Banyak tapak web yang bergaya menawarkan video,

Sehingga kini, standard untuk memaparkan video pada halaman web tidak wujud. Hari ini, kebanyakan video dipaparkan melalui pemalam seperti Flash. Walau bagaimanapun, tidak semua pelayar mempunyai pemalam yang sama.

HTML5 menentukan cara standard untuk memasukkan video melalui elemen video. Dan elemen video menyokong atribut global (seperti kelas, id, tajuk, gaya, dll.) dan atribut acara (seperti onresize, onredo, dll.) dalam HTML.

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

Salin selepas log masuk

Penggunaan audio dan video tag baharu dalam h5

atribut video

Anda juga boleh menetapkan saiz tetingkap video

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

Salin selepas log masuk

🎜> Tukar alamat main balik (biasa digunakan dalam menukar ultra-jelas dan definisi tinggi lancar, alamat video berbeza dengan kualiti berbeza)
Elemen sumber digunakan sebagai suis sandaran untuk alamat main balik Apabila video pertama gagal dimuatkan, video seterusnya akan dimuatkan secara automatik.

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

Salin selepas log masuk

    <video controls autoplay width="400" height="300" id="test2">
        <source src="test3.mp4" type="video/mp4" />
        <source src="test9.mp4" type="video/mp4" />
        <source src="test-2.mp4" type="video/mp4" />
    </video>
    <script>
        var video = document.getElementById(&#39;test2&#39;)
        setTimeout(() => {
          console.log(video.currentSrc)     // http://127.0.0.1:8001/test-2.mp4   
        }, 1000)   
          // HTTP 载入失败，状态码 404。媒体资源 http://127.0.0.1:8001/test3.mp4 载入失败。
        // HTTP 载入失败，状态码 404。媒体资源 http://127.0.0.1:8001/test9.mp4 载入失败。
        
    </script>

Salin selepas log masuk

Atas ialah kandungan terperinci Penggunaan audio dan video tag baharu dalam h5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!