Rumah > hujung hadapan web > Tutorial H5 > Penjelasan terperinci tentang tag multimedia baharu dalam HTML5

Penjelasan terperinci tentang tag multimedia baharu dalam HTML5

藏色散人
Lepaskan: 2022-08-05 16:10:50
ke hadapan
3423 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

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)播放器高度
looploop循环播放
srcurl视频url地址
posterimageurl加载等待的话面图片
mutedmuted静音播放

2: Audio <audio>

浏览器MP3WavOgg
IE 9 YESNONO
Chrome 6 YESYESYES
Firefox 3.6 YESYESYES
Safari 5 YESYESNO
Opera 10 YESYESYES
<!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!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan