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

视频格式

< td width="193" valign="top" style="border-width: 1px; border-style: solid; word-break: break-all;">

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

格式<🎜><🎜> <🎜> jenis MIME<🎜><🎜> 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

标签	描述
<video>	定义一个视频
<source>	定义多种媒体资源,比如 <video> 和<audio>
<track>	定义在媒体播放器文本轨迹

teg

Penerangan<🎜><🎜>

<video>

Tentukan video

Tentukan berbilang sumber media, seperti <video> dan <audio>

<track>

ditakrifkan dalam media teks pemain Trek

<🎜><🎜><🎜>

Meneruskan pembelajaran

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik