HTML 5 <audio> 标签

定义和用法

<audio> 标签定义声音，比如音乐或其他音频流。

属性	值	描述
	autoplay	如果出现该属性，则音频在就绪后马上播放。
	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
	loop	如果出现该属性，则每当音频结束时重新开始播放。
	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
	url	要播放的音频的 URL。

带有浏览器默认控件的 audio 元素：

<video> 标签定义视频，比如电影片段或其他视频流。

属性	值	描述
	autoplay	如果出现该属性，则视频在就绪后马上播放。
	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
	pixels	设置视频播放器的高度。
	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
	url	要播放的视频的 URL。
	pixels	设置视频播放器的宽度。

一段简单的 HTML5 视频：

timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。

该事件可以在以下情况被调用:

提示： timeupdate 事件通常与 Audio/Video 对象的属性一起使用，该属性返回音频/视频（audio/video）的播放位置（以秒计）。

HTML 中：

     < 
audio|video οntimeupdate=" 
myScript"> 

JavaScript 中：

audio|video.οntimeupdate=function(){ 
myScript}; 

JavaScript 中, 使用 addEventListener() 方法:

audio|video.addEventListener("timeupdate",  
myScript); 

注意： Internet Explorer 8 及更早 IE 版本不支持方法。

当视频播放位置已经改变，显示视频当前播放位置（一秒计）:

该实例中，我们使用了 HTML DOM 为 video 元素添加 "ontimeupdate" 事件。在用户开始播放视频，或者移动视频的播放位置时触发函数，并显示视频的播放位置。

播放位置:

play() 方法开始播放当前的音频或视频。

pause() 方法停止（暂停）当前播放的音频或视频。

带有播放和暂停按钮的一段视频：

转自菜鸟教程

你可能感兴趣的文章