HTML基础之 HTML5新增视频和音频标签

HTML5 新增多媒体标签主要包含两个:

  • 音频:audio
  • 视频:video

使用它们可以很方便在页面中嵌入音频和视频,而不再是去使用flash和其它浏览器插件。

视频: video

HTML5在不适用插件的情况,也可以原生的支持视频格式文件的播放,当然支持格是有限的。

在网页中如果看原网页的话,可以发现很多时候引入的视频文件有好几个格式,因为兼容问题,不同的浏览器支持不同的格式而已,目前只支持三个格式,MP4,WebM,Ogg。浏览器支持的格式:

浏览器MP4WebMOgg
IEYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYESYESYES

所以为了兼容性更好,一般都使用mp4格式。

具体格式:

<video src="文件地址" controls="controls"></video>

但是为了兼容有些浏览器不兼容,不支持video标签如下写:

<video width='320' height='240' controls>
<source src="文件地址" type="type/mp4">
    <source src="文件地址" type="type/ogg">
</video>

video的属性值:

autoplayautoplay如果出现该属性,则视频在就绪后马上播放。但是谷歌浏览器需要添加muted来解决自动播放问题。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadauto:预先加载视频。
none:不应加载视频
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

如果只是单独的引入资源,虽然引入但是没有播放效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"   > 2013赛博朋克2077广告 </video>
</body>
</html>

在这里插入图片描述

所以在引入数据的时候,就应该带有其它的属性。

演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"   autoplay="autoplay" muted="muted"> 2013赛博朋克2077广告 </video>
</body>
</html>

在这里插入图片描述

可以看出可以自动播放,但是没有进度条声音等控制的选项,这个就需要controls属性。虽然演示一下,但是一般不会主动写这个属性,因为其在不同的浏览器中比如播放按钮等会有不同的样式,所以一般为了让其样式统一,通过js进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted"> 2013赛博朋克2077广告 </video>
</body>
</html>

在这里插入图片描述

还有很多产品网页视频在不停的循环播放,那个就需要loop属性了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted" loop="loop"> 2013赛博朋克2077广告 </video>
</body>
</html>

还有一个属性,那就是网速不够好,加载视频需要时间,如果单独看一个加载界面很难,所以就需要一个等待图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted" loop="loop" poster="文件地址"> 2013赛博朋克2077广告 </video>
</body>
</html>

音频 audio

音频也是支持三种格式:mp4,Wav,Ogg.

当然也有支持:

浏览器MP3WavOgg
IEYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

所以一般的时候音频文件都使用mp3.

格式:

<audio src="文件地址" controls="controls"></audio>

当然为了兼容低版本可以如下写:

<audio width='320' height='240' controls>
<source src="文件地址" type="type/mp3">
    <source src="文件地址" type="type/ogg">
</audio>

当然也有其属性:

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadauto:预先加载视频。
none:不应加载视频
如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的音频的 URL。

因两者使用很类似,就不在演示了。

需要注意一下:

  • 谷歌浏览器把音频和视频的自动播放禁止了,所以视频需要添加muted属性。但是音频不能通过muted控制,需要js进行控制。
  • 一般网页中视频经常设置为自动播放,所以不适用controls,当然如果有需要也是通过js来实现,毕竟为了显示的ui统一。
  • 1
    点赞
  • 10
    收藏
  • 打赏
    打赏
  • 1
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:岁月 设计师:pinMode 返回首页
评论 1

打赏作者

小猪弟

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值