HTML5 video 用法
HTML5
HTML5
HTML5
下面列出了大多数浏览器支持的视频方法、属性和事件：
方法
属性
事件
play()
currentSrc
play
pause()
currentTime
pause
load()
videoWidth
progress
canPlayType
videoHeight
error
duration
timeupdate
ended
ended
error
abort
paused
empty
muted
emptied
seeking
waiting
volume
loadedmetadata
height
width
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
视频格式
当前，video 元素支持三种视频格式：
格式
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
No
MPEG 4
9.0+
No
No
5.0+
3.0+
WebM
No
4.0+
10.6+
6.0+
No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
HTML 5 Audio/Video DOM canPlayType() 方法
实例
检测您的浏览器是否能播放不同类型的视频：
myVid=document.createElement(‘video’);
isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"');
定义和用法
canPlayType() 方法浏览器是否能播放指定的音频/视频类型。 canPlayType() 方法可返回下列值之一：
- “probably” - 浏览器最可能支持该音频/视频类型
- “maybe” - 浏览器也许支持该音频/视频类型
- “” - （空字符串）浏览器不支持该音频/视频类型
浏览器支持
所有浏览器都支持 canPlayType() 方法。
注释：Internet Explorer 8 以及更早版本不支持该方法。
语法
audiovideo.canPlayType(type))
参数
值
描述
type
规定要检测的音频/视频类型。常用值：
- video/ogg
- video/mp4
- video/webm
- audio/mpeg
- audio/ogg
- audio/mp4
常用值，包括编解码器：
- 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”
注释：如果包含编解码器，则只能返回 “probably”。
返回值
类型
描述
String
表示支持的级别。可能的值：
- “probably” - 最有可能支持
- “maybe” - 可能支持
- “” - （空字符串）不支持
//检测方法
function checkVideo(){
if(!!document.createElement(‘video’).canPlayType){
var vidTest=document.createElement(“video”);
var test={
vogg:’video/ogg; codecs=”theora, vorbis”‘,
vmp4:’video/mp4; codecs=”avc1.4D401E, mp4a.40.2”‘,
vwebm:’video/webm; codecs=”vp8.0, vorbis”‘,
aogg:’audio/ogg; codecs=”vorbis”‘,
amp4:’audio/mp4; codecs=”mp4a.40.5”‘
}
oggTest=vidTest.canPlayType(test.vogg);
if (!oggTest){
h264Test=vidTest.canPlayType(test.vmp4);
if (!h264Test){
document.getElementById(“checkVideoResult”).innerHTML=”Sorry. No video support.”
}else{
if (h264Test==”probably”){
document.getElementById(“checkVideoResult”).innerHTML=”Yes! Full support!”;
}else{
document.getElementById(“checkVideoResult”).innerHTML=”Well. Some support.”;
}
}
}else{
if (oggTest==”probably”){
document.getElementById(“checkVideoResult”).innerHTML=”Yes! Full support!”;
}else{
document.getElementById(“checkVideoResult”).innerHTML=”Well. Some support.”;
}
}
}else{
document.getElementById(“checkVideoResult”).innerHTML=”Sorry. No video support.”
}
}