󰅡收起

四、HTML Audio/Video

分类: HTML
475 views
属性描述
audioTracks

HTML 5 Audio/Video DOM audioTracks 属性

一、定义和用法

1、audioTracks 属性返回 AudioTrackList 对象。AudioTrackList 对象表示音视频的可用音轨。每个可用的音轨由一个 AudioTrack 对象表示。

2、语法:audio|video.audioTracks

3、任何主流浏览器都不支持 audioTracks 属性。

二、返回值

类型描述
AudioTrackList 对象表示音视频的可用音轨。AudioTrackList 对象的属性/方法:
  • audioTracks.length - 可用音轨的数量
  • audioTracks.getTrackById(id) - 通过 id 来获得 AudioTrack 对象
  • audioTracks[index] - 通过 index 来获得 AudioTrack 对象
AudioTrack 对象表示音轨。AudioTrack 对象的属性:
  • id - 获得音轨的 id
  • kind - 获得音轨的类型(可以是 "alternative", "description", "main", "translation", "commentary", 或者 "" (空字符串))
  • label - 获得音轨的标签
  • language - 获得音轨的语言
  • enabled - 获得或设置音轨是否是活动的 (true|false)

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.audioTracks.length);
		
返回表示可用音轨的 AudioTrackList 对象
autoplay

HTML 5 Audio/Video DOM autoplay 属性

一、定义和用法

1、autoplay 属性设置或返回音视频是否在加载后即开始播放。

2、语法:

  • 设置 autoplay 属性:audio|video.autoplay=true|false
  • 返回 autoplay 属性:audio|video.autoplay

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、属性值

描述
false默认。指示音视频不应在加载后立即播放。
true指示音视频在加载完成后随即播放。

三、示例

	myVid=document.getElementById("videoid");
	myVid.autoplay=true;
	myVid.load();
		
设置或返回是否在加载完成后随即播放音频/视频
buffered

HTML 5 Audio/Video DOM buffered 属性

一、定义和用法

1、buffered 属性返回 TimeRanges 对象。TimeRanges 对象表示用户的音视频缓冲范围。缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放,会得到多个缓冲范围。

2、语法:audio|video.buffered

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
TimeRanges 对象表示音视频的已缓冲部分。TimeRanges 对象属性/方法:
  • length - 获得音视频中已缓冲范围的数量
  • start(index) - 获得某个已缓冲范围的开始位置(首个缓冲范围的下表是 0。)
  • end(index) - 获得某个已缓冲范围的结束位置

三、示例

	myVid=document.getElementById("videoid");
	alert("Start: " + myVid.buffered.start(0)+ " End: " + myVid.buffered.end(0));
		
返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller

HTML 5 Audio/Video DOM controller 属性

一、定义和用法

1、controller 属性返回音视频的当前媒体控制器。默认地,音视频元素不会有媒体控制器。如果规定了媒体控制器,controller 属性将以 MediaController 的形式返回它。

2、语法:audio|video.controller

3、任何主流浏览器都不支持 controller 属性。

二、返回值

类型描述
MediaController 对象表示音视频的媒体控制器。MediaController 对象属性/方法:
  • buffered - 获得音视频的缓冲范围
  • seekable - 或者音视频的可寻址范围
  • duration - 获得音视频的时长
  • currentTime - 获得或设置音视频的当前播放位置
  • paused - 检测音视频是否已暂停
  • play() - 播放音视频
  • pause() - 暂停音视频
  • played - 检测音视频是否已播放过
  • defaultPlaybackRate - 获得或设置音视频的默认播放速率
  • playbackRate - 获得或设置音视频的当前播放速率
  • volume - 获得或设置音视频的音量
  • muted - 获得或设置音视频是否已静音

三、示例

	myVid=document.getElementById("videoid");
	alert("Controller: " + myVid.controller);
		
返回表示音频/视频当前媒体控制器的 MediaController 对象
controls

HTML 5 Audio/Video DOM controls 属性

一、定义和用法

