HTML5爱学习爱记笔记的第一篇- video的学习
直到现在，仍然没有一项可以让网页上显示视频的标准。大多数的视频都是通过插件（如Flash）来实现播放的，但是并不是所有的浏览器拥有同样的插件。而伟大的HTML5规定了一个元素<video>来实现这种功能。<video>支持Ogg、MPEG4、WebM三種视频格式。我们可以通过下图来看下各种浏览器对这三种格式的支持情况。
这个属性使用起来很简单，就跟平时我们写其他标签一样。 <video src="movie.ogg"></胜利ideo> 这个是最基本的写法了。但是想IE这种傻X浏览器不支持怎么办，不急我们可以在开始标签和结束标签之间放置文本内容，这样不支持该标签的浏览器就可以显示出不支持该标签的信息。 <video src="somevideo.wmv">您的浏览器不支持 video 标签。</胜利ideo> 有的时候我们不知道该浏览器是否支持这个格式的时候怎么办呢，不要急，video支持多个source元素，我们可以写多个不用的链接文件，浏览器将识别第一个可识别链接。 <video width="320" height="240"> <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg"> <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4"> 你的浏览器不支持video标签。 </胜利ideo> 下个我们来看下video的各种属性：
<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop"> <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4" /> 你的浏览器不支持video标签。 </胜利ideo> 下面我们来看下controls 属性：controls 属性规定浏览器应该为视频提供播放控件。如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件应该包括： 播放 暂停 定位 音量 全屏切换 字幕（如果可用） 音轨（如果可用） 在上面例子中我们没有用到preload 属性，下面我们来了解下为什么没有用。首先preload 属性规定是否在页面加载后载入视频，它有三个值来控制他的功能：auto、meta、none。 auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 下面的纯属扯淡了。。。在学习的时候发现的一个功能，顺便记录下面。这个JS主要是用来检测浏览器是否支持HTML5中的video标签。 <script type="text/javascript"> function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, 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") { 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." } } </script> 然后在页面里面添加如下代码，样式自己定义： <div id="checkVideoResult"> <button onclick="checkVideo()">Check</NOtton> </div>
