A vue video player plugin using video.js 7.
npm install vue-videojs7A vue video.js7 plugin, so you can play hls video(m3u8 format) within html5 easily, original forked from :
https://github.com/surmon-china/vue-video-player
Demo for Video.js 7 m3u8 player
yarn add vue-videojs7
npm install vue-videojs7 --save
`
$3
#### 2.1 Method1: Use with mount as 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 Method2: Use with mount as component
`
import {videoPlayer} from 'vue-videojs7'export default {
components: {
videoPlayer
}
}
`#### 2.3 Method3: Integration with nuxt as plugin
1. Create a nuxt plugin located in this place:
~/plugins/vue-videojs7.js, put below code:`vue
import Vue from 'vue'
import VideoPlayer from 'vue-videojs7'
Vue.use(VideoPlayer, /* {
options: global default videojs options,
events: global videojs videojs events
} */)
`
2. Register the plugin in your nuxt.config.js file:`vue
plugins: [
{src: '~/plugins/vue-videojs7.js', mode: 'client'}
]
`
3. import the component in your vue file:`vue
class="vjs-custom-skin"
:options="playerOptions"
@play="onPlayerPlay($event)"
@ready="onPlayerReady($event)">
`For detail configuration in nuxt project, check the example nuxt code
Example code
Detail full copied example from Home.vue
`
Using Html5 to play m3u8 media file
class="vjs-custom-skin"
:options="playerOptions"
@play="onPlayerPlay($event)"
@ready="onPlayerReady($event)">
``Email: alterhu2020@gmail.com