Vue2视频播放器；如何导入flash插件？答案

【问题标题】：Vue2 video player; How to import flash plugin?Vue2视频播放器；如何导入flash插件？
【发布时间】：2017-12-05 21:17:20
【问题描述】：

我正在创建一个同时支持 html5 和 flash 的网络播放器。我正在使用 vue-video-player 并包装在一个组件中。我已经安装了 videojs-flash 和 videojs-flvjs。

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// import VideoJsFlash from 'videojs-flash'
// import VideoJsFlash from 'videojs-flvjs'

require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

// const { videojs } = VueVideoPlayer
// videojs.plugin('flashPlugin', VideoJsFlash)
// videojs.addLanguage('ml', myLanguageObject)
// videojs.registerPlugin('flashPlugin', VideoJsFlash)

Vue.use(VueVideoPlayer)

那我的 playerOptions 是

playerOptions: {
    // videojs options
    muted: true,
    language: 'en',
    techOrder: ['html5', 'flvjs'], // or ['html5', 'flash']
    playbackRates: [0.7, 1.0, 1.5, 2.0],
    width: '800px',
    height: '800px',
    plugins: {

    },
    flash: {
      swf: './#/assets/video-js.swf'
    },
    poster: './#/assets/logo.png',
    sources: [
    ]
}

我希望播放视频

我得到的错误如下，

video.cjs.js?0e26:441 VIDEOJS：错误：“flvjs”技术未定义。跳过了对该技术的浏览器支持检查。

PlayVid.vue?139b:134 播放器已准备好播放器 {player_: Player, options_: {…}, id_: "vjs_video_506", name_: null, eventBusEl_: div#vjs_video_506.video-js.vjs-paused。 vjs_video_506-dimensions.vjs-controls-enabled.vjs-workinghover…, …}

video.cjs.js?0e26:441 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 无法加载媒体，原因可能是服务器或网络故障或格式不受支持。 MediaError {code: 4, message: "无法加载媒体，可能是因为 ...rk 失败或格式不受支持。"}

【问题讨论】：

你找到解决这个问题的办法了吗？

标签： html flash ecmascript-6 vue.js video.js

【解决方案1】：

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
Vue.use(VueVideoPlayer)

和播放器选项

playerOptions: {
    // videojs options
    muted: true,
    language: 'en',
    techOrder: ['html5', 'flash'],
    playbackRates: [0.7, 1.0, 1.5, 2.0],
    width: '800px',
    height: '800px',
    poster: './#/assets/logo.png',
    sources: [{
      type: "video/x-flv",
      src: "https:/
    }]
}

【讨论】：