使用HTML5在网页中嵌入音频和视频播放的基本方法

2020-04-25 07:35:49易采站长站整理
poster 这是一个图像 URL,显示到用户播放或快进。 src 要嵌入的视频 URL。可选,可以在 video 块中使用 <source> 元素替代来指定要嵌入的视频。 width 这个属性以 CSS 像素的形式指定视频显示区域的宽度。

嵌入音频
HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

XML/HTML Code复制内容到剪贴板

<audio src="foo.wav" controls autoplay>  
    Your browser does not support the <audio> element.      
</audio>  

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
<body>  
   <audio controls autoplay>  
       <source src="/html5/audio.ogg" type="audio/ogg" />  
       <source src="/html5/audio.wav" type="audio/wav" />  
       Your browser does not support the <audio> element.   
   </audio>  
</body>  
</html>  

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

属性 描述
autoplay 如果指定这个布尔值属性,只要没停止加载数据,音频就会立刻自动开始播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,音频也会自动开始缓冲。
controls 如果指定这个属性,表示允许用户控制音频播放,包括音量控制,快进以及暂停/恢复播放。
loop 如果指定这个布尔值属性,表示允许音频播放结束后自动回放。
preload 这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。
src 要嵌入的音频 URL。可选,可以在音频块里面使用 <source> 元素指定要嵌入的音频来替代。

处理媒体事件
HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能: