Video HTML5(video)
Banyak tapak menggunakan video HTML5 menyediakan standard untuk memaparkan video.
Video di Tapak Web
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.
Sokongan penyemak imbas
Internet Explorer 9+, Firefox, Opera, Chrome dan Safari menyokong elemen <video>
Nota: Internet Explorer 8 atau versi IE yang lebih awal < ;elemen video> tidak disokong.
HTML5 (Video) - Cara ia berfungsi
Untuk memaparkan video dalam HTML5, anda hanya perlukan :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </body> </html>
Jalankan dan cuba
<video> elemen menyediakan main, jeda dan kawalan 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 ditempah apabila halaman itu 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 dikenali:
Format video dengan sokongan penyemak imbas
Pada masa ini, <video> ; elemen 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 pengekodan video VP8 dan pengekodan audio Vorbis
Fail Ogg = Ogg dengan pengekodan video Theora dan pengekodan audio Vorbis
| 浏览器 | MP4 | WebM | Ogg |
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
视频格式
| 格式 | MIME-type |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - dikawal menggunakan DOM
HTML5 <video> , hartanah 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中文网(php.cn)</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="videol" width="420">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("videol");
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>Cuba jalankannya
Untuk rujukan lanjut, sila semak Manual Rujukan DOM Audio/Video HTML5.
Teg Video HTML5
| Penerangan<🎜><🎜> | ||||||||
| <video> | Tentukan video | ||||||||
| <source> | Tentukan berbilang sumber media, seperti <video> dan <audio> | ||||||||
| <track> | ditakrifkan dalam media teks pemain Trek |
