一、下载video.js
npm install --save-dev video.js
二、在vue脚手架中引入video.js(main.js引入)
import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video //引入Video播放器
三、实例化了视频.js播放器,并在 上销毁了它
<template> <div> <video ref="videoPlayer" class="video-js"></video> </div> </template> <script> import videojs from 'video.js'; //不要忘记包括视频.js CSS,位于 .<code>video.js/dist/video-js.css</code> 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>
三、组件使用video.js
<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" } ] } }; } };
到此这篇关于Vue使用video.js的代码详解的文章就介绍到这了,更多相关vue使用video.js内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具!