HTML5多媒体API的方法

课后整理 2020-12-7

audio和video元素拥有相同的脚本方法,下面简单介绍这些方法。

canPlayType()方法

用于返回一个字符串以表明客户端是否能够播放指定的媒体类型,其用法如下。

var canPlay = media.canPlayType(type)

其中media指页面中的audio或video元素,参数type为客户端浏览器能够播放的媒体类型。该方法返回以下可能值之一。

load()方法

用于重置媒体元素并重新载入媒体,不返回任何值,该方法可中止任何正在进行的任务或事件。元素的playbackRate属性值会被强行设为defaultPlaybackRate属性的值,而且元素的error值会被强行设置为null。

【示例】在下面示例中,通过单击按钮可以重新载入另一个新的视频。

<video controls>
    <source src="medias/video.ogv"  type='video/ogg'>
    <source src="medias/video.mp4"  type='video/mp4'>
    您的浏览器不支持视频播放。
</video>
<input  type="button" value="载入新的视频"   onclick="loadNewVideo()">
<script>
function loadNewVideo()  {
    var video =  document.getElementsByTagName('video')[0];
    var sources =  video.getElementsByTagName('source');
    sources[0].src = 'medias/video2.ogv';
    sources[1].src = 'medias/video2.mp4';
    video.load(); //用load方法载入新的视频。
}
</script>

pause()方法

用于暂停媒体的播放,并将元素的paused属性的值强行设置为true。

play()方法

用于播放媒体,并将元素的paused属性的值强行设置为false。