Video HTML (Video)


Terdapat banyak cara untuk memainkan video dalam HTML.

Main Semula Video HTML (Video)

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>

</body>
</html>

Instance Running»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian


Masalah dan Penyelesaian

Memainkan video dalam HTML bukanlah mudah!

Anda perlu mengetahui banyak helah untuk memastikan fail video anda berfungsi dalam semua penyemak imbas (Internet Explorer, Chrome, Firefox, Safari, Opera) dan pada semua perkakasan (PC, Mac, iPad, iPhone) Play .

Dalam bab ini, W3CSchool meringkaskan masalah dan penyelesaian untuk anda.

Gunakan teg <embed>

<embed>

Kod HTML berikut memaparkan video Flash yang dibenamkan dalam halaman web:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>Playing the Object</h2>

<embed src="intro.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>

</body>
</html>

Run Instance»

Klik butang "Jalankan Contoh" untuk melihat tika dalam talian

Masalah

  • HTML4 tidak mengenali <benamkan> Halaman anda tidak boleh lulus pengesahan.

  • Jika penyemak imbas tidak menyokong Flash, video tidak akan dimainkan

  • iPad dan iPhone tidak boleh memaparkan video Flash.

  • Jika anda menukar video kepada format lain, maka ia masih tidak akan dimainkan dalam semua penyemak imbas.

Gunakan teg <objek><objek>

Coretan HTML berikut menunjukkan video Flash yang dibenamkan dalam halaman web:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<object height="200" width="200" data="intro.swf"></object>

</body>
</html>

Running Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Masalah:

    Jika penyemak imbas melakukannya tidak menyokong Flash, ia tidak akan berfungsi Mainkan video.

    • iPad dan iPhone tidak boleh memaparkan video Flash.

    • Jika anda menukar video kepada format lain, maka ia masih tidak akan dimainkan dalam semua penyemak imbas.

Gunakan elemen <video> HTML5.

< ;elemen video> ; disokong dalam semua penyemak imbas moden.

Coretan HTML berikut memaparkan video dalam format ogg, mp4 atau webm yang dibenamkan dalam halaman web:

Contoh

rreee

Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian

Masalah:

  • Anda perlu menukar video kepada pelbagai format yang berbeza. Elemen

  • <video> tidak sah dalam penyemak imbas lama.

Penyelesaian HTML terbaik

4 format video berbeza digunakan dalam contoh berikut. Elemen HTML 5 <video> cuba memainkan video dalam salah satu format mp4, ogg atau webm. Jika kedua-duanya gagal, kembali ke elemen <embed>

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频。
</video>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Masalah:

  • Anda perlu menukar video kepada pelbagai format yang berbeza

Penyelesaian oleh Youku Solution

Cara paling mudah untuk memaparkan video dalam HTML ialah menggunakan tapak web video seperti Youku.

Jika anda ingin memainkan video pada halaman web, anda boleh memuat naik video tersebut ke tapak web video seperti Youku, dan kemudian masukkan kod HTML ke dalam halaman web anda untuk memainkan video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" lebar = "480" tinggi = "400" type="application/x-shockwave-flash"> </embed>

Menggunakan hiperpautan

Jika halaman web mengandungi hiperpautan ke fail media, kebanyakan penyemak imbas akan menggunakan "aplikasi pembantu" untuk memainkan fail .

Coretan kod berikut memaparkan pautan ke fail AVI. Jika pengguna mengklik pautan, penyemak imbas akan melancarkan "aplikasi pembantu" seperti Windows Media Player untuk memainkan fail AVI:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Nota tentang video sebaris

Apabila video disertakan dalam halaman web, ia dipanggil video sebaris.

Jika anda bercadang untuk menggunakan video sebaris dalam aplikasi web, anda perlu sedar bahawa ramai orang mendapati video sebaris menjengkelkan.

Juga sila ambil perhatian bahawa pengguna mungkin telah mematikan pilihan video sebaris dalam penyemak imbas mereka.

Nasihat terbaik kami ialah memasukkan video sebaris sahaja yang pengguna jangkakan untuk melihatnya. Contoh positif ialah apabila pengguna perlu melihat video dan mengklik pada pautan, yang membuka halaman dan kemudian memainkan video.

Teg Multimedia HTML

Baharu : Teg baharu HTML5.

< td>Sumber multimedia yang mentakrifkan elemen media (<video> dan <audio>)
TagPenerangan
<embed>Tentukan objek terbenam. Ditamatkan dalam HTML4, dibenarkan dalam HTML5.
<objek>Tentukan objek terbenam.
<param>Tentukan parameter objek.
<audio>
标签描述
<embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>定义内嵌对象。
<param>定义对象的参数。
<audio>定义了声音内容
<video>定义一个视频或者影片
<source>定义了media元素的多媒体资源(<video> 和 <audio>)
<track>规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)
Mentakrifkan kandungan bunyi
<video>Tentukan video atau filem
<source><🎜>
<track><🎜> Menentukan fail sari kata atau fail lain yang mengandungi teks untuk elemen media (<video> dan <audio>)
<🎜>
←