1、controls 属性设置或返回浏览器应当显示标准的音视频控件。标准的音视频控件包括:

  • 播放
  • 暂停
  • 进度条
  • 音量
  • 全屏切换(供视频)
  • 字幕(当可用时)
  • 轨道(当可用时)

2、语法:

  • 设置 controls 属性:audio|video.controls=true|false
  • 返回 controls 属性:audio|video.controls

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、属性值

类型描述
true指示显示控件。
false默认。指示不显示控件。

三、示例

	myVid=document.getElementById("videoid");
	myVid.controls=true;
		
设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc

HTML 5 Audio/Video DOM currentSrc 属性

一、定义和用法

1、currentSrc 属性返回当前音频/视频的 URL。如果未设置音频/视频,则返回空字符串。

2、语法:audio|video.currentSrc

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
字符串表示音频/视频的当前 URL

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.currentSrc);
		
返回当前音频/视频的 URL
currentTime

HTML 5 Audio/Video DOM currentTime 属性

一、定义和用法

1、currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。当设置该属性时,播放会跳跃到指定的位置。

2、语法:

  • 设置 currentTime 属性:audio|video.currentTime="seconds"
  • 返回 currentTime 属性:audio|video.currentTime

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、属性值

描述
seconds数字值,指示音频/视频播放的当前位置(以秒计)。

三、示例

	myVid=document.getElementById("videoid");
	myVid.currentTime=5;
		
设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted

HTML 5 Audio/Video DOM defaultMuted 属性

一、定义和用法

1、defaultMuted 属性设置或返回音频/视频是否默认静音。设置该属性仅会改变默认的静音状态,而不是当前的。要改变当前的静音状态,请使用 muted 属性。

2、语法:

  • 设置 defaultMuted 属性:audio|video.defaultMuted=true|false
  • 返回 defaultMuted 属性:audio|video.defaultMuted

3、只有 Google Chrome 支持 defaultMuted 属性。

二、属性值

描述
true指示音频/视频默认是静音的。
false默认。指示音频/视频默认不是静音的。

三、示例

	myVid=document.getElementById("videoid");
	myVid.defaultMuted=true;
		
设置或返回音频/视频默认是否静音
defaultPlaybackRate

HTML 5 Audio/Video DOM defaultPlaybackRate 属性

一、定义和用法

1、defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度。设置该属性仅会改变默认的播放速度,而不是当前的。要改变当前的播放速度,请使用 playbackRate 属性。

2、语法:

  • 设置 defaultPlaybackRate 属性:audio|video.defaultPlaybackRate=playbackspeed
  • 返回 defaultPlaybackRate 属性:audio|video.defaultPlaybackRate

3、只有 Google Chrome 支持 defaultPlaybackRate 属性。

二、属性值

描述
playbackspeed指示音频/视频的默认播放速度。例值:
  • 1.0 正常速度
  • 0.5 半速(更慢)
  • 2.0 倍速(更快)
  • -1.0 向后,正常速度
  • -0.5 向后,半速

三、示例

	myVid=document.getElementById("videoid");
	myVid.defaultPlaybackRate=0.5;
		
设置或返回音频/视频的默认播放速度
duration

HTML 5 Audio/Video DOM duration 属性

一、定义和用法

1、duration 属性返回当前音频/视频的长度,以秒计。如果未设置音频/视频,则返回 NaN (Not-a-Number)。

2、语法:audio|video.duration

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
数字值表示音频/视频的长度,以秒计。

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.duration);
		
返回当前音频/视频的长度(以秒计)
ended

HTML 5 Audio/Video DOM ended 属性

一、定义和用法

1、ended 属性返回音频/视频是否已结束。如果播放位置位于音频/视频的结尾时,则音频/视频已结束。

2、语法:audio|video.ended

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
布尔值true|false。如果播放已结束,则返回 true。否则返回 false。

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.ended);
		
返回音频/视频的播放是否已结束
error

HTML 5 Audio/Video DOM error 属性

一、定义和用法

1、error 属性返回一个 MediaError 对象。MediaError 对象的 code 属性包含了音频/视频的错误状态。

2、语法:audio|video.error.code

3、只有 Internet Explorer 9 支持 error 属性。

