video.js播放rtmp、hls、mp4格式的使用

注意：最好使用6.4以上的版本，当然7.0更好 7.0以上版本合并了video-hls.js文件，这个文件主要是为了播放m3u8格式的直播流（hls和rtmp直播一样，只是rtmp不支持移动端，所以苹果才针对移动端出了hls流） 以下资料是播放rtmp、hls和mp4格式的代码

注：rtmp和hls区别就是rtmp配置了type属性 而hls没有type属性（支持hls一定要用7.0版本的video.js）

1.首先现在video.js文件

      cnpm install [email protected] -D

2.在main.js中引入文件

 import './assets/css/video-js.min.css'   // 这个是video.js的播放器样式  //附地址：https://gitee.com/love-oschina/vuevideocsswenjian/blob/master/css/video-js.min.css
 import video from 'videojs-flash'  //记得在new Vue中注册全局使用

new Vue({
  el: '#app',
  router,
  video,
  store,
  components: {App},
  template: ''
})

3. 以下初始化video的时候用到了setTiment 因为接口数据需要一定的时间所以不写的话会导致video中url和返回的地址数据不能同步而报错

     <video class="video-js vjs-default-skin vjs-big-play-centered"
             controls
             id="livePlays"
             preload="auto"
             data-setup='flashFlg' // 这个是判断是否是直播地址是的话flashFlg的值为{"techOrder": ["flash"]}
             :class="{'hidden-controls':flashFlg}" // 判断是否为直播 是的话flashFlg为true隐藏滚动条
             muted  // 自动播放为了让用户体验友好 开启静音模式
             :poster="posterUrl" // 配置默认封面
             crossorigin='anonymous'
             autoplay  // 自动播放
             > 
      </video>

 <script>
 // 再次引入videojs文件（main.js中虽然引用过一次，再引一次感觉更有安全感 O(∩_∩)O哈哈~）
  import videojs from 'video.js'
  import 'videojs-flash' //只有rtmp流的时候才需引入 hls协议的不用

  export default {
    data() {
      return {
        flashFlg: '', //这个值是提示启动flash插件用于直播  mp4设置为空
        posterUrl: '', //默认封面地址
        videoPlayer: null //用来全局封装初始化的video
      }
    },
    // 这个是vue组件销毁之后让this.videoPlayer和this.flshFlg为空 这样做的目的无非就是在组件销毁之后把video的所有配置清空 为什么这样做，因为在移动端的时候mp4格式 返回列表再进列表虽然video的url有值 但是它就是不播放 所以目的就是解决这个问题
    beforeDestroy() {
      this.videoPlayer = null
      this.flashFlg = ''
      this.$store.state.count = 1  // 这个vuex的值默认为1 从列表点进到详情后为2  组件销毁（返回）之后再次为1
    }, 
    created() {
      if (this.$store.state.count === 2) {  // 如果为2就使用this.$router.go(0)刷新页面这样就能解决video中url有值不播放的问题了
        this.$router.go(0)
      }
      this.liveId = this.$route.query.id
      this.$axios.get(`/xxxxx/${this.liveId}`).then(res => {
        if (res.data['live-status'] === 0) { 
          this.flashFlg = ''
          this.posterUrl = require('../../assets/imgs/zanweikaishi_img.png')  // 根据返回的状态设置video的封面
        } else if (res.data['live-status'] === 1) {
          this.flashFlg = '{"techOrder": ["flash"]}' // 如果为1 正在直播 添加直播属性
        } else if (res.data['live-status'] === 2) {
          this.posterUrl = res.data.resources[0].iconUrl // 如果为2 回放 mp4格式的视频 清空直播中的属性
          this.flashFlg = ''
        }
      })
    },
    mounted() {
    // 设置video元素的宽高
      let domWidth = document.documentElement.clientWidth
      document.getElementById('livePlays').style.width = domWidth + 'px'
      document.getElementById('livePlays').style.height = 4 + 'rem'
      let _this = this
      this.$axios.get(`/xxxx/${this.liveId}`).then(res => {
        this.liveCon = res.data
        if (this.liveCon['live-status'] === 0) { // 为0 直播预告 可以不适用video根据需求设置预告的样式即可
          setTimeout(function () {
            _this.videoPlayer = videojs('livePlays', {autoplay: true}, () => {
              _this.videoPlayer.src({type: 'video/mp4', src: ''})
            })
          }, 500)
        } else if (this.liveCon['live-status'] === 1) { // 为1 配置video元素的直播属性
          let rtmpurl = this.liveCon['live-address']
           let ip1 = rtmpurl  // 这个是rtmp格式的直播流 使用方案一 
           let ip2 = 'http' + rtmpurl.slice(4).concat('.m3u8') // 这是hls协议的直播流 用方案二http://10.0.5.168/40005/40005.m3u8http://10.0.5.168/40005/40005.m3u8
          // 方案一
          setTimeout(function () {
            _this.videoPlayer = videojs('livePlays', {autoplay: true}, () => {
              _this.videoPlayer.src({type: 'rtmp/flv', src: ip1})
            })
          }, 500)
          // 方案二
         setTimeout(function () {
            console.log(ip)
            _this.videoPlayer = videojs('livePlays', {autoplay: true}, () => {
              _this.videoPlayer.src({src: ip2})
            })
          }, 500)
        } else if (this.liveCon['live-status'] === 2) { // 为2 配置video元素的mp4属性  
          var mp4url = this.liveCon.resources[0].files[0].path + '/' + this.liveCon.resources[0].files[0].name
          setTimeout(function () {
            _this.videoPlayer = videojs('livePlays', {autoplay: true}, () => {
              _this.videoPlayer.src({
                type: 'video/mp4',
                src: mp4url
              })
            })
          }, 500)
        }
      })
    }
  }
</script>