源码UI-官方源码UI-官方 HTML 其他教程 技术教程

详解HTML5新增的多媒体标签

HTML5新增的多媒体标签

一：视频<video>

当前<video>元素支持三种视频格式：尽量使用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

1

2

3

4

<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>

视频<video>——常见属性

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

二：音频<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

1

2

3

4

5

6

7

8

9

10

<!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>

谷歌浏览器把音频和视频自动播放禁止了

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

多媒体标签总结

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
  • 视频标签是重点，我们经常设置自动播放，不适用conrols控件，循环和设置大小属性
下载说明：

1.本站资源都是白菜价出售，同样的东西，我们不卖几百，也不卖几十，甚至才卖几块钱，一个永久会员能下载全站100%源码了，所以单独购买也好，会员也好均不提供相关技术服务。

2.如果源码下载地址失效请/联系站长QQ进行补发。

3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4.本站站内提供的所有可下载资源（软件等等）本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发）；但本网站不能保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug；同时本站用户必须明白，【源码源码ui网】对提供下载的软件等不拥有任何权利（本站原创和特约原创作者除外），其版权归该资源的合法拥有者所有。

5.请您认真阅读上述内容，购买即以为着您同意上述内容。

源码UI网 » 详解HTML5新增的多媒体标签

源码UI-官方 钻石

分享到：

相关推荐

发表回复