vue视频播放——vue-video-player

文章目录

一、安装
二、使用

一、安装

github地址

安装：

npm install vue-video-player --save

引入：

import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css'
//自定义样式
import '@/assets/styles/video.css'

样式文件（这个地方也可以写自己的默认样式）：

/* 视频开始的按钮样式 */
.video-js .vjs-big-play-button{border-width: 3px;border-color: rgb(255, 255, 255);border-style: solid;border-radius: 50%;left: 568px;top: 330px;width: 56px;height: 56px;background-color: rgba(0,0,0,0);line-height: 50px;
}/* 视频的高度 */
.vjs_video_3-dimensions{height: 667px;
}/* 滚动条的样式 */
.video-js .vjs-control-bar{background-color: rgba(43, 51, 63, 0);
}.video-js .vjs-play-progress{background-color: rgb(238,191,0);
}.video-js .vjs-load-progress div{background-color: rgb(255, 255, 255);
}

二、使用

template部分：

<video-playerclass="video-player-box"ref="videoPlayer":options="playerOptions":playsinline="true"customEventName="customstatechangedeventname"@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>

js部分:

export default {name: "", data() {return { playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: false, // 如果true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",// aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）// fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目src: "", // url地址},],// hls: true,// poster: "http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg", // 你的封面地址notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, //时间分割线durationDisplay: true, //总时间remainingTimeDisplay: true, //剩余播放时间progressControl: true, // 进度条fullscreenToggle: true, // 全屏按钮},}};},mounted() {},computed: {player() {return this.$refs.videoPlayer.player;},},methods: {//关闭当前播放的视频handleCloseScreen() {this.$refs.videoPlayer.player.src(this.playerOptions.sources[0].src);this.videoShow = false;},// 播放回调onPlayerPlay(player) {console.log("player play!", player);},// 暂停回调onPlayerPause(player) {console.log("player pause!", player);},// 视频播完回调onPlayerEnded(player) {console.log("player end!", player);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting(player) {// console.log(player);},// 已开始播放回调onPlayerPlaying(player) {// console.log(player);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata(player) {// console.log(player);},// 当前播放位置发生变化时触发。onPlayerTimeupdate(player) {// console.log(player);},//媒体的readyState为HAVE_FUTURE_DATA或更高onPlayerCanplay(player) {// console.log('player Canplay!', player)},//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。onPlayerCanplaythrough(player) {// console.log('player Canplaythrough!', player)},//播放状态改变回调playerStateChanged(playerCurrentState) {console.log("player current update state", playerCurrentState);},//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。playerReadied(player) {console.log("example player 1 readied", player);},//打开视频播放handleOpenVideo(currentURL, title) {this.$refs.videoPlayer.player.play();}},
};

参考链接1（侵删）

参考链接2（侵删）

vue视频播放——vue-video-player相关推荐

使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...
Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
html5视频播放器video player 选择
为什么80%的码农都做不了架构师?>>> 网上能找到的好的支持html5的视频播放器非常有限,研究了几个还可以的,发现都有这样或者那样的问题,不是不给源代码,就是不支持全屏播放,要么 ...
Vue如何使用video标签实现视频播放
Vue如何使用video标签实现视频播放具体内容如下 **项目需求:**动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue ...
比心app源码，vue 视频播放
比心app源码,vue 视频播放实现的相关代码安装 npm i vue-video-player -S 引入 import { videoPlayer } from 'vue-video-playe ...
vue 视频播放(使用vue-video-player)
vue 视频播放(使用vue-video-player) 安装 npm i vue-video-player -S 引入 import { videoPlayer } from 'vue-video- ...
vue 视频播放插件vue-video-player的使用
文章目录视频播放部分实时弹幕部分视频播放部分安装依赖 yarn add vue-video-player main.js引入 import VideoPlayer from 'vue-vide ...
vue 视频播放插件VideoPlayer
vue 视频播放插件VideoPlayer 1.npm install vue-video-player --save 2.main.js引入 import VideoPlayer from 'vue ...
vue 视频直播video.js
video.js 在 Vue 中应用我们做的直播项目用 Vue 编写,后台主要输出 RTMP 和 HLS 的直播流播放器使用的是 vue-video-player,其实就是 video.js 集成 ...

vue视频播放——vue-video-player

文章目录

一、安装

二、使用

vue视频播放——vue-video-player相关推荐

最新文章

热门文章