How Vue uses video.js

This article is about how Vue uses video.js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Download video.jsnpm install-save-dev video.js 2, introduce video.js in vue scaffolding (main.js introduction) import Video from 'video.js'import' video.js/dist/video-js.css'Vue.prototype.$video = Video / / introduce Video player 3, instantiate the video .js player, and destroy it on import videojs from 'video.js' / / Don't forget to include the video .js CSS, located at .video.js/dist/video-js.cssexport 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 ()} III. Components use video.js 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"} Thank you for your reading! This is the end of this article on "how Vue uses video.js". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!