Penjelasan terperinci tentang tag multimedia baharu dalam HTML5-Tutorial H5-php.cn

Penjelasan terperinci tentang tag multimedia baharu dalam HTML5

藏色散人

Lepaskan： 2022-08-05 16:10:50

ke hadapan

3425 orang telah melayarinya

Artikel ini akan memperkenalkan kepada anda teg multimedia yang biasa digunakan dalam HTML dan teg multimedia baharu dalam HTML5 saya harap ia dapat membantu rakan yang memerlukan.

Teg multimedia baharu HTML5

1: Video<video>

Video tiga format video: cuba gunakan format MP4

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从Firefox21版本开始Linux系统从Firefox 30开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从Opera25版本开始	YES	YES

<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>

Salin selepas log masuk

video<video> - atribut biasa

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	播放器高度
loop	loop	循环播放
src	url	视频url地址
poster	imageurl	加载等待的话面图片
muted	muted	静音播放

2: Audio <audio>

浏览器	MP3	Wav	Ogg
IE 9	YES	NO	NO
Chrome 6	YES	YES	YES
Firefox 3.6	YES	YES	YES
Safari 5	YES	YES	NO
Opera 10	YES	YES	YES

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

Salin selepas log masuk

Google Chrome melumpuhkan main balik automatik audio dan video

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	向用户显示播放控件
loop	loop	循环播放
src	url	视频url地址
muted	muted	静音播放

Ringkasan teg multimedia

Teg audio dan teg video pada asasnya digunakan dengan cara yang sama
Sokongan penyemak imbas adalah berbeza
Google Chrome melumpuhkan main balik automatik audio dan video
Kami boleh menambahkan atribut yang diredamkan pada teg video untuk meredamkan video, tetapi audio tidak boleh (boleh diselesaikan melalui JavaScript)
Teg video ialah titik utama Kami sering menyediakan main balik automatik dan kawalan kawalan , gelung dan tetapan tidak berkenaan Atribut saiz

[Cadangan berkaitan: tutorial video css]

Atas ialah kandungan terperinci Penjelasan terperinci tentang tag multimedia baharu dalam HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!