vue-video-player文档_【视频组件】vue-video-player的使用
效果图:
一、安装
npm install vue-video-player -S
npm install 'video.js' -S
二、导入
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
// require('video.js/dist/video-js.css') //按官网引会找不到然后报错,换成下面那个
require('vue-video-player/node_modules/video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
三、使用
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="options"
@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"
>
1.事件函数:
@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"
2.控制函数
this.options['sources'][0]['src'] = '接口地址'; //重新赋值视频地址
this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条
3.常用属性
options: {
playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
autoplay: true, // 是否自动播放
muted: false, // 是否静音
loop: true, // 是否开启循环播放
preload: "auto", // 自动预加载
language: "zh-CN", // 语言,'en', 'zh-cn', 'zh-tw'
aspectRatio: "16:9", // 播放器高宽占比(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: "video/mp4", // 类型
src:
"https://mp4i.vodfile.m1905.com/202011280727/c884af78f3467d3e7d65804b40c74771/video/2020/11/26/v20201126Z7OID3M29Z1FF6G3/v20201126Z7OID3M29Z1FF6G3.mp4", // url地址
},
],
poster:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606462956126&di=2d87964d4faf656af55d09d938640d97&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201310%2F10%2F150326y7dzdd8d4kpjjdsd.jpg", // 封面地址
notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 是否显示当前时间和持续时间的分隔符,"/"
durationDisplay: true, // 是否显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间
fullscreenToggle: true, // 是否显示全屏按钮
},
},
4.回调方法
// 播放回调
onPlayerPlay($event) {
console.log("player play!", $event);
},
// 暂停回调
onPlayerPause($event) {
console.log("player pause!", $event);
},
// 视频播完回调
onPlayerEnded($event) {
console.log($event);
},
// DOM元素上的readyState更改导致播放停止
onPlayerWaiting($event) {
console.log($event);
},
// 已开始播放回调
onPlayerPlaying($event) {
console.log($event);
},
// 当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata($event) {
console.log($event);
},
// 当前播放位置发生变化时触发。
onPlayerTimeupdate($event) {
console.log($event);
},
//媒体的readyState为HAVE_FUTURE_DATA或更高
onPlayerCanplay($event) {
// console.log('player Canplay!', player)
},
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onPlayerCanplaythrough($event) {
// console.log('player Canplaythrough!', player)
},
//播放状态改变回调
playerStateChanged($event) {
console.log("player current update state", $event);
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
playerReadied() {
console.log("example player 1 readied");
},
5.相关地址
6.完整代码
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="options"
@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"
>
import Vue from "vue";
import VideoPlayer from "vue-video-player";
// require('video.js/dist/video-js.css') //按官网引会找不到然后报错
require("vue-video-player/node_modules/video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
Vue.use(VideoPlayer);
export default {
name: "my_video",
props: {},
data() {
return {
options: {
playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
autoplay: true, // 是否自动播放
muted: false, // 是否静音
loop: true, // 是否开启循环播放
preload: "auto", // 自动预加载
language: "zh-CN", // 语言,'en', 'zh-cn', 'zh-tw'
aspectRatio: "16:9", // 播放器高宽占比(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: "video/mp4", // 类型
src:
"https://mp4i.vodfile.m1905.com/202011280727/c884af78f3467d3e7d65804b40c74771/video/2020/11/26/v20201126Z7OID3M29Z1FF6G3/v20201126Z7OID3M29Z1FF6G3.mp4", // url地址
},
],
poster:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606462956126&di=2d87964d4faf656af55d09d938640d97&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201310%2F10%2F150326y7dzdd8d4kpjjdsd.jpg", // 封面地址
notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 是否显示当前时间和持续时间的分隔符,"/"
durationDisplay: true, // 是否显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间
fullscreenToggle: true, // 是否显示全屏按钮
},
},
};
},
methods: {
// 播放回调
onPlayerPlay($event) {
console.log("player play!", $event);
},
// 暂停回调
onPlayerPause($event) {
console.log("player pause!", $event);
},
// 视频播完回调
onPlayerEnded($event) {
console.log($event);
},
// DOM元素上的readyState更改导致播放停止
onPlayerWaiting($event) {
console.log($event);
},
// 已开始播放回调
onPlayerPlaying($event) {
console.log($event);
},
// 当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata($event) {
console.log($event);
},
// 当前播放位置发生变化时触发。
onPlayerTimeupdate($event) {
console.log($event);
},
//媒体的readyState为HAVE_FUTURE_DATA或更高
onPlayerCanplay($event) {
// console.log('player Canplay!', player)
},
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onPlayerCanplaythrough($event) {
// console.log('player Canplaythrough!', player)
},
//播放状态改变回调
playerStateChanged($event) {
console.log("player current update state", $event);
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
playerReadied() {
console.log("example player 1 readied");
},
},
};
.my_video {
width: 1000px;
height: 800px;
margin: 0 auto;
text-align: center;
}
vue-video-player文档_【视频组件】vue-video-player的使用相关推荐
- chrome vue.js插件文档_常用web研发技术文档,这里都给你准备好了
研发学习,工作过程中,技术文档是重要的工具之一,但是不少同学使用文档的姿势有点问题,遇到问题就一顿百度,拿着很多不一定对的博客文章翻来翻去还找不到答案,反而浪费了很多时间,我觉得解决日常问题更高效的方 ...
- chrome vue.js插件文档_神级宝库!GitHub 标星 1.2w+,Chrome 最天秀的插件都在这里啦!...
文章来源:Python空间 作者:Rocky0429 作为一个在远古时代用过什么 IE.360.猎豹等浏览器的资深器哥,当我第一次了解 Chrome 的时候,就被它的美貌给吸引住了... 就在我用了一 ...
- chrome vue.js插件文档_前端开发者必备的40个VSCode插件!
前言:俗话说"君欲善其事,必先利其器."笔者也使用VScode开发有一段时间了,不得不说,VSCode是我目前用到的众多开发工具中最好使用的一款.当然这些功能大多得归功于VSCod ...
- vue process.env获取不到_从文档开始,重学vue(下)源码级别
此篇文章主要是从应用及源码层面讲解vue部分常用api,阅读起来可能略有难度,新手可以看<从文档开始,重学vue(上)> 示例代码均在vue-cli3中完成 Vue.extend() 可以 ...
- hive hql文档_大数据学习不能停,看看如何安装hive快800倍!共572.91M视频文档
前言 hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行. 其优点是学习成本低,可 ...
- vue-video-player文档_基于vue-video-player自定义播放器的方法
基于vue-video-player自定义播放器的方法 发布时间:2019-01-07 发布网站:编程之家 编程之家收集整理的这篇文章主要介绍了基于vue-video-player自定义播放器的方法, ...
- vue 导出word文档(包括图片)
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
- vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印(三)
目录 前言 一.自定义页眉内容 二.分页文档打印 1.加入分页符 2.打印方法 3.打印模块完整代码 总结 前言 随着在线办公场景越来越多,同时需要各式各样办公软件,在开发时就用得到在线文档来内容指定 ...
- 编写文档_如何通过编写优质文档来使自己的未来快乐
编写文档 by Gabriele Cimato 加布里埃莱·西马托(Gabriele Cimato) 如何通过编写优质文档来使自己的未来快乐 (How to make your future self ...
- 什么插件格式化文档_推荐15款IntelliJ IDEA 神级插件
满满的都是干货 所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击完 ...
最新文章
- java最长回文子序列_LeetCode[5] - 最长回文子串动态规划
- Java之枚举----小试牛刀练习
- 【Android】 Android体系结构图
- pip升级后Import Error:cannot import name main解决方案
- 韩文博 php,No releases available for package pear.php.net/HTTP_Upload
- Java Servlet 编程,重定向介绍
- php添加用户信息进入数据库,dedecms用户将信息插入数据库
- windows 不能确定用户和计算机名称
- 实战CSS:静态百度首页实现
- 每天10个Linux命令五
- oracle技术之浅述当前模式读与一致性读
- 毕设项目 - 基于SSM的房屋租赁系统(含源码+论文)
- 笔记本用PCIE转并口卡连接H-JTAG烧写PXA270 NOR Flash
- 经典管理学定律4 - 鲶鱼效应
- 2017年大数据从业者又要涨工资了!
- 中鑫吉鼎|大学生的理财攻略有哪些
- 简单的网页制作期末作业——电影泰坦尼克号(4页)
- 葡聚糖修饰金纳米颗粒(Dex-AuNps)|聚环氧氯丙烷二甲胺修饰多孔磁性葡聚糖微球
- Excel按不同的字体颜色对数据区域分类汇总求和
- 股票python量化交易010-JQData财务指标
热门文章
- A Survey on Transfer Learning 总结
- 电脑与云服务器传输文件,电脑与云服务器传输文件
- 2021年山东省职业院校技能大赛 中职组“网络搭建与应用”赛项 (正式赛题)
- [Qt]QMainWindow
- 十六进制和十进制有符号数转换
- 高考数学中含有导函数与原函数方程的题目
- 学习EasyExcel实现excel文件的批量上传的笔记
- 修改Config文件
- 我的世界java版存档转基岩版_我的世界基岩版与java版存档互转
- 监控易火星版纳管IPv6:IP地址管理V2.0的进化之路