vue中使用vue-video-player插件播放视频 以及 audio播放音频

本文主要是介绍vue中使用vue-video-player插件播放视频 以及 audio播放音频,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、使用vue-video-player插件播放视频

安装

  npm install vue-video-player --save

在main.js中引用

//引入视频播放插件
// main.js
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'Vue.use(VueVideoPlayer)

在组件中使用

<template><div class="playerBOx"><video-player ref="videoPlayer" class="player-video vjs-custom-skin" :playsinline="false" :options="playOptions"@play="onPlayerPlay($event)"  @ended="onPlayerEnd($event)"@waiting="onPlayerWaiting($event)" @timeupdate="onPlayerTimeupdate($event)"@statechanged="playerStateChanged($event)" /></div>
</template><script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'export default {components: {videoPlayer},props: {path: {  // 传入的地址type: String,default: "",},lastTime: {  // 传入的上次播放位置type: Number,default: 0,},videoType: {type: String,default: "",}},data() {return {playedTime: this.lastTime,currentTime: 0,maxTime: 0,playOptions: {playbackRates: [0.5, 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/${this.videoType}`, // 类型src: this.path, // url地址,在使用本地的资源时,需要用require()引入,否则控制台会报错},],poster: '', // 设置封面地址notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信width: 1900,controlBar: {currentTimeDisplay: true,progressControl: true,  // 是否显示进度条playbackRateMenuButton: true, // 是否显示调整播放倍速按钮timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: true, // 是否显示剩余时间功能fullscreenToggle: true, // 是否显示全屏按钮// volumeControl:true,},},}},computed: {},mounted() {},methods: {// 视频暂停的onPlayerPause(player) {// this.$refs.videoPlayer.player.pause() // 暂停},// 视频播放回调onPlayerPlay(player) {// this.$refs.videoPlayer.player.play() // 播放},// 视频播放完onPlayerEnd(player) {// this.$refs.videoPlayer.player.src(this.path) // 重置进度条复制代码console.log(player);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting(player) {console.log("播放停止中");},// 视频已开始播放onPlayerPlaying(player) {// console.log("开始播放了");// console.log(player);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata(player) {console.log("开始下载数据");},// 当前播放位置发生变化时触发onPlayerTimeupdate(player) {this.currentTime = player.currentTime();this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;},//播放状态改变playerStateChanged(playerCurrentState) {console.log("播放状态变化了");},},mounted() {},
};
</script><style lang="scss">
.playerBOx {width: 100%;height: 100%;margin: 0 auto;position: relative;
}.vjs-custom-skin>.video-js {width: 100% !important;height: 100% !important;
}.video-player {width: 100% !important;height: 100% !important;
}.vjs-fluid {padding-top: 0 !important;background-color: rgba(0, 0, 0, 0.45);
}.video-js {position: static !important;
}/*播放按钮设置成宽高一致,圆形,居中*/
.vjs-custom-skin>.video-js .vjs-big-play-button {background-color: rgba(0, 0, 0, 0.45);font-size: 3.5em;border-radius: 50%;height: 2em !important;line-height: 2em !important;margin-top: -1em !important;margin-left: -1em !important;width: 2em !important;outline: none;
}.video-js .vjs-big-play-button .vjs-icon-placeholder:before {position: absolute;left: 0;width: 100%;height: 100%;
}/*control-bar布局时flex,通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin>.video-js .vjs-control-bar .vjs-remaining-time {order: 3 !important;
}/*进度条背景轨道*/
.video-js .vjs-slider {border-radius: 1em;
}/*进度条进度*/
.vjs-custom-skin>.video-js .vjs-play-progress,
.vjs-custom-skin>.video-js .vjs-volume-level {border-radius: 1em;
}/*鼠标进入播放器后,播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button,
.vjs-custom-skin>.video-js .vjs-big-play-button:active,
.vjs-custom-skin>.video-js .vjs-big-play-button:focus {background-color: rgba(0, 0, 0, 0.4) !important;
}/*control bar*/
.video-js .vjs-control-bar {background-color: rgba(0, 0, 0, 0.2) !important;
}/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button {outline: none;
}
</style>

注意:使用vue-video-player组件播放视频,视频进度条不能点击不能拖动。点击或者拖动就会重新从头开始播放。

产生原因:

其实就是没有转成字节流,导致不能选择某个视频点

解决方案:让后端响应头添加如下

 二、audio播放音频

<template><div><div class="containeraudioBox"><div class="topAudioBox"><img src="../assets/close.png" alt="" @click="close"></div><div class="audioBox"><audioclass="audio":src="autioPath"autoplay="autoplay"controls="controls"ref="audio">音频</audio></div></div></div>
</template><script>export default {props: {autioPath: {  // 传入的地址type: String,default: "",},},data() {return {}},methods: {//点击关闭弹窗close(){//   this.playOptions.sources[0].src=''this.$refs.audio.pause()// 重置进度条复制代码this.$emit('closeVideo',false)}, //  //播放组件// handlePlay(row) {// this.src = row.filePath;// this.play();// },// //播放// play() {// this.dialogVisible = true;// this.$refs.audio.play();// },// //音频暂停// stop() {// this.dialogVisible = false;// this.$refs.audio.pause();// this.$refs.audio.currentTime = 0;// }},mounted () {console.log(this.autioPath);;},    }
</script><style lang="scss">
.containeraudioBox{width: 100%;height:100vh;
}
.containeraudioBox .topAudioBox{height: 120px;width: 100%;position: relative;}.containeraudioBox .topAudioBox img{width: 30px;height: 30px;position: absolute;z-index: 9999;top: 60px;right: 180px;cursor: pointer;}
.audioBox{width: 100%;height:calc(100% - 90px);position: relative;
}
.audio{width: 60%;// height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>

这篇关于vue中使用vue-video-player插件播放视频 以及 audio播放音频的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1113898

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传