zoukankan      html  css  js  c++  java
  • 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话;就是直接用h5标签<video></video>就可以了;

    但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种videojs的插件

    使用

    <!DOCTYPE html>
    <html>
    <head>
      <title>Video.js | HTML5 Video Player</title>
    
      <!-- Chang URLs to wherever Video.js files will be hosted -->
      <link href="video-js.css" rel="stylesheet" type="text/css">
      <!-- video.js must be in the <head> for older IEs to work. -->
      <script src="video.js"></script>
    
      <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
      <script>
        videojs.options.flash.swf = "video-js.swf";//不兼容h5的浏览器
      </script>
    
    
    </head>
    <body>
    
      <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
          poster="http://video-js.zencoder.com/oceans-clip.png"//还没有开始播放的时候,展示的图片
          data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
        <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
        <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
        <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
      </video>
    
    </body>
    </html>

    demo:

    https://github.com/GainLoss/video-videojs

    http://www.jq22.com/jquery-info404

    官方文档:

    https://github.com/videojs/video.js/blob/stable/docs/index.md

  • 相关阅读:
    LOJ
    LOJ
    LOJ
    一种树形背包的时间复杂度证明
    [机器学习]第四、五周记录
    [机器学习]第三周记录
    [家里训练20_02_16]C
    [机器学习]第二周记录
    wireshark无响应的问题
    [机器学习]第一周记录
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6473582.html
Copyright © 2011-2022 走看看