二、返回值

类型描述
数字值MediaError 对象的 code 属性返回一个数字值,它表示音频/视频的错误状态:
  • 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
  • 2 = MEDIA_ERR_NETWORK - 当下载时发生错误
  • 3 = MEDIA_ERR_DECODE - 当解码时发生错误
  • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.error.code);
		
返回表示音频/视频错误状态的 MediaError 对象
loop

HTML 5 Audio/Video DOM loop 属性

一、定义和用法

1、loop 属性设置或返回音频/视频是否应该在结束时再次播放。

2、语法:

  • 设置 loop 属性:audio|video.loop=true|false
  • 返回 loop 属性:audio|video.loop

3、只有 Internet Explorer 9 支持 error 属性。

二、属性值

描述
true指示音频/视频应该在结束时再次播放。
false默认。指示音频/视频不应该在结束时再次播放。

三、示例

	myVid=document.getElementById("videoid");
	myVid.loop=true;
		
设置或返回音频/视频是否应在结束时重新播放
mediaGroup

HTML 5 Audio/Video DOM mediaGroup 属性

一、定义和用法

1、mediaGroup 属性设置或返回音频/视频所属的媒体组合的名称。媒体分组允许两个或更多音频/视频元素保持同步。

2、语法:

  • 设置 mediaGroup 属性:audio|video.mediaGroup ="group"
  • 返回 mediaGroup 属性:audio|video.mediaGroup

3、没有主流浏览器支持 mediaGroup 属性。

二、属性值

描述
group规定音频/视频的媒体分组。

三、示例

为两段视频设置媒体组合:

	myVid1=document.getElementById("video1");
	myVid2=document.getElementById("video2");
	myVid1.mediaGroup="test";
	myVid2.mediaGroup="test";
		
设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted

HTML 5 Audio/Video DOM muted 属性

一、定义和用法

1、muted 属性设置或返回音频/视频是否应该被静音(关闭声音)。

2、语法:

  • 设置 muted 属性:audio|video.muted =true|false
  • 返回 muted 属性:audio|video.muted

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、属性值

描述
true指示应该关闭音频/视频的声音。
false默认。指示应该打开音频/视频的声音。

三、示例

	myVid=document.getElementById("videoid");
	myVid.muted=true;
		
设置或返回音频/视频是否静音
networkState

HTML 5 Audio/Video DOM networkState 属性

一、定义和用法

1、networkState 属性返回音频/视频的当前网络状态(activity)。

2、语法:audio|video.networkState

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
数字值表示音频/视频元素的当前网络状态:
  • 0 = NETWORK_EMPTY - 音频/视频尚未初始化
  • 1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源,但并未使用网络
  • 2 = NETWORK_LOADING - 浏览器正在下载数据
  • 3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.networkState);
		
返回音频/视频的当前网络状态
paused

HTML 5 Audio/Video DOM paused 属性

一、定义和用法

1、paused 属性返回音频/视频是否已暂停。

2、语法:audio|video.paused

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
布尔值true|false。true 指示音频/视频已暂停。否则为 false。

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.paused);
		
返回音频/视频是否暂停
playbackRate

HTML 5 Audio/Video DOM playbackRate 属性

一、定义和用法

1、playbackRate 属性设置或返回音频/视频的当前播放速度。

2、语法:

  • 设置 playbackRate 属性:audio|video.playbackRate =playbackspeed
  • 返回 playbackRate 属性:audio|playbackRate.muted

3、只有 Google Chrome 和 Safari 支持 playbackRate 属性。

二、属性值

描述
playbackspeed指示音频/视频的当前播放速度。例值:
  • 1.0 正常速度
  • 0.5 半速(更慢)
  • 2.0 倍速(更快)
  • -1.0 向后,正常速度
  • -0.5 向后,半速

三、示例

	myVid=document.getElementById("videoid");
	myVid.playbackRate=0.5;
		
设置或返回音频/视频播放的速度
played

HTML 5 Audio/Video DOM played 属性

一、定义和用法

