videojs實踐--兼容ie7,8

時間 2019-11-13

標籤 videojs 實踐兼容 ie7 欄目瀏覽器简体版

原文原文鏈接

1,仍是先上圖

　　ie9+,ff,chrome,,,javascript

　　ie78:css

2.不BB,上代碼!

　　目錄結構:html

　　源代碼:html5

 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 that
39               <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的內容就能夠了.java

　　主要是ie78:(mlgb..wc..!@#$^*&%...) jquery

　　　　a) 若是是ie低版本引入html5.js,若是html5不起做用就引入html5media.min.js,並添加樣式/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{ display:block; }用來支持html5,videojs-ie8.min.js是針對ie8單獨引入的web

　　　　b) video標籤須要有src屬性,並提供mp4格式的視頻chrome

　　　　c) video標籤內部添加object標籤,用以在ie低版本使用flash加載視頻,我寫的是mp4格式的,網上說flv格式的也支持,但我這裏有點問題,暫時還不知道緣由服務器

　　　　d) 好像ie8須要http支持,也就是說須要在服務器上測試,而不能在本地app