• videojs兼容ie8


    从网上找到很多这个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

  • 相关阅读:
    webpack3-loader和plugin的概念理解
    即将发布的ionic4有哪些激动人心的新特性
    使用腾讯tslint-config-alloy轻松搞定ionic项目中TSLint配置
    ionic2+ 中强制使安卓用ios样式的方法
    最新动态: 开源项目 ionic3-awesome — 实现fullScreenVideo
    c#开发windows 服务
    搭建NHibernate3.2+CodeFirst映射框架
    WCF
    MVC全局异常处理
    两只技术小白把初创电商卖了百万美元,现在他们决定把秘诀告诉你
  • 原文地址:https://www.cnblogs.com/wj19940520/p/7088305.html
Copyright © 2020-2023  润新知