1、played 属性返回 TimeRanges 对象。TimeRanges 对象表示用户已经播放或看到的音频/视频范围。已播范围指的是被播放音频/视频的时间范围。如果用户在音频/视频中跳跃,则会获得多个播放范围。

2、语法:audio|video.played

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
TimeRanges 对象表示音频/视频的已播范围。TimeRanges 对象的属性/方法:
  • length - 获得音视频中已播范围的数量
  • start(index) - 获得已播范围的开始位置(首个缓冲范围的下表是 0。)
  • end(index) - 获得已播范围的结束位置

三、示例

	myVid=document.getElementById("videoid");
	alert("Start: " + myVid.played.start(0) + " End: " + myVid.played.end(0));
		
返回表示音频/视频已播放部分的 TimeRanges 对象
preload

HTML 5 Audio/Video DOM preload 属性

一、定义和用法

1、preload 属性设置或返回是否在页面加载后立即加载音频/视频。

2、语法:

  • 设置 preload 属性:audio|video.preload ="auto|metadata|none"
  • 返回 preload 属性:audio|playbackRate.preload

3、只有 Google Chrome 和 Safari 支持 playbackRate 属性。

二、属性值

描述
auto指示一旦页面加载,则开始加载音频/视频。
metadata指示当页面加载后仅加载音频/视频的元数据。
none指示页面加载后不应加载音频/视频。

三、示例

	myVid=document.getElementById("videoid");
	myVid.preload="auto";
		
设置或返回音频/视频是否应该在页面加载后进行加载
readyState

HTML 5 Audio/Video DOM readyState 属性

一、定义和用法

1、readyState 属性返回音频/视频的当前就绪状态。就绪状态指示音频/视频是否已准备好播放。

2、语法:audio|video.readyState

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
数字值表示音频/视频元素的就绪状态:
  • 0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
  • 1 = HAVE_METADATA - 关于音频/视频就绪的元数据
  • 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
  • 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
  • 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.readyState);
		
返回音频/视频当前的就绪状态
seekable

HTML 5 Audio/Video DOM seekable 属性

一、定义和用法

1、seekable 属性返回 TimeRanges 对象。TimeRanges 对象表示音频/视频中用户可寻址的范围。可寻址范围指的是用户在音频/视频中可寻址(移动播放位置)的时间范围。对于流视频,通常可以寻址到视频中的任何位置,即使其尚未完成缓冲。

2、语法:audio|video.seekable

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
TimeRanges 对象表示音频/视频中的可寻址部分。TimeRanges 对象的属性/方法:
  • length - 获得音视频中可寻址范围的数量
  • start(index) - 获得可寻址范围的开始位置(首个缓冲范围的下表是 0。)
  • end(index) - 获得可寻址范围的结束位置

三、示例

	myVid=document.getElementById("videoid");
	alert("Start: " + myVid.seekable.start(0) + " End: " + myVid.seekable.end(0));
		
返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking

HTML 5 Audio/Video DOM seeking 属性

一、定义和用法

1、seeking 属性返回用户目前是否在音频/视频中寻址。寻址中(Seeking)指的是用户在音频/视频中移动/跳跃到新的位置。

2、语法:audio|video.seeking

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、返回值

类型描述
布尔值rue|false。如果用户正在寻址,则为 true。否则为 false。

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.seeking);
		
返回用户是否正在音频/视频中进行查找
src

HTML 5 Audio/Video DOM src 属性

一、定义和用法

1、src 属性设置或返回音频/视频的当前来源。

2、语法:

  • 设置 src 属性:audio|video.src =URL
  • 返回 src 属性:audio|playbackRate.src

3、所有主流浏览器都支持 src 属性,除了 Internet Explorer。

二、属性值

描述
URL规定音频/视频来源的 URL。

三、示例

	myVid=document.getElementById("videoid");
	myVid.src="movie.ogg";
		
设置或返回音频/视频元素的当前来源
startDate

HTML 5 Audio/Video DOM startDate 属性

一、定义和用法

1、startDate 属性返回 Date 对象,表示音频/视频的当前时间线偏移。startDate 属性用于获得经由因特网的精确的音频/视频流同步。

2、语法:audio|video.startDate

