序文

Vue2.0 および Video.js (5.18.4) バージョン、videojs-contrib-hls.js が使用されます

遭遇した問題

Android で再生できない場合は、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とAndroidでプレイする場合、タイミングが異なります。iOSの場合、再生時にthis.player.play()メソッドを実行している限り表紙ポスターは表示されず、動画が読み込まれていないときはvideojsの黒い背景が表示されます。なので経験値効果は非常に悪いです。Android では、ビデオが読み込まれていても再生されていないときに、カバーポスターが表示されます。そこで、ここでは、カバーを表示する統一された方法で 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 はクリックイベントをバインドできず、touchstart のみをバインドします。これにより、スクロール中にビデオ領域がタッチされると、対応するイベントがトリガーされます。そこで、ここではタッチスタートを追加せず、再生ボタン、一時停止イベント、ジャンプイベントを自分で追加します。videojsにhtmlとボタンを追加します。

vue で videojs を使用する際に発生する問題と概要

序文

遭遇した問題

おすすめ