Video
Reka Bentuk Web Responsif - Video
Gunakan atribut lebar
Jika atribut lebar ditetapkan kepada 100%, pemain video akan melaraskan perkadaran secara automatik mengikut saiz skrin :
Perhatikan bahawa dalam contoh di atas, pemain video secara automatik menskala mengikut saiz skrin dan boleh menjadi lebih besar daripada saiz asal. Dalam lebih banyak kes, kita boleh menggunakan atribut lebar maksimum.
Gunakan atribut max-width
Jika atribut max-width ditetapkan kepada 100%, pemain video akan berskala secara automatik mengikut skrin, tetapi tidak akan melebihi asalnya saiz:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video width="400" controls>
<source src="http://globalvideo.php.cn/xphp/11-10-3.mp4" type="video/mp4">
<source src="" type="video/ogg">
您的浏览器不支持HTML5视频。
</video>
<p>调整浏览器窗口大小查看视频播放器变化</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tambahkan video pada halaman web
Kami boleh menambah video pada halaman web. Video contoh berikut melaraskan secara automatik mengikut saiz kawasan div dan menduduki keseluruhan kawasan div:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<video width="400" controls>
<source src="http://globalvideo.php.cn/xphp/11-10-3.mp4" type="video/mp4">
<source src="" type="video/ogg">
您的浏览器不支持HTML5视频。
</video>
<p>调整浏览器窗口大小，在宽度小于 400px 时，查看视频播放器的变化。</p>
</body>
</html>Jalankan contoh »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
