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 tidak menyokong elemen <video>

HTML5 (Video) - Cara ia berfungsi

Untuk memaparkan video dalam HTML5, anda hanya perlukan:

Contoh

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

Klik butang "Run Instance" untuk melihat contoh dalam talian

<video> elemen 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 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 diiktiraf:

Format video dan sokongan penyemak imbas

Pada masa ini, elemen <video> menyokong tiga format video: MP4, WebM dan Ogg:

浏览器	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

MP4 = fail MPEG 4 dengan pengekodan video H.264 dan pengekodan audio AAC
WebM = dengan pengekodan video VP8 dan pengekodan audio Vorbis fail WebM
Ogg = Fail Ogg dengan pengekodan video Theora dan pengekodan audio Vorbis

Format video

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - Kawal 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.

Instance

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

Run Instance»