HTML5视频方案：支持iPad Safari、Firefox、Chrome、IE9876
HTML网页视频点播方案
想在网页中播放视频？
以前浏览器不能直接播放视频，所以需要用插件，比如wmp、real player、flash。而wmp、real player不能跨平台、跨浏览器，flash有时候会导致浏览器卡、崩溃。
现在浏览器集成了播放器，不再需要插件了，直接能放视频，提高了性能、稳定性、跨平台兼容性。在HTML 4、XHTML 1、HTML5的页面中都能播放。
浏览器能播放哪种格式的视频？各个浏览器不同，有专利格式的，有开源格式的。
具体支持情况如下：
专利格式mp4：Safari（iPad、Windows、Mac OS）、Chrome、IE9
开源格式webm：Firefox、Chrome、Opera
开源格式ogg：Firefox、Chrome、Opera
如何让视频在所有浏览器上都能播放？如何支持iPad和IE876？请看下文。
商业方案：mp4->flash放mp4
视频文件格式：mp4
支持：Safari（iPad、Windows、Mac OS）、Firefox、Chrome、IE9876、Opera
原理：检测浏览器是否支持播放mp4，不判断浏览器名称，只检测功能。
结果：在Safari（iPad、Windows、Mac OS）、Chrome、IE9中原生播放mp4，在Firefox、Opera、IE876中使用flash播放器播放mp4。
优点：1个mp4文件，支持所有主流浏览器
缺点：mp4是专利格式，需考虑编码器授权
前公司演示：http://www.happyelements.cn/
代码打包下载：https://files.cnblogs.com/sink_cup/html_video.7z
请注意flow player是GPL授权的（http://flowplayer.org/download/index.html），如果有闭源的需要，请购买flow player或者自己编译一个flex播放器，比较简单。
代码（采用公共领域授权，可任意使用）：
<!DOCTYPE html> <html lang="zh-cmn-Hans-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>html5 video</title> </head> <body> <h2>2010 Ruse 360p</h2> <div><!--每个video都需要有一个单独的parentNode，即每个video外面都有个div或者p等等。为了兼容IE876--> <video controls="controls" width="640" height="352" poster="http://movie.doubanxia.com/files/2010_ruse_trailer_360p.jpg" autoplay="autoplay"> <source src="http://movie.doubanxia.com/files/2010_ruse_trailer_360p.mp4" type="video/mp4" /> </video> </div> <h2>2010 Inception 720p</h2> <div> <video controls="controls" width="1280" height="532" poster="http://movie.doubanxia.com/files/2010_inception_trailer_720p.jpg"> <source src="http://movie.doubanxia.com/files/2010_inception_trailer_720p.mp4" type="video/mp4" /> </video> </div> <script type="text/javascript"> var config = { "video":{ "type":"video/mp4" }, "flash": { "player_uri":"http://movie.doubanxia.com/files/flowplayer-3.2.7.swf", "need_version":"10,0,0,0", "autoBuffering":true, "html_when_no_flash":"<a target=\"_blank\" href=\"http://www.adobe.com/go/getflash\"><img height=\"39\" width=\"158\" src=\"http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png\" alt=\"Get Adobe Flash player\" /></a>" } }; function checkFlashVersion() { var flash_html = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=need_version" width="0" height="0" data="player_uri"><param name="src" value="player_uri" /></object>'; flash_html = flash_html.replace(/player_uri/g,config.flash.player_uri); flash_html = flash_html.replace(/need_version/g,config.flash.need_version); var div_element = document.createElement('div'); div_element.style.width = '0'; div_element.style.height = '0'; div_element.innerHTML = flash_html; document.body.appendChild(div_element); } function isVideoCanPlay(video_type) { var video_element = document.createElement('video'); if(typeof(video_element.canPlayType)=='undefined') { return false; } var result = video_element.canPlayType(video_type); if((result=='probably')||(result=='maybe')) { return true; } return false; } function addFlashVideoPlayer() { var source_nodes = document.getElementsByTagName('source'); for(var i=0,l=source_nodes.length; i<l;i++) { if(source_nodes[i].type.indexOf(config.video.type)!=-1) { if(source_nodes[i].parentNode.tagName.toLowerCase()=='video')//Firefox,Chrome,IE9 { var video_element = source_nodes[i].parentNode; var video_element_container = video_element.parentNode; var autoplay = video_element.autoplay; } else {//IE876 var div_element = source_nodes[i].parentNode; var video_element = div_element.getElementsByTagName('video')[0]; var video_element_container = div_element; var autoplay = typeof(video_element.autoplay)=='undefined' ? false : true; } var params = { "flashvars":"config={\"playerId\":\"player\",\"clip\":{\"url\":\"video_file_url\"},\"playlist\":[\"poster_file_url\",{\"url\":\"video_file_url\",\"scaling\":\"fit\",\"autoPlay\":autoPlay_value,\"autoBuffering\":autoBuffering_value}]}", "src":config.flash.player_uri }; params.flashvars = params.flashvars.replace(/video_file_url/g,source_nodes[i].src); params.flashvars = params.flashvars.replace(/poster_file_url/g,video_element.poster); params.flashvars = params.flashvars.replace(/autoPlay_value/g,autoplay); params.flashvars = params.flashvars.replace(/autoBuffering_value/g,config.flash.autoBuffering); var width = video_element.width; var height = video_element.height; var attributes = { "data":config.flash.player_uri, "width":width, "height":height }; var flash_html = createFlashObjectHTML(attributes,params); var div_element = document.createElement('div'); div_element.style.width = width; div_element.style.height = height; div_element.innerHTML = flash_html; video_element_container.insertBefore(div_element,video_element); video_element.style.display = "none"; } } } function createFlashObjectHTML(attributes,params) { var flash_html = '<object height="attribute_height" width="attribute_width" type="application/x-shockwave-flash" data="attribute_data"><param name="flashvars" value="param_flashvars" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="quality" value="high" /><param name="cachebusting" value="false" /><param name="bgcolor" value="#000000" /><param name="src" value="param_src" />html_when_no_flash</object>'; flash_html = flash_html.replace(/attribute_height/g,attributes.height); flash_html = flash_html.replace(/attribute_width/g,attributes.width); flash_html = flash_html.replace(/attribute_data/g,attributes.data); flash_html = flash_html.replace(/param_flashvars/g,params.flashvars); flash_html = flash_html.replace(/param_src/g,params.src); flash_html = flash_html.replace(/html_when_no_flash/g,config.flash.html_when_no_flash); return flash_html; } if(isVideoCanPlay(config.video.type)==false) { checkFlashVersion(); addFlashVideoPlayer(); } </script> </body> </html>
截图与拍照如下：
开源方案：webm->flash放webm
视频文件格式：webm
支持：Safari（Windows、Mac OS）、Firefox、Chrome、IE9876、Opera
不支持：Safari（iPad）
原理：在Firefox、Chrome、Opera中原生播放webm，在Safari（Windows、Mac OS）、IE9876中使用flash播放器播放webm。
优点：webm是开源格式，1个webm即可支持主流浏览器。
缺点：不支持Safari（iPad），因为Safari（iPad）不支持flash。
依赖于adobe flash player支持webm，adobe在2010年5月宣称flash player将支持webm（http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html），截至2011年4月21日还没有结果。
