HTML5多媒体功能之video标签

最新推荐文章于 2024-01-25 17:24:28 发布

最新推荐文章于 2024-01-25 17:24:28 发布 · 362 阅读

文章标签：

#HTML #HTML5

HTML5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍HTML5页面中如何嵌入视频，包括使用<video>标签的基本语法，检测浏览器是否支持该标签的方法，以及视频标签的重要属性与DOM接口。详细解释了如何通过canPlayType()方法检测浏览器的视频播放能力，并提供了两种实现方式：直接使用src属性与嵌套<source>标签。同时，文章深入探讨了关键属性如autoplay、controls、height、loop和preload的作用，以及HTMLVideoElement接口的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.)

参考资料：