前言

采用的是vue2.0和Video.js(5.18.4)版本、videojs-contrib-hls.js

遇到的问题

如果是安卓无法播放那是因为没有引入videojs-contrib-hls.js,找一个最新的版本引入即可。ios不引入也可以进行播放。
如果想使用视频本身宽高，则需要在video标签加入style= {objectFit: 'contain' } contain: 适应视频自身的宽高 (不会变形) fill: 充满video标签的宽高（视频播放时可能会被拉长拉宽，播放区域会变形）

     <video
        id="videoPlayer"
        ref="videoPlayer"
        class="video-js"
        x5-video-player-fullscreen="true"
        x5-playsinline
        playsinline
        webkit-playsinline
        preload="metadata"
        width="100%"
        height="100%"
        :style="{
            objectFit: 'contain',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat'
        }"
        muted
        controls
      ></video>

videojs初始化时机：如果是网络请求获取数据后显示，则在数据请求后进行初始化。例如下伪代码：

  async getData() {
      const rsp = await getPromise() // 接口数据
      // 在进行初始化videojs
      this.createVideo()
      
  }
   createVideo() {
      let options = {
        language: 'zh-CN'
      }
      let _this = this
      videojs.addLanguage('zh-CN', {
        'You aborted the media playback': '视频播放被终止',
        'A network error caused the media download to fail part-way.': '网络错误导致视频下载中途失败。',
        'The media could not be loaded, either because the server or network failed or because the format is not supported.':
          '视频因格式不支持或者服务器或网络的问题无法加载。',
        'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
          '由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。',
        'No compatible source was found for this media.': '无法找到此视频兼容的源。'
      })
      this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
        console.log('onPlayerReady')
      })
      this.player.on('click', function() {
        console.log('开始点击 ')
      })
      this.player.on('loadstart-3', function() {
        console.log('开始请求数据 ')
      })
      this.player.on('progress', function() {
        console.log('正在请求数据5')
      })
      this.player.on('loadedmetadata', function() {
        console.log('获取资源长度完成-4')
      })
      this.player.on('canplaythrough', function() {
        console.log('视频源数据加载完成-8')
      })
      this.player.on('waiting', function() {
        console.log('等待数据2')
      })
      this.player.on('play', function() {
        console.log('视频开始播放-1')
      })
      this.player.on('playing', function() {
        console.log('视频播放中-7')
        if (_this.userInfo.osType.toLowerCase() == 'ios') {
          _this.isPlaying = true
        }
   
      })
      this.player.on('pause', function() {
        _this.isPlay = false
        console.log('视频暂停播放')
      })
      this.player.on('ended', function() {
        _this.isPlay = false
        _this.isEnd = true
        console.log('视频播放结束')
      })
      this.player.on('error', function() {
        _this.isError = true
       
        console.log('加载错误')
      })
      this.player.on('seeking', function() {
        console.log('视频跳转中')
      })
      this.player.on('seeked', function() {
        console.log('视频跳转结束')
      })
      this.player.on('ratechange', function() {
        console.log('播放速率改变')
      })
      this.player.on('timeupdate', function(event) {
        console.log('播放时长改变')
        let video = document.querySelector('.video-js').getElementsByTagName('video')[0]
 
        if (video.currentTime > 0.1) {
          _this.isPlaying = true
        }
        if (60 * 5 <= parseFloat(video.currentTime)) {
          console.log('------if 播放了5分钟暂停')
          _this.isPlay = false
          _this.isEnd = true
          _this.player.pause()
        }
      })
      this.player.on('volumechange', function() {
        let video = document.querySelector('.video-js').getElementsByTagName('video')[0]
        console.log('volumechange', video.muted)
        video.muted = _this.muted
      })
      this.player.on('stalled', function() {
        console.log('网速异常')
      })
    },

在ios和安卓进行播放时，他们的这些时机不同。在ios情况下，进行播放，只要执行了this.player.play()方法，封面poster就不会显示，这样会视频在未加载完成时会显示videojs的黑色背景，这样体验效果很不好。而安卓在视频加载还未播放时会显示封面poster。所以这边统一进行在videojs覆盖一个div,把封面显示出来。设置封面的方法this.player.poster('xxx/xxx.png') 以下的封面不显示时机：（特别重要）

    this.player.on('timeupdate', function(event) {
        console.log('播放时长改变')
        let video = document.querySelector('.video-js').getElementsByTagName('video')[0]
 
        if (video.currentTime > 0.1) {
          _this.isPlaying = true  // 安卓正在播放不显示封面时机
        }
      })
      this.player.on('playing', function() {
        console.log('视频播放中-7')
        if (_this.userInfo.osType.toLowerCase() == 'ios') {
          _this.isPlaying = true   // ios正在播放不显示封面时机
        }
   
      })  
      
      // html代码
   <div class="my-poster" v-if="!isPlaying"><img :src="bg" class="img"/></div>

5.给videojs 添加事件，可以点击播放区域暂停或播放视频，但是videojs绑定不了click事件，只绑定了touchstart，这会导致在滚动页面时，如果触摸到了视频区域也会触发相应的事件，所以咱们这里不添加它的touchstart，自己添加播放按钮和暂停事件、跳转事件。添加html和按钮在videojs上。

vue中使用videojs遇到的问题以及总结

前言

遇到的问题

猜你喜欢