標籤：
1,還是先ie9+,ff,chrome,,,
ie78:
2.不BB,上代碼!
目錄結構:
原始碼:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Spring 3.x MVC HTML5 VIDEO</title> 6 <link href="js/videojs/video-js.css" rel="stylesheet"> 7 <script src="js/jquery-2.1.0.min.js"></script> 8 <!-- If you‘d like to support IE8 --> 9 <script src="js/videojs/videojs-ie8.min.js"></script>10 <!--[if lt IE 9]> 11 <script type="text/javascript" src="js/html5.js"></script>12 <![endif]-->13 <style type="text/css">14 /*html5*/15 article,aside,dialog,footer,header,section,footer,nav,figure,menu{16 display:block;17 }18 .videos_container{19 width:650px;20 }21 </style>22 </head>23 24 <body>25 <section class="videos_container">26 <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" src="videos/popin.mp4" controls preload="auto" width="640" height="264" poster="images/confident.jpg" data-setup="{}">27 <source src=‘videos/popin.mp4‘ type=‘video/mp4‘></source>28 <source src=‘videos/popin.webm‘ type=‘video/webm‘></source>29 <!-- <source src=‘videos/popin.ogg‘ type=‘video/ogg‘></source> -->30 <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="js/videojs/flowplayer.swf"> 31 <param name="movie" value="js/videojs/flowplayer.swf" /> 32 <param name="allowfullscreen" value="true" /> 33 <param name="flashvars" value=‘config={"playlist":["images/confident.jpg", {"url": "videos/popin.mp4","autoPlay":false,"autoBuffering":true}]}‘ /> 34 <img src="images/confident.jpg" width="280" height="210" alt="Poster Image" title="No video playback capabilities." /> 35 </object> 36 <!-- 如果有了object 來相容ie6,7,8;那麼就不需要下面的了37 <p class="vjs-no-js">38 To view this video please enable JavaScript, and consider upgrading to a web browser that39 <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>40 </p>41 -->42 </video>43 </section>44 <script src="js/videojs/video.js"></script>45 <script type="text/javascript">46 $(function(){47 videojs.options.flash.swf = "js/video-js.swf";48 });49 </script>50 </body>51 </body>52 </html>
3.注意事項
其他的沒啥問題,直接引入video的css,js,直接寫video的內容就可以了.
主要是ie78:(mlgb..wc..!@#$^*&%...)
a) 如果是ie低版本引入html5.js,並添加樣式/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{ display:block; }用來支援html5,videojs-ie8.min.js是針對ie8單獨引入的
b) video標籤 需要有src屬性,並提供mp4格式的視頻
c) video標籤內部 添加object標籤,用以在ie低版本使用flash載入視頻,我寫的是mp4格式的,網上說flv格式的也支援,但我這裡有點問題,暫時還不知道原因
d) 好像ie8需要http支援,也就是說需要在伺服器上測試,而不能在本地
4.參考資料,地址和本次實踐原始碼
參考資料:
videojs官網
清楓草塘
本次實踐原始碼 360雲端硬碟訪問密碼 e898
videojs實踐--相容ie7,8
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
