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 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的内容就可以了.
主要是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.参考资料,地址和本次实践源代码
参考资料:
本次实践源代码 360云盘访问密码 e898
时间： 2024-10-06 08:13:43