使用 video.js 时的一些误区（rtmp、自动全屏、currentTime、清晰度切换、播放按钮不起作用）

之前的一个项目，需要做直播流，以及录播的视频播放，包括pc端和手机端。

video.js 版本号7.4.1

---

1.rtmp问题

要做直播流，刚开始使用的是rtmp格式，但是rtmp是基于falsh的。考虑在chrome最新的版本中，已经不支持falsh，再加上手机端不支持flash，所以最后使用m3u8格式的直播流。

基础使用

<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中使用，所以写法有点不一样。

2.自动全屏问题

在ios设置中，视频播放会自动全屏。

解决办法：给video添加playsInline属性，同时设置display。

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

3.currenTime问题
设置播放时间，使用currentTime,在pc上没有问题，但是在手机上设置，会重头开始播放。

解决办法：使用loadedmetadata事件（表示资源加载完成），但是依然有问题，经过测试，设置一个事件的延迟，可以解决。

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

4.播放按钮无效问题
还是ios设备，控制条左下角的播放按钮无效

解决办法：给video添加一个div，给div添加一个事情，通过点击事件的代理来处理播放。

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

5.切换清晰度问题

 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)">标清</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)
      })

切换清晰度可以跟设置时间一起使用。

还是ios，在ios上切换清晰度的点击没有效果

解决方法： 在代理事件上做判断，并手动设置清晰度的显示隐藏。

  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 控制条里面自动生成的固定元素，可以通过F12查看。