vue-video-player vue视频插件

最新推荐文章于 2024-09-20 00:40:27 发布

文鼎鼎

最新推荐文章于 2024-09-20 00:40:27 发布

阅读量2.3k

点赞数 2

分类专栏：插件文章标签： vue

本文链接：https://blog.csdn.net/killbee365/article/details/107370168

版权

本文介绍了vue-video-player，它是videojs的Vue版本。它支持HTML5视频和现代流媒体格式，适用于桌面和移动设备。文章涵盖了安装、全局及局部引用、配置项设置，以及播放器的各种事件，帮助开发者实现自定义的视频播放功能。

摘要由CSDN通过智能技术生成

介绍

vue-video-player是videojs的vue版本
video.js官网：https://videojs.com/
引用一下官网介绍：Video.js是一个为HTML5世界从头开始构建的网络视频播放器。它支持HTML5视频和现代流媒体格式，它支持在桌面和移动设备上播放视频。

安装

安装依赖npm i vue-video-player -D
全局引用：

	// 在mian.js里面引入
	import "video.js/dist/video-js.css";
	import {videoPlayer} from "vue-video-player";
	Vue.use(VideoPlayer)

或者局部引用

	// 在用的页面引
	import "video.js/dist/video-js.css";
    import {videoPlayer} from "vue-video-player";
    
    // 在components里面声明一下videoPlayer
    components: {
            videoPlayer
        }

用法

<video-player class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="playerOptions"
    @play="onPlayerPlay($event)"
    @