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-videojs7 with all npm packages installed. Try it out:

var vueVideojs7 = require("vue-videojs7")

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

vue-videojs7 v0.1.5

A vue video player plugin using video.js 7.


A vue video.js 7 plugin, so you can play m3u8 video within html5 easily forked from :

Demo Example

Demo for Video.js 7 m3u8 player

How to use

1. Install the plugin

npm install vue-videojs7 --save

2. usage

2.1 Use with mount with global
import Vue from 'vue'
import {VideoPlayer} from 'vue-videojs7'

Vue.use(VideoPlayer, /* {
  options: global default videojs options,
  events: global videojs videojs events
} */)
2.2 Use with mount with component
import {videoPlayer} from 'vue-videojs7'

export default {
  components: {

3. Example code

Detail full copied example from Home.vue

  <div class="player">
    <h3>Using Html5 to play m3u8 media file</h3>
    <video-player ref="videoPlayer"

import VideoPlayer from '@/components/VideoPlayer.vue'

export default {
  name: 'home',
  components: {
  data () {
    return {
      playerOptions: {
        autoplay: true,
        controls: true,
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        // poster: ''
  computed: {
    player () {
      return this.$refs.videoPlayer.player
  methods: {
    onPlayerPlay (player) {
      console.log('player play!', player)
    onPlayerReady (player) {
      console.log('player ready!', player)
    playVideo: function (source) {
      const video = {
        withCredentials: false,
        type: 'application/x-mpegurl',
        src: source
      this.player.reset() // in IE11 (mode IE10) direct usage of src() when <src> is already set, generated errors,
      // this.player.load()
  mounted () {
    const src = ''

<style scoped>
  .player {
    position: absolute !important;
    width: 100%;
    height: 60%;
  .vjs-custom-skin {
    height: 60% !important;

  .vjs-custom-skin /deep/ .video-js {
    height: 60%;

4. Source Code

5. Contact/Issues


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