vue中videojs异步加载src

1.问题描述

video标签中写入固定视频地址可以正常播放，但是更换为ajax返回的值后，无法播放，审查元素发现，src中的视频是正确的

2.问题原因

仅仅更换src并不能正确切换video的视频地址，需要借助videojs api

3.处理思路

视频的初始化必须等到ajax数据返回以后，作为参数传入，此处用到async/await

3.具体代码

import 'video.js/dist/video-js.min.css'
import videojs from 'video.js'

init: function (src) {
  let player = videojs('#my-player', {
    autoplay: false,
    preload: 'auto',
    aspectRatio: '16:9',
    playbackRates: [1, 1.25, 1.5, 1.75, 2, 10],
    controlBar: {
      volumePanel: {
        inline: false
      },
      fullscreenToggle: true,
      customControlSpacer: false
    }
  }, function () {
    this.addClass('test666')
  })
}

  let source = { src: src }
  player.src(source)

mounted: async function () {
    let res = await ajaxGet('url')
    let videoUrl = res.data.retData.videoInfo.videoUrl
    this.init(videoUrl)
  }

4.src类型

myPlayer.src([
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
  { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
  { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" },
  { type: "application/x-mpegURL", src: "http://www.example.com/path/to/video.m3u8" }
])

5.videojs的事件列表

durationchange
ended
error
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
timeupdate
volumechange
resize

相关文章：
https://github.com/videojs/video.js/issues/3216
https://docs.videojs.com/docs/api/player.html#Methodssrc

其他：https://my.oschina.net/u/3108430/blog/1621639

铁血汉子 2019年1月6日

0 3186