H5多媒体标签

最新推荐文章于 2024-02-02 00:00:00 发布

么贺贵

最新推荐文章于 2024-02-02 00:00:00 发布

阅读量364

点赞数 4

分类专栏： H5学习文章标签： html5

本文链接：https://blog.csdn.net/ayhg1/article/details/117553087

版权

H5学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

H5多媒体标签

在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为和元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作和元素。下面对这两个标签分别讲解。

audio标签（音频播放）

本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：

格式	IE9+	Firefox3.5	Opera11.5	Chrome 4.0	safari 4.0
Ogg	×	√	√	√	×
Wav	×	√	√	×	√
Mp3	√	×	×	√	√

本标签属性名及属性说明如下表：

属性名称	属性说明
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在加载完成后随即播放音频/视频。
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频/视频的 CORS 设置。
currentSrc	返回当前音频/视频的 URL。
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频/视频默认是否静音。
defaultPlaybackRate	设置或返回音频/视频的默认播放速度。
duration	返回当前音频/视频的长度（以秒计）。
ended	返回音频/视频的播放是否已结束。
error	返回表示音频/视频错误状态的 MediaError 对象。
loop	设置或返回音频/视频是否应在结束时重新播放。
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。
muted	设置或返回音频/视频是否静音。
networkState	返回音频/视频的当前网络状态。
paused	设置或返回音频/视频是否暂停。
playbackRate	设置或返回音频/视频播放的速度。
played	返回表示音频/视频已播放部分的 TimeRanges 对象。
preload	设置或返回音频/视频是否应该在页面加载后进行加载。
readyState	返回音频/视频当前的就绪状态。
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象。
seeking	返回用户是否正在音频/视频中进行查找。
src	设置或返回音频/视频元素的当前来源。
startDate	返回表示当前时间偏移的 Date 对象。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象。
volume	设置或返回音频/视频的音量。

下面对部分属性进行代码讲解。

<!--controls属性控制播放（音乐播放控制器面板） -->
<audio src="http://mp3.9ku.com/mp3/550/549564.mp3" controls></audio>
<!--autoplay 加载之后自动播放（谷歌、ie）、火狐尝试不好用-->
<audio src="http://mp3.9ku.com/mp3/550/549564.mp3" autoplay></audio>
<!--preload  ：文件比较大时候用这个，三个值
			none：不进行缓存   
			auto：默认，选择性的缓存
			metadata：只缓存文件原信息
-->
<audio src="http://mp3.9ku.com/mp3/550/549564.mp3" preload="none"></audio>
<!--muted静音的属性 -->
<audio src="http://mp3.9ku.com/mp3/550/549564.mp3" muted></audio>
<!--oog文件：
	ie和safari不支持  
	在多媒体标签内加入source标签，用来指定多个播放路径，
	当第一个如今出错时。自动切换到第二个
	source：当浏览器支持的格式文件不一样时，我们在添加音频资源的时候需要考虑到浏览器时候致辞。
	可以准备多个格式的音频文件供浏览器选择，当第一个source标签的路径出错时，自动会切换到第二个source标签
	（下属代码不能够直接使用，记得选中自己的文件）
-->
<audio>
	<source src="mp3/踏山河.mp3"></source>
	<source src="mp3/踏山河.oog"></source>
	<source src="mp3/踏山河.mp3"></source>
</audio>

source标签支持格式如下：

格式	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

本标签除了一些属性还自带了一些方法，下面对部分常用方法进行演示。

MIME-type	说明
onplay	视频放时触发的事件
onpause	视频暂停时触发的事件
ontimeupdate	视频在播放时持续触发的事件
onended	视频播放结束时触发的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<audio controls="controls">
			<source src="mp3/踏山河.ogg" type="audio/ogg">文件加载失败</source>
			<source src="mp3/踏山河.wav"></source>
			<source src="mp3/踏山河.mp3" type="audio/mp3"></source>
			当前浏览器不支持audio
		</audio>
		<audio src="http://mp3.9ku.com/mp3/550/549564.mp3" controls>
		 	当前浏览器不支持audio
		 </audio>
		<div id="skill">
			<button type="button">播放</button>
			<button type="button">暂停</button>
			<button type="button">1.5倍数</button>
		</div>
		<script type="text/javascript">
			// 获取音频元素 
			var audio=document.querySelector('audio');
			// 视/音频放时触发的事件
			audio.onplay=function(){
				console.log('开始播放啦');
			}  
			audio.onpause  =function(){
				console.log('暂停 播放');
			}  
			audio.ontimeupdate=function(){] 
				// console.log('持续播放');
			}  
			audio.onended=function(){
				console.log('播放完毕');
			}  
			// 通过js控制音频播放器实现播放、暂停
			var skill= document.querySelectorAll('button');
			skill[0].onclick=function(){
				// console.log('播放');
				audio.play();//播放音频、视频
			}
			// 暂停
			skill[1].onclick=function(){
				// duration,currentTime以秒数为单位
				console.log('当前音频的总长度:',audio.duration);
				console.log('当前时长:',audio.currentTime);
				console.log('当前音量:',audio.volume);
				console.log('地址:',audio.currentSrc);
				console.log('速率:',audio.playbackRate);//当前播放速率
				// 设置音量
				audio.volume=0.5;
				// console.log('播放');
				audio.pause();//暂停音频、视频
			}
			skill[2].onclick=function(){
				audio.playbackRate+=1.5;
			}
		</script>
	</body>
</html>

video标签（视频播放）

·video标签的属性和使用方法与audio一直，所需要的条件基本相同需要注意的是如果想要视频自动播放得将视频静音，当设置宽高的时候，一般默认只会设置宽度或者高度，让它自动缩放等比例的。如果同时设置了宽度高度，视频不会真正的调整到刚好的宽高，除非设置的值刚好是等比例。

<video width="500" controls="controls">
	<source src="./mp4/你的名字.mp4" type="video/mp4"></source>
	<source src="./mp4/你的名字.ogg" type="video/ogg"></source>
	<source src="./mp4/你的名字.webm" type="video/webm"></source>
	当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

制作整理不易，以上内容均为原创（参考了部分官方文档）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！

么贺贵

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5多媒体标签

H5多媒体标签在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为和元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作和元素。下面对这两个标签分别讲解。audio标签（音频播放）本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：
复制链接

扫一扫