videojs的使用

github地址：https://github.com/videojs/video.js

 

引入：declare var videojs: any

 

<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%;" controls preload="auto"  data-setup='{}' poster="http://vjs.zencdn.net/v/oceans.png">    
     <source id="source" src="http://vjs.zencdn.net/v/oceans.mp4"  type="application/x-mpegURL">
</video>

this.player = videojs(
          // videoEleId,
          'my-player',
          {
            language: 'zh-CN',
            // width: '1000',
            // height: '600',
            // poster: '',
            // controls: true,
            // autoplay: false,
            // techOrder: ['html5', 'flash'],
            // loop: false,
            // muted: false,
            // preload: 'metadata',
            // poster: this.poster || '',
          },
          function onPlayerReady() {
            var myPlayer = this
            this.play()
            //在回調函數中，this代表當前播放器，
            //可以調用方法，也可以綁定事件。
            /**
             * 事件events    綁定事件用on    移除事件用off
             */
            this.on('suspend', function () {
              //延遲下載
              console.log('延遲下載')
            })
            this.on('loadstart', function () {
              //客戶端開始請求數據
              console.log('客戶端開始請求數據')
            })
            this.on('progress', function () {
              //客戶端正在請求數據
              console.log('客戶端正在請求數據')
            })
            this.on('abort', function () {
              //客戶端主動終止下載（不是因為錯誤引起）
              console.log('客戶端主動終止下載')
            })
            this.on('error', function () {
              //請求數據時遇到錯誤
              console.log('請求數據時遇到錯誤')
            })
            this.on('stalled', function () {
              //網速失速
              console.log('網速失速')
            })
            this.on('play', function () {
              //開始播放
              console.log('開始播放')
            })
            this.on('pause', function () {
              //暫停
              console.log('暫停')
            })
            this.on('loadedmetadata', function () {
              //成功獲取資源長度
              console.log('成功獲取資源長度')
            })
            this.on('loadeddata', function () {
              //渲染播放畫面
              console.log('渲染播放畫面')
            })
            this.on('waiting', function () {
              //等待數據，並非錯誤
              console.log('等待數據')
            })
            this.on('playing', function () {
              //開始回放
              console.log('開始回放')
            })
            this.on('canplay', function () {
              //可以播放，但中途可能因為加載而暫停
              console.log('可以播放，但中途可能因為加載而暫停')
            })
            this.on('canplaythrough', function () {
              //可以播放，歌曲全部加載完畢
              console.log('可以播放，歌曲全部加載完畢')
            })
            this.on('seeking', function () {
              //尋找中
              console.log('尋找中')
            })
            this.on('seeked', function () {
              //尋找完畢
              console.log('尋找完畢')
            })
            this.on('timeupdate', function () {
              //播放時間改變
            //   console.log('播放時間改變')
            })
            this.on('ended', function () {
              //播放結束
              console.log('播放結束')
            })
            this.on('ratechange', function () {
              //播放速率改變
            //   console.log('播放速率改變')
            })
            this.on('durationchange', function () {
              //資源長度改變
            //   console.log('資源長度改變')
            })
            this.on('volumechange', function () {
              //音量改變
            //   console.log('音量改變')
            })
          }
        )

　　　destroyVideo() {
        if (this.player != null) {
          this.player.dispose()
          this.player = null
        }
    }