视频标签- video 音频标签- audio

基本使用当前  元素支持三种视频格式: 尽量使用 mp4格式使用语法: <video src="media/mi.mp4"></video>

属性很多,有一些属性需要大家重点掌握:

  • autoplay 自动播放
    • 注意: 在google浏览器上面,默认禁止了自动播放,如果想要自动播放的效果,需要设置 muted属性
  • width 宽度
  • height 高度
  • loop 循环播放
  • src 播放源
  • muted 静音播放

示例代码:

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

音频标签- audio

基本使用

当前 元素支持三种视频格式: 尽量使用 mp3格式

使用语法:

<audio src="media/music.mp3"></audio>

audio 常用属性

示例代码:

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

小结

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

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值