3、所有主流浏览器都不支持 startDate 属性。

二、返回值

类型描述
Date 对象表示当前的时间线偏移。

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.startDate);
		
返回表示当前时间偏移的 Date 对象
textTracks

HTML 5 Audio/Video DOM textTracks 属性

一、定义和用法

1、textTracks 属性返回 TextTrackList 对象。TextTrackList 对象表示音频/视频的可用文本轨道。每条可用的文本轨道是由 TextTrack 对象表示的。

2、语法:audio|video.textTracks

3、所有主流浏览器都不支持 textTracks 属性。

二、返回值

类型描述
TextTrackList 对象表示音频/视频的可用文本轨道。TextioTrackList 对象的属性:
  • length - 获得音频/视频中可用的文本轨道的数量
  • [index] - 根据下标来获得 TextTrack 对象
TextTrack 对象表示一条文本轨道。TextTrack 对象的属性/方法:
  • kind - 获得文本轨道的类型(可以是 "subtitles", "caption", "descriptions", "chapters" 或者 "metadata")
  • label - 获得文本轨道的标签
  • language - 获得文本轨道的语言
  • mode - 获得或设置该轨道是否是活动的 ("disabled"|"hidden"|"showing")
  • cues - 获得 TextTrackCueList 对象的 cues 列表
  • activeCues - 获得 TextTrackCueList 对象形式的当前活动文本轨道 cues
  • addCue(cue) - 向 cues 列表添加一个 cue
  • removeCue(cue) - 从 cues 列表删除一个 cue

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.textTracks.length);
		
返回表示可用文本轨道的 TextTrackList 对象
videoTracks

HTML 5 Audio/Video DOM videoTracks 属性

一、定义和用法

1、videoTracks 属性返回 VideoTrackList 对象。VideoTrackList 对象表示视频的可用视频轨道。VideoTrack 对象表示每一条可用的视频轨道。

2、语法:video.videoTracks

3、所有主流浏览器都不支持 videoTracks 属性。

二、返回值

类型描述
VideoTrackList 对象表示视频的可用视频轨道。VideoTrackList 对象的属性/方法:
  • videoTracks.length - 获得视频中可用视频轨道的数量
  • videoTracks.getTrackById(id) - 通过 id 获得 VideoTrack 对象
  • videoTracks[index] - 通过下标获得 VideoTrack 对象
  • videoTracks.selectedIndex - 获得当前 VideoTrack 对象的下标
VideoTrack 对象表示一条视频轨道。VideoTrack 对象的属性:
  • id - 获得视频轨道的 id
  • kind - 获得视频轨道的类型(可以是 "alternative", "captions", "main", "sign", "subtitles", "commentary", 或 "" (空字符串))
  • label - 获得视频轨道的标签
  • language - 获得视频轨道的语言
  • selected - 获得或设置视频轨道是否是活动的 (true|false)

三、示例

	myVid=document.getElementById("videoid");
	alert(myVid.videoTracks.length);
		
返回表示可用视频轨道的 VideoTrackList 对象
volume

HTML 5 Audio/Video DOM volume 属性

一、定义和用法

1、volume 属性设置或返回音频/视频的当前音量。

2、语法:

  • 设置 volume 属性:audio|video.volume =volumevalue
  • 返回 volume 属性:audio|playbackRate.volume

3、Internet Explorer 8 或更早的浏览器不支持该属性。

二、属性值

描述
volumevalue规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。(1.0 是最高音量(默认),0.0 是静音)

三、示例

	myVid=document.getElementById("videoid");
	myVid.volume=0.2;
		
设置或返回音频/视频的音量
方法描述
addTextTrack()

HTML 5 Audio/Video DOM addTextTrack() 方法

一、定义和用法

1、addTextTrack() 方法创建和返回新的文本轨道。新的 TextTrack 对象会被添加到视频/音频元素的文本轨道列表中。

2、语法:audio|video.addTextTrack(kind,label,language)

3、所有主流浏览器都不支持 addTextTrack() 方法。

二、参数

