HTML中如何设置音频和视频.

前言

主要是视频的标签的属性和使用方法

html中插入音频和视频的方法基本相同,这里以音频为例进行演示

音频格式:mp3、ogg、wav

视频格式:mp4、ogv、webm
编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间;如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:AAC、MPEG-3、Ogg Voribs,

视频编解码器:H.264、VP8、Ogg Theora。

1.video 视频元素

以往的视频播放,需要借助Flash插件才可以实现。但Flash插件不稳定,经常导致浏览器崩溃,因此许多浏览器开始抛弃它,目前谷歌浏览器已经抛弃了Flash插件支持,取而代之的是HTML5的video元素。

属性名称说明
src视频资源的 URL
width视频宽度
height视频高度
autoplay设置后,表示立刻开始播放视频
preload设置后,表示预先载入视频
controls设置后,表示显示播放控件
loo设置后,表示反复播放视频
muted设置后,表示视频处于静音状态
poster指定视频数据载入时显示的图片

2.音频 audio

(1).音频:

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

(2).浏览器支持:

当然也有支持:

浏览器MP3WavOgg
IEYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

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

(三).格式:

格式:

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

运行结果如下:
在这里插入图片描述

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

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

运行效果如下:
在这里插入图片描述

2、视频 video

(1).音频:

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

(2).浏览器支持:

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

浏览器MP3WavOgg
IEYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

(三).格式:

具体格式:

<video src="video/美景2.webm" controls="controls"></video>

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

<video width='310' height='200' 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>在HTML中如何设置音频和视频</title>
</head>
<body>
<video src="video/美景2.webm">美景</video>
</body>
</html>

运行效果如下:
在这里插入图片描述就是空的。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在HTML中如何设置音频和视频</title>
</head>
<body>
<video src="video/美景2.webm" controls="controls" autoplay="autoplay" muted="muted">美景</video>
</body>
</html>

运行结果如下:
在这里插入图片描述

🍋最后🍋

总结不易,希望小宝们不要嫌弃哦!😀

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值