masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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中文网</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 imbas

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

QQ截图20161013163806.png

  • 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

Format video

QQ截图20161013163801.png

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中文网</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

QQ截图20161013163849.png

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan