videojs的使用

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
        }
    }

 

 

videojs的使用

上一篇:工业知识中台


下一篇:中文写入json