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

2020-04-25 07:35:49易采站长站整理

事件 描述
abort 播放中止时生成这个事件。
canplay 足够的数据可用并且媒体可以播放时生成这个事件。
ended 播放完成时生成这个事件。
error 发生错误时生成这个事件。
loadeddata 媒体第一帧载入完成时生成这个事件。
loadstart 开始加载媒体时生成这个事件。
pause 播放暂停时生成这个事件。
play 播放开始或者恢复时生成这个事件。
progress 定期通知媒体下载进度时生成这个事件。
ratechange 播放速度改变时生成这个事件。
seeked 快进操作完成时生成这个事件。
seeking 快进操作开始时生成这个事件。
suspend 媒体加载被暂停时生成这个事件。
volumechange 音频音量变化时生成这个事件。
waiting 请求操作(比如播放)被延迟,等待另一个操作完成(比如快进)时生成这个事件。

下面是一个允许播放给定视频的示例:

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

<!DOCTYPE HTML>  
<head>  
<script type="text/javascript">  
function PlayVideo(){   
   var v = document.getElementsByTagName("video")[0];     
   v.play();    
}   
</script>  
</head>  
<html>  
<body>  
   <form>  
   <video  width="300" height="200" src="/html5/foo.mp4">  
       Your browser does not support the <video> element.   
   </video>  
   <input type="button" onclick="PlayVideo();"  value="Play"/>  
   </form>  
</body>  
</html>  

配置服务器媒体类型
大多数服务器默认都没使用正确的 MIME 类型提供 Ogg 或 mp4 媒体,因此我们可能需要添加适当的配置。

复制代码AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4