H5 学习笔记(day03)HTML<audio> <video>

语言: CN / TW / HK

< 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>
分享到: