H5 学习笔记（day03)HTML＜audio＞＜video＞

最新推荐文章于 2023-12-08 09:46:11 发布

DragonLoveYQ

最新推荐文章于 2023-12-08 09:46:11 发布

阅读量1k

点赞数 2

分类专栏：个人学习文章标签： js

本文链接：https://blog.csdn.net/DragonLoveYQ/article/details/110063554

版权

个人学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

< audio > 与< video>标签

浏览器支持：

浏览器	是否支持
IE	IE 9+
Firefox	√
Chrome	√
Safari	√
Opera	√

提示：IE8 以及 IE8- 不支持 audio 标签。

定义与使用：

< audio >定义声音，比如音乐或其他音频流。
< audio >支持的格式：mp3、wav、ogg
浏览器支持的文件格式：

浏览器	mp3	wav	ogg
IE 9+	√
Firefox 3.5		√	√
Chrome 3.0	√		√
Safari 3.0	√	√
Opera 10.5		√	√

< video >定义视频，比如电影片段或其他视频流
< video >支持的格式：mp3、wav、ogg
浏览器支持的文件格式：

浏览器	mp4	WebM	Ogg
IE	9.0+	×	×
Firefox	×	4.0	3.5+
Chrome	5.0+	6.0+	5.0+
Safari	3.0+	×	×
Opera	×	10.6+	10.5+

实例

可以在 < audio > 和 < / audio > 之间放置文本内容，放置的文本内容在浏览器版本不支持< audio >的时候显示出来。

< source >多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"  controls></audio> 写法一
<audio controls> 写法二 在source中选择一个可以播放的文件
			<source src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"></source>
			<source src="https://m3.8js.net:99/20200306/62_yongqimianzi.ogg"></source>
			您的浏览器版本过低，请使用谷歌浏览器！------ 文本在浏览器不支持时显示
</audio>



<video src="123456789.mp4" autoplay controls height='500px' width='280px' loop  muted> </video> 写法一
<video controls>写法二 在source中选择一个可以播放的文件
	<source src="123456.mp4"></source>
	<source src="123456.ogg"></source>
	您的浏览器版本过低，请使用谷歌浏览器！------ 文本在浏览器不支持时显示
 </video>

audio可选属性：

可选属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	显示操作控件，如播放按钮
loop	loop	循环播放
muted	muted	静音
preload	preload	页面加载时进行加载（预加载）
src	url	要播放的音频的 URL
autoplay	autoplay	音频在就绪后马上播放

video比audio多了

属性	值	描述
poster	url	URL 视频正在下载时显示的图像，直到用户点击播放按钮
autobuffer	autobuffer	设置为浏览器缓冲方式，不设置autoply才有效
width	Pilex	设置视频的宽度
height	Pilex	设置视频的高度

以audio为例子：

//注意：谷歌需要静音才能自动播放
<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"
 autoplay
 controls
 loop
 muted>	</audio>

video/audio常用属性：

例子：ele.playbackRate

属性	描述
currentSrc	视频地址
duration	视频总时长（秒）
currentTime	视频当前时间（可以设置）秒
volume	当前音量（可以设置）百分比
buffered	当前缓冲量（videoObj.buffered.end(0)）
paused	是否暂停
ended	是否结束
muted	是否静音
playbackRate	视频播放速率（可以设置）

video audio API常用方法：

ele.play()

方法	说明
load()	加载
play()	播放
pause()	暂停

audio video事件API：

<body>
	<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"   controls ></audio>
	<button>二倍速</button>
</body>
<script>
	var ado = document.getElementsByTagName('audio')[0]
	var btn = document.getElementsByTagName('button')[0]
	var falg = false
	btn.onclick = function(){
		//用于触发onratechange事件
		falg ? ado.playbackRate = 1 : ado.playbackRate = 2
		falg ? this.innerHTML = '二倍速' : this.innerHTML = '正常'
		falg = !falg
	}
	
	ado.onloadstart = function() {
		console.log('onloadstart -- 在浏览器开始寻找指定视频/音频（audio/video）触发。')
	}

	ado.ondurationchange= function(){
		console.log('ondurationchange -- 当指定视频/音频（audio/video）的时长数据发生变化时触发')
	}

	ado.onloadedmetadata = function() {
		console.log('onloadedmetadata  -- 事件在指定视频/音频（audio/video）的元数据加载后触发。')
	}

	ado.onloadeddata = function(){
		console.log('onloadeddata  -- 在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发')
	}

	ado.onprogress = function(){
		console.log('事件在浏览器下载(缓冲完毕)指定的视频/音频（audio/video）时触发。')	
	}

	ado.oncanplay = function(){
		console.log('oncanplay -- 可以开始播放时触发')
	}

	ado.oncanplaythrough = function(){
		console.log('oncanplaythrough -- 缓冲完成时触发')
		// e.target.src = '' // 这里这个空的是模拟地址发生故障 触发下面的 onerror  onemptied
	}

	ado.onended = function() {
		console.log('感谢光看')
	}

	ado.onemptied = function(){
		console.log('onemptied -- 发生故障并且文件突然不可用时触发（比如连接意外断开时）。')
	}

	ado.onerror = function(){
		console.log('onerror -- 在文件加载期间发生错误时运行的脚本。')
	}

	ado.onpause = function(){
		console.log('onpause -- 暂停时候触发(如点击暂停)')
	}

	ado.onplay = function(){
		console.log('onplay -- 开始播放时触发(如点击播放)')
	}

	ado.onplaying = function(){
		console.log('onplaying -- 暂停或者在缓冲后准备重新开始播放时触发。')
	}

	ado.onratechange = function(){
		console.log('onratechange -- 播放速度发生改变时触发')
	}

	ado.ontimeupdate = function(){
		console.log('ontimeupdate -- 播放位置改变时触发 (如拖动进度条) 注意：在没暂停的情况下进度条动一下就触发一下' )
	}
	
	ado.onvolumechange = function(){
		console.log('onvolumechange -- 音量发生改动时触发(包括静音)')
	}
</script>

DragonLoveYQ

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
H5 学习笔记（day03)HTML＜audio＞＜video＞

< audio > 标签浏览器支持：浏览器是否支持IEIE 9+Firefox支持Chrome支持Safari支持Opera支持提示：IE8 以及 IE8- 不支持 audio 标签。定义与使用：< audio >定义声音，比如音乐或其他音频流。< audio >支持的格式：mp3、wav、ogg浏览器支持的文件格式：浏览器mp3wavoggIE支持不支持不支
复制链接

扫一扫