前言
主要是视频的标签的属性和使用方法。
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).浏览器支持:
当然也有支持:
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
IE | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
所以一般的时候音频文件都使用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。浏览器支持的格式:
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
IE | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
(三).格式:
具体格式:
<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的属性值:
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。但是谷歌浏览器需要添加muted来解决自动播放问题。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | auto | 预先加载视频 |
none | 不应加载视频 | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL |
width | pixels | 设置视频播放器的宽度 |
如果只是单独的引入资源,虽然引入但是没有播放效果。
<!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>
运行结果如下:
🍋最后🍋
总结不易,希望小宝们不要嫌弃哦!😀