• Now all data be ready for publish, We had made our blog alive now. Haha.

  • These days CCP GFW blocked all the IPs from US and when I switch my IP in google Cloud, the disk data cannot be restore again. I have to restart my blog totally, Now the website is still building…

Vue-videojs7 play m3u8 using vue and videojs7 easily

Projects PingBook 3 weeks ago (10-22) 51 0


A vue video.js7 plugin, so you can play hls video(m3u8 format) within html5 easily forked from :

Demo Example

Demo for vue-videojs7

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: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'
  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 = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'

<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

Email: alterhu2020@gmail.com

Copyright from PingBook Blog, If not specified, they are original. This site uses BY-NC-SAProtocol authenticated.
For reprinting, please indicate the link of the original text:Vue-videojs7 play m3u8 using vue and videojs7 easily
LIKE (0)
We create, We sharing! Tag every value data your sharing
Submit comments
Cancel comments
emoji picture bold strikethrough center italic check in

Hi,you need to provide your name and email adress!

  • Name (Required)
  • Email (Required)
  • Website