HTML5新增的video元素与audio元素的使用方法

最新推荐文章于 2022-03-16 15:29:44 发布

lixiuxiu2017

最新推荐文章于 2022-03-16 15:29:44 发布

阅读量3.5k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/lixiuxiu2017/article/details/79592252

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML4中如果要在网页上播放一段音频或视频，必须使用第三方插件比如flash，HTML4代码量太大，容易给服务器增加负担，造成宽带浪费，为了解决这些问题，HTML5中增加了video视频元素和audio音频元素功能

（1）基础用法：

①video元素专门用来播放网络上的视频，audio元素专门用来播放网络上的音频；使用video和audio元素进行播放时不需要使用其他的插件，只要浏览器支持HTML5即可；

②audio元素必须指定src属性和controls属性（必需的），比如：<audio src="MP3.mp3"controls="controls"></audio>，对于不支持HTML5的浏览器可以在audio元素之间加入提示语句即可

③video元素除了指定src属性和controls属性（可选的），还要指定width和height，比如：<video src="time.mp4"width="700" height="400"></video>，对于不支持HTML5的浏览器可以在video元素之间加入提示语句即可

④source元素作为audio和video元素的子元素，可以为同一个媒体数据指定多种播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，选择顺序自上而下，直到选到支持的格式为止（音频后缀名有mp3，视频后缀名有mp4/m4v/ogv/webm）比如：

<video>

</video>

支持audio元素和video元素的demo：

<!DOCTYPEhtml>

<html>

<head>

<title>video元素与audio元素</title>

</head>

<body>

<h1>audio元素的使用示例</h1>

<audiosrc="MP3.mp3" controls="controls"></audio>

<br/>

<h1>video元素的使用示例</h1>

<videosrc="video.mp4" width="600"height="280"></video>

</body>

</html>

（2）video和audio常用的属性：

1）src属性：指定媒体数据的URL地址（播放源）

2）controls属性：指定是否为媒体数据添加浏览器自带的播放控制条

3）width和height属性（video元素独有）：指定视频的宽度和高度

4）autoplay属性：指定当页面加载完成后是否自动开始播放

5）preload属性：指定是否对数据进行预加载，如果是的话，浏览器会对媒体数据进行缓冲，加快播放速度，包括三个属性值：none表示不进行预加载，metadata表示只预加载媒体的元数据，auto（默认值）表示预加载全部的视频或音频，对比演示：

<audiosrc="MP3.mp3" controls="controls"></audio>

<br/>

<audiosrc="MP3.mp3" controls="controls"preload="none"></audio>

6）poster属性（video元素独有）：当视频一开始没有播放或者无法播放时，使用poster元素指定一张图片代替视频，使用方法：<videosrc="video.mp4" poster="img.jpg"></video>

7）loop属性：指定是否循环播放音视频文件

8）error属性：读取过程发生错误时，返回一个Media Error对象，该对象的code属性返回一个数字，表示对应的错误状态，默认值为null，数字及对应的错误状态分别为：

1=MEDIA_ERR_ABORTED（读取过程中被用户中止）

2=MEDIA_ERR_NETWORK（下载时发生错误）

3=MEDIA_ERR_DECODE（解码时发生错误）

4=MEDIA_ERR_SRC_NOT_SUPPORTED（媒体不可用或者不支持音视频）

具体demo如下：（video1.mp4文件不存在，所以可能出现错误4）

<!DOCTYPEhtml>

<html>

<head>

<title>video元素与audio元素</title>

</head>

<body>

<h1>video和audio元素的属性error</h1>

<videosrc="video1.mp4" id='video'></video>

<scripttype="text/javascript">

varvideo=document.getElementById('video');

video.addEventListener('error',function(){

var error=video.error;//返回一个错误对象

switch(error.code){ //根据错误代码执行不同的错误状态

case 1:alert('读取过程中被用户中止');

break;

case 2:alert('下载时发生错误');

break;

case 2:alert('解码时发生错误');

break;

case 2:alert('媒体不可用或者不支持音视频');

break;

}

},false);

</script>

</body>

</html>

lixiuxiu2017

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增的video元素与audio元素的使用方法

HTML4中如果要在网页上播放一段音频或视频，必须使用第三方插件比如flash，HTML4代码量太大，容易给服务器增加负担，造成宽带浪费，为了解决这些问题，HTML5中增加了video视频元素和audio音频元素功能（1）基础用法：①video元素专门用来播放网络上的视频，audio元素专门用来播放网络上的音频；使用video和audio元素进行播放时不需要使用其他的插件，只要浏览器支持HTML5...
复制链接

扫一扫

专栏目录