HTML5 menggunakan elemen Video
Sehingga kini, tiada standard untuk memaparkan video pada halaman web.
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.
HTML5 (Video) - Cara ia berfungsi
Untuk memaparkan video dalam HTML5, anda hanya perlukan:
Contoh< The ??>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持Video標簽。 </video> </body> </html>
<elemen video> menyediakan kawalan main, jeda dan kelantangan untuk mengawal video.
Pada masa yang sama, elemen <video> juga menyediakan atribut lebar dan ketinggian untuk mengawal saiz video Jika ketinggian dan lebar ditetapkan, ruang video yang diperlukan akan dikhaskan apabila halaman dimuatkan. . Jika sifat ini tidak ditetapkan dan penyemak imbas tidak mengetahui saiz video, penyemak imbas tidak akan dapat menempah ruang tertentu semasa memuatkan dan halaman akan berubah berdasarkan saiz video asal. Kandungan yang dimasukkan antara tag <video> dan </video> disediakan untuk paparan oleh penyemak imbas yang tidak menyokong elemen video. Elemen <video> menyokong berbilang elemen <sumber> Penyemak imbas akan menggunakan format pertama yang diiktiraf: Format video dan sokongan penyemak imbasPada masa ini, elemen <video> menyokong tiga format video: MP4, WebM dan Ogg :
- MP4 = Fail MPEG 4 dengan pengekodan video H.264 dan pengekodan audio AAC
- WebM = Fail WebM dengan VP8 pengekodan video dan pengekodan audio Vorbis
- Ogg = Fail Ogg dengan pengekodan video Theora dan pengekodan audio Vorbis
HTML5 <video> - Dikawal menggunakan DOM
HTML5 <video> elemen juga mempunyai kaedah, sifat dan acara. Kaedah, sifat dan peristiwa
<video> elemen boleh dikawal menggunakan JavaScript
Kaedahnya termasuk main, jeda dan muatkan. Sifat (seperti tempoh, kelantangan, dll.) boleh dibaca atau ditetapkan. Acara DOM boleh memberitahu anda bahawa, sebagai contoh, elemen <video> telah mula dimainkan, telah dijeda, telah dihentikan, dsb.
Kaedah ringkas dalam contoh menunjukkan kepada kita cara menggunakan elemen <video>, membaca dan menetapkan atribut dan cara memanggil kaedah.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暫停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">縮小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的瀏覽器不支持 HTML5 video 標簽。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>Tag Video HTML5
