vue播放器组件

vue中使用播放器组件

效果图

说明： 由于测试视频高度原因出现黑背景

安装及引入

官方文档

npm i vue-video-player -S

全局引入

在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)

局部注册

需要使用的vue文件导入并注册组件

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

export default {
    components: {
        videoPlayer
    }
}

使用

这里Demo使用父子组件传值

父组件

传值两个参数【这里为了方便分开传】

• playerUrl： 视频url
• posterUrl： 视频封面图

子组件

新建player.vue组件

js

• 引入及配置参数【配置: 根据个人所需】
• 接收父组件的值

样式

根据个人需求调整

提示

• Android 和 ios点击播放时操作方式略有不同

  a、 ios点击可立即播放，

  b、Android 选择小窗口播放、分享 或 全屏播放