https://github.com/alterhu2020/vue-videojs7
A vue hls video player plugin using video.js 7
https://github.com/alterhu2020/vue-videojs7
hls-live-streaming hls-player hls-video html5-video html5-video-player html5-video-player-sample m3u8-player m3u8-videos videojs-component videojs7 vue-hls vue-video vue-video-player vue-videojs vue-videojs-demo
Last synced: 7 months ago
JSON representation
A vue hls video player plugin using video.js 7
- Host: GitHub
- URL: https://github.com/alterhu2020/vue-videojs7
- Owner: alterhu2020
- License: mit
- Created: 2018-09-29T11:13:24.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T23:28:16.000Z (over 2 years ago)
- Last Synced: 2024-10-15T07:33:07.488Z (9 months ago)
- Topics: hls-live-streaming, hls-player, hls-video, html5-video, html5-video-player, html5-video-player-sample, m3u8-player, m3u8-videos, videojs-component, videojs7, vue-hls, vue-video, vue-video-player, vue-videojs, vue-videojs-demo
- Language: Vue
- Homepage:
- Size: 4.71 MB
- Stars: 78
- Watchers: 2
- Forks: 38
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-videojs7
A 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](https://github.com/surmon-china/vue-video-player)
## Demo Page
- [Demo for Video.js 7 m3u8 player](https://code.seniortesting.club/vue-videojs7/)
## How to use
### 1. Install the plugin
```
yarn add vue-videojs7
npm install vue-videojs7 --save
```
### 2. usage
#### 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
```
For detail configuration in nuxt project, check the [example nuxt code](https://github.com/alterhu2020/vue-videojs7/tree/master/examples/nuxt/)
## Example code
Detail full copied example from [Home.vue](https://github.com/alterhu2020/vue-videojs7/blob/master/src/views/Home.vue)
```
Using Html5 to play m3u8 media file
import VideoPlayer from '@/components/VideoPlayer.vue'
export default {
name: 'home',
components: {
VideoPlayer
},
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)
this.player.play()
},
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.src(video)
// this.player.load()
this.player.play()
}
},
mounted () {
const src = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
this.playVideo(src)
}
}
.player {
position: absolute !important;
width: 100%;
height: 60%;
}
.vjs-custom-skin {
height: 60% !important;
}
.vjs-custom-skin /deep/ .video-js {
height: 60%;
}
```
## Donate
`vue-videojs7` is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
### One-time Donations
We accept donations through these channels:
- [Paypal](https://paypal.me/alterhu2020)
- [WeChat Pay](https://imgur.com/fqPZmHx)
- [Alipay](https://imgur.com/cFdABPL)
## Author
**vue-videojs7** © alterhu2020, Released under the MIT License.
Authored and maintained by alterhu2020 with help from contributors.