Vue视频插件vue-video-player的使用

目录

  • 1,前言
  • 2,介绍
  • 3,安装和使用
  • 效果图
  • 后记

1,前言

有些项目中,或者是视频网站,都需要视频播放功能。我们可以用H5video标签实现播放,但是原生的样子视频播放器不太好看,功能也需要自己封装。这时候可以站在巨人的肩膀上,使用已造好的轮子vue-video-player

2,介绍

vue-video-player目前在Github上拥有3.9K的star,拥有一系列的监听和事件回调,自带有倍速,全屏,拖动进度条和音量调节等功能,很实用。

详细文档地址:vue-video-player文档

3,安装和使用

安装:

npm install vue-video-player --save

全局引入:

// main.js中
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

局部引入:

// 在组件中引入
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
// 注册
components: { videoPlayer }

HTML部分:

PS:classvjs-big-play-centered是播放按钮居中

<template>
	<div id="player">
		<video-player
			ref="videoPlayer"
			class="video-player vjs-big-play-centered"
			:playsinline="false"
			:options="playOptions"
			@ready="onPlayerReady"
			@play="onPlayerPlay($event)"
			@pause="onPlayerPause($event)"
			@ended="onPlayerEnd($event)"
		/>
	div>
template>

less部分:

#player{
	width: 1000px;
	height: 500px;
	margin: 0 auto;
}

事件部分:

methods: {
	// 准备好了
	onPlayerReady(v) {
		console.log(1)
		console.log(v)
	},
	// 播放了
	onPlayerPlay(v) {
		console.log(2)
		console.log(v)
	},
	// 暂停了
	onPlayerPause(v) {
		console.log(3)
		console.log(v)
	},
	// 播放结束了
	onPlayerEnd(v) {
		console.log(4)
		console.log(v)
	}
}

效果图

Vue视频插件vue-video-player的使用_第1张图片
Vue视频插件vue-video-player的使用_第2张图片

后记

写完之后才发现DPlayer更好用,文档更全更好,懒得换了。


如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END

PS:在本页按F12,在console中输入document.querySelectorAll('.tool-item-href')[0].click(),有惊喜哦~

往期文章

  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 超详细!Vue-Router手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

你可能感兴趣的:(Vue3,vue.js,音视频)