详解HTML5新增的多媒体标签

2022-09-06 0 511
2023.1.2
资源来源于互联网和网友投稿如有侵犯到你的知识产权请发送邮件我们将在72小时内请及时及时删除下架,客服QQ1506151422
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除。
如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

本站只提供资源,不提供技术支持,介意勿下!源码太多站长无法每款都进行测试请自行甄别,虚拟产品售出无退换,下载链接如有失效请及时

详解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控件,循环和设置大小属性
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

网站部分资源上传至小程序供免费下载

百度小程序 小程序
 
常见问题

相关文章