HTML5多媒体功能之video标签

WCschool官方

2015-03-03

HTML5的多媒体功能之一：video

1.HTML5页面中如何嵌入视频？

使用<video>标签。

2.如何检测当前浏览器是否支持`<video>`标签？

function checkVideo() {
    if (!!document.createElement('video').canPlayType) { //canPlayType() 方法浏览器是否能播放指定的音频/视频类型。
        var vidTest = document.createElement("video");
        oggTest = vidTest.canPlayType('video/ogg; codecs="tdeora, vorbis"');
        if (!oggTest) {
            h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
            if (!h264Test) {
                document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support."
            } else {
                if (h264Test == "probably") { //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."
    }
 }

理解上述代码需要的知识：

HTML 5 Audio/Video DOM canPlayType() 方法

3.如何使用`<video>`标签？

两种方法：

第一种：<video>标签带src属性：

<video src="movie.ogg" widtd="320" height="240" controls="controls">
Your browser does not support tde video tag.
</video>

第二种：<video>标签不带src属性，嵌套<source>标签：

<video widtd="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support tde video tag.
</video>

4.`<video>`标签比较重要的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	auto/meta/none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

5.video的DOM接口

HTMLVideoElement

HTMLVideoElement的继承链：

HTMLVideoElement的五个属性：

HTMLVideoElement.height
HTMLVideoElement.videoHeight（只读）
HTMLVideoElement.width
HTMLVideoElement.videoWidth（只读）
HTMLVideoElement.poster (Is a DOMString that reflects the poster HTML attribute, which specifies an image to show while no video data is available.)

参考资料：

html5 video