`
MirrorAvatar
  • 浏览: 46164 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5多媒体功能之video标签

阅读更多

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的继承链:

chain

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

参考资料:

  1. HTML video:MDN
  2. HTMLVideoElement:MDN
0
0
分享到:
评论

相关推荐

    HTML5基础知识-HTML5多媒体标签.pptx

    单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式,文件后缀名.wav。2、MP3 MP3是一...

    基于vue框架,利用html5的audio标签实现音频播放,利用html5的video标签实现视频播放.zip

    html5开发

    三天学会HTML5——多媒体元素的使用

    使用Google地图获取位置信息多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频触手可及,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object标签,调用第三方软件来加载,如...

    js HTML5多媒体影音播放

    画布canvas如何与视频video标签结合,达到制作各种视频功能的效果呢?其秘诀在于通过画布重新描绘一次视频的内容,将视频的每个画面都转换成画布的图像,这样就可以通过javascript语言所提供的图像控制方法来操控...

    10个最常见的HTML5面试题 附答案

    本文为大家分享了最常见的10个HTML5面试题,希望大家喜欢。 问题1、新的 HTML5 文档类型和字符集是? 答:HTML5 文档类型很简单: HTML5 使用...答:HTML5 对于多媒体提供了强有力的支持,除了 audio 和 video 标签外

    使用HTML开发商业网站-音频嵌入技术课件.pptx

    运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件,如果想要这些文件在页面中加载播放,还需要设置正确的多媒体格式。 视频音频嵌入技术概述 很多浏览器已经实现了对HTML5中video和audio元素的支持 ...

    HTML 视频(Video)

    HTML 视频(Video) 在 HTML 中播放视频的方法有很多种。 HTML视频(Videos)播放 ...标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 代码显示嵌入网页的 Flash 视频: 实例   问题 HT

    HTML5 通过Vedio标签实现视频循环播放的示例代码

    标签的作用是在 HTML页面中嵌入多媒体元素 &lt;embed src="1.swf"width="400"&gt; &lt;object&gt; 标签的作用是在 HTML页面中嵌入多媒体元素 &lt;object data="1.swf"width="400"&gt;&lt;/object&gt; 存在的问题: ...

    使用HTML5在网页中嵌入音频和视频播放的基本方法

    HTML5 特性,包括原生音频和视频支持而无需 Flash。 HTML5 &lt;audio&gt; 和 &lt;video&gt; 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停...

    HTML5 新元素

    为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。 ...

    浅谈HTML5新增及移除的元素

    为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、网络工作等新元素。 图形绘制新元素 标签 描述 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的...

    计算机应用技术(实用手册)

    如同系统BIOS的快取功能,启用影像BIOS的快取功能将允许存取影像BIOS自C0000H到C7FFFH具有快取功能,如果快取控制器也被启用。高速缓存的大小愈大,影像效能将会更快速。 Memory Hole At 15M-16M(扩展卡内存分配...

Global site tag (gtag.js) - Google Analytics