HTML 5video 和 Select

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."
    }
 }

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

Select下拉框

让Select不可见，一般都在用display:none, 但这样也带来一个问题，就是这个select不被提交，如果既想让select提交，又不可见，可以用“盖住”select的方法。

很多人说这个需求变态，其实需求原则客户的种种需要，并没有变态一说。

盖住select，让它不显示，但可以提交，方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="position:relative">
<select  onfocus="this.blur();"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
<div style="position:absolute;100%;height:100%;left:0px;top:0px;background:#fff;opacity:0;filter:alpha(opacity=0)"> </div>
</div>
本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动，共创和谐网络环境。
转载请注明：文章转载自：快速开发框架 » HTML 5video 和 Select
本文标题：HTML 5video 和 Select