Rumah > Artikel > hujung hadapan web > Penggunaan audio dan video tag baharu dalam h5
Penggunaan audio dan video tag baharu dalam h5
- 灭绝师太asal
- 2021-10-27 17:52:234123semak imbas
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='http://player.youku.com/embed/XMzIzNTc0MTAwMA==' frameborder=0 '
allowfullscreen'></iframe>
</body>
</html> Kesannya adalah seperti berikut:
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>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.
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>
atribut video
<video src="test.mp4" controls width="400" height="300"></video>
🎜> 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('test1')
console.log(video.src) // http://127.0.0.1:8001/test.mp4 绝对地址，DOM 中是相对地址
// video.src = 'test-2.mp4' // 直接替换掉了原来的视频src
setTimeout(() => {
video.src = 'test-2.mp4' // 播放到第 30s 的时候，自动切换视频
}, 30000)
</script> <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('test2')
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>
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!