Video HTML (Video)
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 ) boleh dimainkan.
Dalam bab ini, tapak web PHP Cina (php.cn) meringkaskan masalah dan penyelesaian untuk anda.
Gunakan teg <embed>
<embed>
Kod HTML berikut memaparkan video Flash yang dibenamkan dalam halaman web:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<embed src="Uploader.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>
</body>
</html>
Cari video dalam format swf, Jalankan Cuba
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> Benamkan elemen multimedia.
Coretan HTML berikut menunjukkan video Flash yang dibenamkan dalam halaman web:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<object height="200" width="200" data="Uploader.swf"></object>
</body>
</html>
Masalah:
Jika menyemak imbas Peranti tidak menyokong Flash dan tidak akan dapat memainkan 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.
Menggunakan elemen HTML5 <video>
HTML5 <video> video Atau video
<video> elemen disokong dalam semua penyemak imbas moden.
Coretan HTML berikut akan memaparkan video dalam format ogg, mp4 atau webm yang dibenamkan dalam halaman web:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<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>
Cari beberapa format video dalam contoh di atas dan jalankan atur cara untuk mencubanya
Masalah:
Anda perlu menukar video kepada pelbagai format yang berbeza. Elemen
<video> tidak sah dalam penyemak imbas lama.
Penyelesaian HTML terbaik
Contoh berikut menggunakan 4 format video yang berbeza. Elemen HTML 5 <video> cuba memainkan video dalam salah satu format mp4, ogg atau webm. Jika kedua-duanya gagal, kembali ke elemen <embed>
HTML 5 + <objek> + <embed>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<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>
Cari beberapa format video dalam contoh di atas dan jalankan program untuk mencuba
Masalah:
Penyelesaian Youku
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" width="480" height="400" type=" application/x-shockwave-flash"> </embed>
Instance
rreee
Cuba jalankan program
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 tambahan", seperti Windows Media Player, untuk memainkan fail AVI:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
</body>
</html>
Cari fail video dan cuba
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
Teg baharu HTML5.
| 标签 | 描述 |
| <embed> | 定义内嵌对象。HTML4 中不赞成，HTML5 中允许。 |
| <object> | 定义内嵌对象。 |
| <param> | 定义对象的参数。 |
| <audio> | 定义了声音内容 |
| <video> | 定义一个视频或者影片 |
| <source> | 定义了media元素的多媒体资源(<video> 和 <audio>) |
<track> | 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |
