video、audio的属性和方法（笔记）

内容介绍

  H5 引入了audio和video标签在页面中嵌入音频和视频，不用再使用Flash等插件播放媒体文件，下面了解一下audio和video的一些属性和方法。

一、video 视频

1、video 属性

属性说明	代码
禁止下载	controlslist=“nodownload”
禁止全屏	controlslist=“nodownload nofullscreen”（controlslist可多选）
自动播放	autoplay
默认静音	muted
循环播放	loop
预加载	preload
贴图	poster=“poster.jpg”
音量控制	var video = document.getElementById('_volume'); video.volume = 0; (取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）)
播放时间控制	var vedio = document.getElementById('_time'); vedio.currentTime=600 视频当前正在播放的时间（单位：s），进度条拖动显示的时间值
播放地址切换	var vedio = document.getElementById('_src'); setTimeout(() => {vedio.src='http://vue.hyfarsight.com/webpack%E4%B8%80.mp4'}, 6000);

2、video 事件

事件名	说明
loadstart	视频查找，当浏览器开始加载资源时触发
durationonchange	时长变化，当指定资源时长发生变化时触发 => NAN变为实际时长； var vedio = document.getElementById('_time'); console.log(vedio.duration); vedio.addEventListener('durationchange',function(e){console.log(vedio.duration); })
loadedmetadata	元数据加载，当指定资源的元数据已加载时触发，元数据包括时长/尺寸/文本轨道等信息值
loadeddata	视频下载监听，当当前帧的数据已加载，但没有足够的数据来播放指定资源的下一帧时触发
progress	浏览器下载监听，当浏览器正在下载指定资源时触发
canplay	浏览器下载监听，当浏览器正在下载指定资源时触发
canplaythrough	可流畅播放，当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定资源时触发
play	播放监听
pause	暂停监听
seeking	查找开始，当用户开始移动、跳跃到资源中新的位置时触发
seeked	查找结束，当用户已经移动、跳跃到视频中新的位置时触发
waiting	视频加载等待，当视频由于需要缓冲下一帧而停止，等待时触发
playing	当视频在已经因缓冲而暂停或停止后已就绪时触发
timeUpdate	目前的播放位置已更改时，播放时间更新
ended	播放结束
error	播放错误
volumechange	音量改变时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
ratechange	当视频的播放速度已更改时

3、video css控制按钮

	/* 全屏按钮 */
	
	video::-webkit-media-controls-fullscreen-button {
	    display: none;
	}
	/* 播放按钮 */
	
	video::-webkit-media-controls-play-button {
	    display: none;
	}
	/* 进度条 */
	
	video::-webkit-media-controls-timeline {
	    display: none;
	}
	/* 观看的当前时间 */
	
	video::-webkit-media-controls-current-time-display {
	    display: none;
	}
	/* 剩余时间 */
	
	video::-webkit-media-controls-time-remaining-display {
	    display: none;
	}
	/* 音量按钮 */
	
	video::-webkit-media-controls-mute-button {
	    display: none;
	}
	
	video::-webkit-media-controls-toggle-closed-captions-button {
	    display: none;
	}
	/* 音量的控制条 */
	
	video::-webkit-media-controls-volume-slider {
	    display: none;
	}
	/* 所有控件 */
	
	video::-webkit-media-controls-enclosure {
	    display: none;
	}

二、audio 音频

1、audio 属性

属性	说明
src	播放资源的url地址
preload	预加载
loop	循环播放-当前播放结束后重新播放
controls	是否显示控件
autoplay	自动播放
duration	媒体总时长，无法获取时返回NAN
paused	媒体被暂停，返回true，否则返回false
ended	媒体文件播放完毕
muted	用来获取是否为静音状态，值为bool
volume	控制音量大小，0–1
startTime	返回起始的播放时间
error	返回错误代码
currentTime	用来获取或者控制当前的播放时间，单位为秒（s）
currentSrc	以字符串形式返回正在播放或者已经加载的文件

2、audio 事件

事件名	说明
load()	加载资源
play()	播放
pause()	暂停播放
canPlayType()	测试是否支持特定类型文件
loadstart	客户端开始请求数据
progress	客户端正在请求数据，缓冲
play	播放
pause	暂停
ended	结束
timeupdate	当前播放时间发生改变的时候
canplaythrough	资源已经载入完成
canplay	缓冲至目前的可播放状态

---

标签：JavaScript，HTML5，video，audio，media

---

更多演示案例，查看 案例演示

---

欢迎评论留言!