Vue使用video.js的代码详解
更新时间:2022年03月31日 10:23:38 作者:QiKS
这篇文章主要介绍了Vue使用video.js的代码详解,包括在vue脚手架中引入video.js,实例化了视频.js播放器,并在上销毁了它,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
一、下载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内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
Vue3 封装 element-plus 图标选择器实现步骤
这篇文章主要介绍了Vue3 封装 element-plus 图标选择器,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
最新评论