Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-videojs-async with all npm packages installed. Try it out:

var vueVideojsAsync = require("vue-videojs-async")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-videojs-async v0.0.5

async component for videojs


use videojs through vue async component, so you can load video.js and video.css when you really need it.

github for more details


npm install --save vue-videojs-async


// main.js
import { VueVideojs } from 'vue-videojs-async'
import 'vue-videojs-async/dist/vue-videojs-async.css'

// vue template
<vue-videojs-async :src="src" :type="type" width="800" height="480"/>

you can change src through change props, you can see a demo in test folder

changeSrc () {
    this.src = ''
    this.type = 'video/m3u8'

change videojs source file path(cdn or your private source path)

the default path of videojs source file is '//' and '//' you can change the path(url) of videojs source file like this:

import { Videojs, asyncVideojsCompFactory } from 'vue-videojs-async'
// ...
asyncVideojsCompFactory(Videojs, videojsPath, videojsCssPath, compName)

the default compName is 'vue-custom-videojs' you can overwrite it by give the forth parameter. asyncVideojsCompFactory will register a new async vue component, the new component named compName will load your custom videojs source files. then you can use your custom component like this:

// vue template
<vue-custom-videojs :src="src" :type="type" width="800" height="480"/>


add plugins...

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free