mirror of
https://github.com/videojs/video.js.git
synced 2025-01-04 06:48:49 +02:00
docs: add an example Vue integration.md (#5899)
* Create vue.md Instructions for Vue integration (based on React example). * Add link to Vue guide
This commit is contained in:
parent
511f729b7a
commit
4c277fd0f6
@ -19,6 +19,7 @@ This document outlines many considerations for using Video.js for advanced playe
|
||||
* [React](#react)
|
||||
* [Ember](#ember)
|
||||
* [Angular](#angular)
|
||||
* [Vue](#vue)
|
||||
|
||||
## Accessing a player that has already been created on a page
|
||||
|
||||
@ -371,3 +372,7 @@ See [ReactJS integration example](/docs/guides/react.md)
|
||||
### Ember
|
||||
|
||||
### Angular
|
||||
|
||||
### Vue
|
||||
|
||||
See [Vue integration example](/docs/guides/vue.md)
|
||||
|
83
docs/guides/vue.md
Normal file
83
docs/guides/vue.md
Normal file
@ -0,0 +1,83 @@
|
||||
# Video.js and Vue integration
|
||||
|
||||
Here's a basic Vue player implementation.
|
||||
|
||||
It just instantiates the Video.js player on `mounted` and destroys it on `beforeDestroy`.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<video ref="videoPlayer" class="video-js"></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videojs from 'video.js';
|
||||
|
||||
export default {
|
||||
name: "VideoPlayer",
|
||||
props: {
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
|
||||
console.log('onPlayerReady', this);
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
You can then use it like this: (see [options guide][options] for option information)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<video-player :options="videoOptions"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoPlayer from "@/components/VideoPlayer.vue";
|
||||
|
||||
export default {
|
||||
name: "VideoExample",
|
||||
components: {
|
||||
VideoPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoOptions: {
|
||||
autoplay: true,
|
||||
controls: true,
|
||||
sources: [
|
||||
{
|
||||
src:
|
||||
"/path/to/video.mp4",
|
||||
type: "video/mp4"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Don't forget to include the Video.js CSS, located at `video.js/dist/video-js.css`.
|
||||
|
||||
[options]: /docs/guides/options.md
|
Loading…
Reference in New Issue
Block a user