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，让它不显示，但可以提交，方法如下：
<!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;width:100%;height:100%;left:0px;top:0px;background:#fff;opacity:0;filter:alpha(opacity=0)"> </div> </div>
本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动，共创和谐网络环境。
转载请注明：文章转载自：快速开发框架 » HTML 5video 和 Select
本文标题：HTML 5video 和 Select
