video.js學習筆記

時間 2019-11-09

標籤 video.js video 學習筆記欄目 JavaScript 简体版

原文原文鏈接

　　在開發的項目中，有視頻播放這個功能，找了好多前端的插件，最後決定時用video.js 。javascript

　　什麼是video.js？css

　　video.js是一個開源的HTML5 jquery 視頻插件，這個插件能夠用來處理Flash 視頻，也能夠很好的支持H5，它仍是一個多平臺支持的產品。html

　　video.js的優勢前端

它是開源免費的，能夠在github很容易的獲取到最新的源碼。
使用起來很是容易，只要花幾秒中就能夠夾起一個視頻播放頁面。
它幾乎兼容全部的瀏覽器，而且優先使用HTML5，在不支持的瀏覽器中，會自動生成Falsh進行播放。
純js和css打造，使用最普遍的前端視頻播放插件，說明文檔詳細，學習起來比較容易。

　　話很少說，代碼裏面的註釋都很全，video.js中的api我也是瞭解的不是不少，在之後的具體項目中再學習記錄。html5

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>video.js 學習2017-7-28</title>
    <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
    <link href="css/video-js.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>
    <!-- 若是要支持 IE8 -->
    <!-- <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
    <style media="screen">
    .video-div{
      width: 400px;
      height: 200px;
      margin: 80px auto;
    }
    .video-js .vjs-tech {
      /*這行代碼最爲關鍵，這樣視頻播放器的外層容器都由視頻內容自己撐大*/
      position: relative;
    }
    /* 設置暫停時中間的顯示的播放按鈕！ */
      vjs-paused .vjs-big-play-button,
      .vjs-paused.vjs-has-started .vjs-big-play-button {
      display: block;
      }
      /* 設置video 圓角 */
      #myVideo1{
        border-radius: 10px;
      }
      /* 設置播放按鈕，矩形變 圓形 */
      .video-js .vjs-big-play-button{
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.5em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 2.5em;
        background-color: #73859f;
        background-color: rgba(115,133,159,.5);
        border-width: 0.15em;
        margin-top: -1.25em;
        margin-left: -1.75em;
      /* 中間的播放箭頭 */
      .vjs-big-play-button .vjs-icon-placeholder {
        font-size: 1.63em;
      }
      /* 加載圓圈 */
      .vjs-loading-spinner {
        font-size: 2.5em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1.5em;
      }
       /**/
      .vjs-has-started .vjs-control-bar{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }


    </style>
  </head>
  <body>
    <div>
      我是文字
    </div>
    <div class="video-div">
      <!-- controls 設置或返回視頻應該顯示的控件，好比：暫停、播放 html5的新特性  -->
      <!--
        preload 是否在頁面加載後再入視頻  html5新特性
        preload="auto" 當頁面加載後載入整個視頻
        preload="meta" 當頁面加載後載入元數據
        preload="none" 當頁面加載後不載入視頻
      -->
      <!--
       poster 視頻加載時顯示的圖像，或者在用戶點擊播放以前顯示的圖片
       若是未設置，使用視頻的第一幀來代替  html5新特性
       poster="URL";
       -->
       <!--
       必須項
       data-setup: 是json的數據格式,頁面準備完成時自動加載，若是要強制在pc端使用 flash播放，
       則有兩種途徑：1.經過 html的 data-setup='{ "techOrder":["flash", "html5"] }'
       2.經過js video("myVideo1",{"techOrder":["flash", "html5"]},function(){
       // 第一個參數：video的id  二. 設置當前data-setup屬性，也能夠爲 {}, 三. 執行的方法
         })
      -->
      <!--
      class說明：
      video-js 應用所需的 Video.js 功能，如全屏和字幕樣式。 必須項
      vjs-default-skin 爲 HMTL 控制條應用默認的皮膚，能夠被移除或重寫，以建立你本身的控制條樣式。
       -->
       <!--
       source 標籤爲媒介元素（video、audio）定義媒介資源
       標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
       屬性：
       src ：規定媒介文件的URl
       type：規定媒體資源的 MIME 類型。
       preload="meta"
        -->
      <video id="myVideo1" controls preload="auto"  data-setup="{}"  poster="00.jpg"
        class="video-js vjs-default-skin vjs-big-play-centered" width="400" height="200">
        <!-- 沒有設置長和高 默認 1920 * 1080 -->
        <!-- source 默認加載 一個文件資源 -->
        <source src="1.mp4" type="video/webm">
        <source src="2.mp4" type="video/mp4">
        <!-- <source src="1.webm" type="video/webm">
        <source src="1.ogv" type='video/ogg' /> -->
      </video>
    </div>
    <div>
      參看文獻
        <a href="http://www.awaimai.com/2053.html"></a>
        <a href="http://blog.csdn.net/ly115176236/article/details/50977127"></a>
        <a href="http://blog.csdn.net/huang100qi/article/details/53405876"></a>
        <a href="http://www.cnblogs.com/ShaYeBlog/p/7068188.html"></a>
        <a href="http://www.cnblogs.com/alicePanZ/articles/5676915.html"></a>
        <a href="http://www.cnblogs.com/xinlinux/p/4365188.html"></a>
        <a href="http://www.awaimai.com/2053.html"></a>
        <a href="http://www.cnblogs.com/afrog/p/6689179.html"></a>

    </div>
    <div>
      <p> 經常使用api </p>
      //播放與暫停播放
         myPlayer.play();
        myPlayer.pause();
        //設置/獲取視頻的當前播放時間
        myPlayer.currentTime();
         myPlayer.currentTime(120);
        //視頻總的時常
        myPlayer.duration();
        //獲取或設置播放器的視頻源
        myPlayer.src();
        myPlayer.src('www.baidu.mp4')
        //獲取或者設置視頻播放器的poster 圖片
        myPlayer.poster();
        myPlayer.poster('xxx.jpg');
    </div>
  </body>
  <!-- 設置Falsh播放器的路徑，若是瀏覽器不支持H5，將會使用Falsh： -->
    <script type="text/javascript">
        videojs.options.flash.swf = "static/video-js/video-js.swf";
     </script>
  <script>
  // 初始化全部的video 標籤
  var videos = document.getElementsByTagName('video');
    for(i=0; i<videos.length; i++) {
        var video = videos[i];
        if(video.className.indexOf('video-js') > -1) {
            videojs(video.id).ready(function(){
            });
        }
    }

  // 獲取視頻播放器
  var myPlayer = videojs("myVideo1",{
    "controls": true,
    "autoplay": false,
    "preload": "auto",
    "loop": false,
    controlBar: {
    // captionsButton: false,//用於切換和選擇字幕的按鈕組件
    chaptersButton: false,//導航與其餘語言的其餘軌道
    playbackRateMenuButton: true, //用於控制播放速率的組件
    LiveDisplay: true, //顯示實時指示器
    subtitlesButton: false, //用於切換和選擇字幕的按鈕組件
    remainingTimeDisplay: true,//顯示視頻中剩餘的時間
    progressControl: false, // 禁止出現進度條
    //豎着的音量條
    // volumeMenuButton: {
    // inline: false,
    // vertical: true
    // },
    fullscreenToggle: true //切換全屏視頻
  },
  mydata: {
             username: 'xiaoming'
         }
  },function(){
    myPlayer.pause(); // 暫停
  })
  // 用js設置資源文件
  // var myPlayer = videojs('my-player', {
  //   sources: [{
  //     src: '//path/to/video.mp4',
  //     type: 'video/mp4'
  //   }, {
  //     src: '//path/to/video.webm',
  //     type: 'video/webm'
  //   }]
  // });
  //  videojs("myVideo1").ready(function(){
  //    var myPlayer = this;
  //    //myPlayer.play();  //  播放
  //   myPlayer.pause(); // 暫停
  //   var whereYouAt = myPlayer.currentTime();
  //   console.log(whereYouAt);
  //   });
  // 事件關注
   myPlayer.on("play",function(){
     console.log("a");
     var a = myPlayer.currentTime();
    console.log(a);
     // 我是開始播放時的事件
   });
   myPlayer.on("pause",function(){
     // 我是暫停時的事件
   })
   myPlayer.on("ended",function(){
     // 我是結束播放時的事件
   });
  </script>
</html>