vue中视频插件vue-video-player使用

最新推荐文章于 2024-02-14 21:55:33 发布

梁小茹

最新推荐文章于 2024-02-14 21:55:33 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_46653486/article/details/118279574

版权

本文介绍了如何在Vue项目中使用vue-video-player插件。首先，从github获取该插件，然后通过安装和引入步骤将其集成到项目中。可以全局或局部引入。在HTML部分设置视频元素，而在JS部分控制播放和暂停。vue-video-player还支持回调函数，方便进行自定义操作。

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

视频插件 vue-video-player
github地址：https://github.com/surmon-china/vue-video-player

安装

npm install vue-video-player --save

引入

全局引入和组件内引入（二选一）

全局引入
全局引用，在main.js里面导入并引用

import VideoPlayer from 'vue-video-player' // 视频插件引用
import 'vue-video-player/src/custom-theme.css' // 视频插件样式
import 'video.js/dist/video-js.css' // 视频插件样式
 
Vue.use(VideoPlayer)

组件内引入

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    videoPlayer
  }
}

使用：

html部分

<template>
    <div class='demo'>
      <video-player class="video-player vjs-custom-skin" 
            ref="videoPlayer" 
            :playsinline="true" 
            :options="playerOptions">
      </video-player>
    </div>
  </template>

js部分