描述
kind规定文本轨道的类型。可能的值:"subtitles"、"caption"、"descriptions"、"chapters"、"metadata"
label字符串值,为文本轨道规定标签。用于为用户对文本轨道进行标识。
language双字母语言代码,规定文本轨道的语言。如"en"、"zh"等

三、返回值

类型描述
TextTrack 对象表示新的文本轨道。

四、示例

	myVid=document.getElementById("videoid");
	text1=myVid.addTextTrack("caption");
	text1.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));
		
向音频/视频添加新的文本轨道
canPlayType()

HTML 5 Audio/Video DOM canPlayType() 方法

一、定义和用法

1、canPlayType() 方法浏览器是否能播放指定的音频/视频类型。

2、语法:audio|video.canPlayType(type))

3、Internet Explorer 8 以及更早版本不支持该方法。

二、参数

描述
type规定要检测的音频/视频类型。常用值:
  • video/ogg
  • video/mp4
  • video/webm
  • audio/mpeg
  • audio/ogg
  • audio/mp4

常用值,包括编解码器(如果包含编解码器,则只能返回 "probably"):

  • video/ogg; codecs="theora, vorbis"
  • video/mp4; codecs="avc1.4D401E, mp4a.40.2"
  • video/webm; codecs="vp8.0, vorbis"
  • audio/ogg; codecs="vorbis"
  • audio/mp4; codecs="mp4a.40.5"

三、返回值

类型描述
String表示支持的级别。可能的值:
  • "probably" - 最有可能支持
  • "maybe" - 可能支持
  • "" - (空字符串)不支持

四、示例

	myVid=document.getElementById("videoid");
	isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"');
		
检测浏览器是否能播放指定的音频/视频类型
load()

HTML 5 Audio/Video DOM load() 方法

一、定义和用法

1、load() 方法重新加载音频/视频元素。load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。

2、语法:audio|video.load()

3、所有主流浏览器都支持 load() 方法,除了 Safari。(Internet Explorer 8 以及更早版本不支持该方法。)

二、示例

<video id="video1" controls="controls" autoplay="autoplay">
  <source id="mp4_src" src="/example/html5/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<script> 
	myVid=document.getElementById("videoid");
	document.getElementById("mp4_src").src="movie.mp4";
	myVid.load();
</script>
		
重新加载音频/视频元素
play()
pause()

HTML 5 Audio/Video DOM play() 方法

一、定义和用法

1、play() 方法开始播放当前的音频或视频。pause() 方法停止(暂停)当前播放的音频或视频。

2、语法:audio|video.play() 或 audio|video.pause()

3、所有主流浏览器都支持 play() 和 pause() 方法。Internet Explorer 8 以及更早版本不支持该方法。

二、示例

	myVid=document.getElementById("videoid");
	myVid.play();
	myVid.pause();
 
		
开始播放音频/视频
暂停当前播放的音频/视频
事件描述
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

HTML 5 Audio/Video DOM 加载过程中的事件

1、当音频/视频处于加载过程中时,会依次发生以下事件:

  • loadstart
  • durationchange
  • loadedmetadata
  • loadeddata
  • progress
  • canplay
  • canplaythrough

2、语法(以loadstart事件为例):

  • 在 HTML 中:<audio|video onloadstart="SomeJavaScriptCode">
  • 在 JavaScript 中:audio|video.onloadstart=SomeJavaScriptCode;
  • 使用 addEventListener()来监听:
    	audio|video.addEventListener("canplaythrough", function(){
    	    //SomeJavaScriptCode
    	});
    			

3、Internet Explorer 8 或更早的浏览器不支持这些事件。

当浏览器开始查找音频/视频时 当音频/视频的时长已更改时 当浏览器已加载音频/视频的元数据时 当浏览器已加载音频/视频的当前帧时 当浏览器正在下载音频/视频时 当浏览器可以播放音频/视频时 当浏览器可在不因缓冲而停顿的情况下进行播放时
abort 当音频/视频的加载已放弃时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止
󰁠

本文出自 qi9951 ,转载时请注明出处及相应链接。

本文永久链接: http://qi9951.com/wordpress/htmlaudio_video/