之前的一個(gè)項(xiàng)目，需要做直播流，以及錄播的視頻播放，包括pc端和手機(jī)端。

video.js 版本號(hào)7.4.1

1.rtmp問(wèn)題

要做直播流，剛開始使用的是rtmp格式，但是rtmp是基于falsh的?？紤]在chrome最新的版本中，已經(jīng)不支持falsh，再加上手機(jī)端不支持flash，所以最后使用m3u8格式的直播流。

基礎(chǔ)使用

<div onClick={this.palyByIos.bind(this)} style={{cursor: 'pointer'}}>
   <video id="myVideo" className="video-js vjs-default-skin vjs-big-play-centered" controls  autoPlay="autoplay" playsInline  preload="auto" data-setup='{}' style={{width: '100%', height: '300px'}}>
        <source id="source" src={this.props.video.get('m3u8_lsd_url')} type="application/x-mpegURL"></source>
   </video>
</div>

    window.myVideo = window.videojs('myVideo', {
      bigPlayButton: true,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false
    })
    window.myVideo.play()

我是再react中使用，所以寫法有點(diǎn)不一樣。

2.自動(dòng)全屏問(wèn)題

在ios設(shè)置中，視頻播放會(huì)自動(dòng)全屏。

解決辦法：給video添加playsInline屬性，同時(shí)設(shè)置display。

$("#myVideo video").css('display', 'initial')

3.currenTime問(wèn)題
設(shè)置播放時(shí)間，使用currentTime,在pc上沒(méi)有問(wèn)題，但是在手機(jī)上設(shè)置，會(huì)重頭開始播放。

解決辦法：使用loadedmetadata事件（表示資源加載完成），但是依然有問(wèn)題，經(jīng)過(guò)測(cè)試，設(shè)置一個(gè)事件的延遲，可以解決。

    window.myVideo.on('loadedmetadata', function() {
        window.myVideo.play()
        setTimeout(()=> {
          window.myVideo.currentTime(ctime)
        },2000)
      })

4.播放按鈕無(wú)效問(wèn)題
還是ios設(shè)備，控制條左下角的播放按鈕無(wú)效

解決辦法：給video添加一個(gè)div，給div添加一個(gè)事情，通過(guò)點(diǎn)擊事件的代理來(lái)處理播放。

  palyByIos() {
    if(window.myVideo.paused()) {
      window.myVideo.play()
    }else {
      window.myVideo.pause()
    }
  }

5.切換清晰度問(wèn)題

 var videoPanelMenu = $('.vjs-fullscreen-control')
    videoPanelMenu.before('<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"  aria-live="polite" aria-expanded="false" aria-haspopup="true">'  
        + '<div class="vjs-menu" role="presentation">'  
        + '<ul class="vjs-menu-content" role="menu">'  
        + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="1"  οnclick="changeVideo(1)">流暢</li>'  
        + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="2" οnclick="changeVideo(2)">標(biāo)清</li>'  
        + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="3" οnclick="changeVideo(3)">高清</li>'
        + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="3" οnclick="changeVideo(4)">超清</li>'    
        + '</ul></div>'  
        +'  <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切換" aria-disabled="false">'  
        +'      <span aria-hidden="true" class="vjs-icon-placeholder" type="qxd"></span><span class="vjs-control-text">清晰度切換</span>'  
        +'  </button>'  
        +'</div>'  
    );

    $('.vjs-menu-item').on('click', (e)=> {
      e.stopPropagation()
      let status = e.target.getAttribute('type')
      var ctime= window.myVideo.currentTime();  
      let src = ''
      switch(status) {
        case '1':
          src = this.props.video.get('m3u8_lld_url')
          break;
        case '2':
          src = this.props.video.get('m3u8_lsd_url')
          // window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lsd_url')}]);  
          // window.videojs("liveVideo").play();  
          break;
        case '3':
          src = this.props.video.get('m3u8_lhd_url')
          // window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lhd_url')}]);  
          // window.videojs("liveVideo").play(); 
          break;
        case '4':
          src = this.props.video.get('m3u8_lud_url')
          // window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lud_url')}]);  
          // window.videojs("liveVideo").play(); 
          break;
      }
      window.myVideo.reset()
      window.myVideo.src({type: 'application/x-mpegURL', src})
      window.myVideo.load(src);
      window.myVideo.on('loadedmetadata', function() {
        window.myVideo.play()
        setTimeout(()=> {
          window.myVideo.currentTime(ctime)
        },2000)
      })

切換清晰度可以跟設(shè)置時(shí)間一起使用。

還是ios，在ios上切換清晰度的點(diǎn)擊沒(méi)有效果

解決方法： 在代理事件上做判斷，并手動(dòng)設(shè)置清晰度的顯示隱藏。

  palyByIos(e) {
    if(e.target.getAttribute('type')=== 'qxd') {
      $('.vjs-menu').css('display', 'block')
      setTimeout(()=> {
        $('.vjs-menu').css('display', 'none')
      },2000)
      return
    }
    if(window.myVideo.paused()) {
      window.myVideo.play()
    }else {
      window.myVideo.pause()
    }
  }

這些類名，都是video.js 控制條里面自動(dòng)生成的固定元素，可以通過(guò)F12查看。