videojs的基本使用方法（加载flash）

接手到一个新项目，只能用rtmp流来播放视频，在网上找到videojs开发，由于要支持flash,所以还需要使用flash和swf，需要用到三个库和固定版本，它们分别是：videojs@7.8.4,videojs-flash@2.1.1,videojs-swf@5.4.2，版本不同的版本使用方法不一样，要注意区别：

// 项目是基于vue2.0构建的，直接引入
import videojs from "video.js"
import "video-flash"
import "video.js/dist/video-js.min.css"
import SWF_URL from "videojs-swf/dist/video-js.swf"

videojs.options.flash.swf = SWF_URL

flash需要引入一个swf文件，webpack 默认loader是不支持的，所以需要再webpack中通过url-loader导入.swf文件

在html中标注一个video标签，该video标签是用来渲染视频的节点,并注明id值

<div id="video-container">
<video id="video-wrapper">
    <source :src="src" type="rtmp/flv"></source> // 需要加载的src
</video></div>

使用方法

let cofig = {
    controls:false,
    autoplay:true,
    fluid:true,
    muted:false
}
let player = videojs("video-wrapper",config,function(){})
player.pause()
player.src({
    src:src, // 获取到的src地址
    type:"rtmp/flv"
})
player.load()
player.play()

在开发过程中有一个需求，动态加载不同的视频流，如果只是单纯的修改src，并重新load,play不会生效，查到文档需要用dispose（）去销毁，重新生成，但是在销毁的过程中会把video标签的dom结构删除掉，所以需要动态生成dom节点，下面是改造的方案

// 前置步骤
// player.dispose()
// player = null

let cofig = {
    controls:false,
    autoplay:true,
    fluid:true,
    muted:false
}
let createDom = （）=>{
    document.getELementById("video-container").innerHTML = "<video id="video-wrapper">
        <source :src="src" type="rtmp/flv"></source> // src需要动态的 这里根据需求做适当变更
    </video>"}

if(!document.getELementById("video-wrapper")){
    createDom()
}

let player = videojs("video-wrapper",config,function(){})
player.pause()
player.src({
    src:src, // 获取到的src地址
    type:"rtmp/flv"
})
player.load()
player.play()