Video HTML5(video)

Pengenalan teg video

Kebanyakan pengguna telah memasang pemalam Flash (malah, kira-kira 95% pengguna Internet telah memasang beberapa versi Flash), tetapi Penyokong HTML 5 adalah mendesak untuk standard video terbuka dan bebas pemalam. Ini adalah idea yang dibawa oleh teg <video> HTML 5 yang baharu, yang menyediakan cara untuk membenamkan (dan berinteraksi dengan) video tanpa memerlukan pemalam proprietari seperti Flash.

Sehingga kini, tiada standard untuk memaparkan video pada halaman web.

Sokongan penyemak imbas

Internet Explorer 9+, Firefox, Opera, Chrome dan Safari menyokong elemen <video>

Nota: Internet Explorer 8 atau versi terdahulu IE tidak menyokong elemen <video>

Penggunaan teg Video

Teg video mengandungi beberapa atribut seperti src, poster, pramuat, automain, gelung, kawalan, lebar, ketinggian , dsb. , dan teg dalaman <sumber>. Selain teg <sumber>, teg Video juga boleh mengandungi kandungan yang dikembalikan apabila video yang ditentukan tidak dapat dimainkan.

(1) atribut src dan atribut poster

Anda boleh bayangkan untuk apa atribut src digunakan. Seperti teg <img>, atribut ini digunakan untuk menentukan alamat video. Atribut poster digunakan untuk menentukan gambar yang akan dipaparkan (gambar pratonton) apabila data video semasa tidak sah. Data video tidak sah mungkin bermakna video sedang dimuatkan, alamat video mungkin salah, dsb.

(2) atribut pramuat

Atribut ini juga boleh difahami dengan namanya Atribut ini digunakan untuk menentukan sama ada video telah dimuatkan. Atribut mempunyai tiga nilai pilihan: tiada, metadata dan auto. Jika atribut ini tidak digunakan, lalai adalah auto.

Tiada: Tiada pramuat. Menggunakan nilai atribut ini, ada kemungkinan bahawa pengarang halaman percaya bahawa pengguna tidak mengharapkan video ini, atau mengurangkan permintaan HTTP.

Metadata: Dipramuat separa. Menggunakan nilai atribut ini bermakna pengarang halaman percaya bahawa pengguna tidak menjangkakan video ini, tetapi menyediakan pengguna dengan beberapa metadata (termasuk dimensi, bingkai pertama, senarai runut, tempoh, dll.).

Auto: Semua dipramuat.

(3) atribut autoplay

ialah satu lagi atribut yang penggunaannya boleh diketahui dengan namanya. Atribut Autoplay digunakan untuk menetapkan sama ada video itu dimainkan secara automatik. Apabila ia muncul, ia bermakna main balik automatik Jika ia dikeluarkan, ia bermakna bukan main semula automatik.

Perhatikan bahawa nilai atribut Boolean dalam HTML adalah tidak benar dan palsu. Penggunaan yang betul ialah menggunakan atribut ini dalam teg untuk menunjukkan benar Pada masa ini, atribut sama ada tidak mempunyai nilai atau nilainya sama dengan namanya (di sini, automain ialah <video automain /> atau <video automain. =" autoplay" /> dan tidak menggunakan atribut ini dalam teg bermakna palsu (bukan automain di sini ialah <video />).

(4) atribut gelung

Sepintas lalu, atribut gelung digunakan untuk menentukan sama ada video dimainkan dalam gelung, yang juga merupakan atribut Boolean.

(5) atribut kawalan

Atribut Controls digunakan untuk menunjukkan kepada penyemak imbas bahawa pengarang halaman tidak menggunakan skrip untuk menjana pengawal main balik dan penyemak imbas perlu mendayakan lajur kawalan main baliknya sendiri.

Bar kawalan mesti termasuk kawalan jeda main balik, kawalan kemajuan main balik, kawalan kelantangan, dsb.

Bar kawalan main balik lalai setiap penyemak imbas adalah berbeza dalam antara muka. Disebabkan masalah pelik dengan penyemak imbas saya, tag Video Firefox dan Safari tidak berfungsi dengan betul, jadi saya hanya boleh mencari tangkapan skrin kedua-dua ini dalam talian.

(6) Atribut lebar dan tinggi

ialah atribut biasa bagi teg.

Format video dan sokongan penyemak imbas

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

Pelayar                                                                                                                                                                                                                     🎜>Internet Explorer YA YA TIDAK TIDAK Chrome YA YA YA YA Firefox                                                                                     Opera 25 dan ke atas) YA YA YA MP4 = fail MPEG 4 dengan video H.264 pengekodan dan pengekodan audio AAC

Ogg = Dengan pengekodan video Theora dan fail Ogg yang dikodkan audio Vorbis

<!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="http://www.w3school.com.cn/example/html5/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=600; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>