vue-video-player

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

xiaochouniu1

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

阅读量305

点赞数

分类专栏： vuex 文章标签： vue

本文链接：https://blog.csdn.net/xiaochouniu1/article/details/111469241

版权

本文介绍了如何在Vue项目中集成vue-video-player组件，包括安装步骤、全局引用和组件内引用的方法，以及解决页面只能播放一个视频的问题。

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

1.安装
npm install vue-video-player --save
2.全局引用，在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)

2.组件内引用import { videoPlayer } from 'vue-video-player'

import 'video.js/dist/video-js.css'
 
export default {
   
 	components: {
   
 		videoPlayer
	}
}

3 .代码

<template>
 <video-player class="video-player vjs-custom-skin"
　  ref="videoPlayer"
　　:playsinline="true"
　　:options="playerOptions"
　　@play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @statechanged="playerStateChanged($event)"
    @ready="playerReadied">
 </video-player>
<template> 
<script>
import 'video.js/dist/video-js.css'
export default {
   
  name: "VideoWatch",
  data() {
   
    return {
   
      playerOptions: {
   
        controls: true, // 是否显示控制栏
        playbackRates: [0.5, 1.0, 1.5, 2.0], /