從網上找到很多這個videojs兼容ie8的解決方案,一個一個的試,最后發現沒有一個是靠譜的。我好無奈啊……
先看圖(ie上訪問必須是線上地址)
看代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video兼容</title> <!--<link href="css/video-js.css" rel="stylesheet">--> <link rel="stylesheet" href="http://vjs.zencdn.net/5.8.8/video-js.css" /> <script src="js/jquery-2.1.3.min.js"></script> <!-- If you'd like to support IE8 --> <script src="js/videojs/videojs-ie8.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="js/videojs/html5.js"></script> <![endif]--> <script src="js/videojs/video.js"></script> <style type="text/css"> /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{ display:block; } .videos_container{ width:650px; } </style> </head> <body> <section class="videos_container"> <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls preload="auto" width="640" height="264" poster="img/confident.jpg" data-setup="{}"> <source src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4' type='video/mp4'></source> <source src='videos/popin.webm' type='video/webm'></source> <!-- <source src='videos/popin.ogg' type='video/ogg'></source> --> <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="js/videojs/flowplayer.swf"> <param name="movie" value="js/videojs/flowplayer.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["img/confident.jpg", {"url": "http://www.w3school.com.cn/example/html5/mov_bbb.mp4","autoPlay":false,"autoBuffering":true}]}' /> <img src="img/confident.jpg" width="280" height="210" alt="Poster Image" title="No video playback capabilities." /> </object> </video> </section> <script type="text/javascript"> $(function(){ videojs.options.flash.swf = "js/videojs/video-js.swf"; }); </script> </body> </body> </html>
css本地樣式文件在ie8上顯示不正常,找了一個線上地址,顯示正常了;
視頻地址本地的視頻加載出錯,也是找了個線上地址放過去就好了,我不知道是因為啥原因。
參考鏈接:http://www.cnblogs.com/PheonixHkbxoic/p/5941543.html
所有代碼文件地址:https://pan.baidu.com/s/1c19NcCo