1，前言

有些项目中，或者是视频网站，都需要视频播放功能。我们可以用H5的video标签实现播放，但是原生的样子视频播放器不太好看，功能也需要自己封装。这时候可以站在巨人的肩膀上，使用已造好的轮子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：class名vjs-big-play-centered是播放按钮居中

<template><div id="player"><video-playerref="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)}
}

效果图

后记

写完之后才发现DPlayer更好用，文档更全更好…

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

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

公众号

往期文章

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

个人主页

CSDN
GitHub
简书
博客园
掘金

Vue视频插件vue-video-player的使用相关推荐

Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,
1.安装vue视频插件解:百度一下,有很多教程,我这里不多说 2.问题:视频资源资源显示"X"号 1.首先你写好的要用视频的那块 < ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]
Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...
linux 视频插件,avpro video 插件-Avpro Video(Unity视频播放插件)下载 v1.039官方免费版--pc6下载站...
AvproVideo是一款由强大团队出品的可以在Unity上安装使用的万能多平台视频播放插件AvproVideo支持WindowslinuxiosmacAndroid等多平台万能播放.. 相关软件软件 ...
Unity播放带Alpha通道的视频【WebM+Video Player】（替代播放GIF方案）
在Unity中播放GIF或者动态效果,可以通过Video Player播放带透明通道的WebM视频来实现. 制作带Alpha的MOV视频制作带Alpha通道的MOV视频有多重方式,如AE.PR.PS ...
Vue视频插件（vue-video-player）
前言在新的项目中用到了大量的视频,由此也学习了一款vue的前端视频播放插件,接下来分享一下 vue-video-player安装 npm install vue-video-player --sav ...
安装vue浏览器插件-Vue.js devtools
一.进入github仓库:https://github.com/vuejs/devtools 可以下载zip包,也可以clone仓库.这里我下载的压缩包. 二.解压后,在终端进入文件夹路径. 解压后推 ...
专业音视频播放器：Elmedia Video Player Pro mac中文版
为大家推荐一款超级好用的苹果专用视频播放器,Elmedia Video Player Pro for Mac几乎支持所有的音视频格式,具备修改播放.流式传输.画中画.流传输视频到其他设备.彩色主题.观 ...
Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...

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

目录

1，前言

2，介绍

3，安装和使用

效果图

后记

Vue视频插件vue-video-player的使用相关推荐

最新文章

热门文章