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

相关文章

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f:字段选择-d:分隔符-c:字符选择-b:字节选择--c

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

springboot的调度服务与异步服务使用详解

《springboot的调度服务与异步服务使用详解》本文主要介绍了Java的ScheduledExecutorService接口和SpringBoot中如何使用调度线程池,包括核心参数、创建方式、自定... 目录1.调度服务1.1.JDK之ScheduledExecutorService1.2.spring

Java使用Tesseract-OCR实战教程

《Java使用Tesseract-OCR实战教程》本文介绍了如何在Java中使用Tesseract-OCR进行文本提取,包括Tesseract-OCR的安装、中文训练库的配置、依赖库的引入以及具体的代... 目录Java使用Tesseract-OCRTesseract-OCR安装配置中文训练库引入依赖代码实

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

Python使用Pandas对比两列数据取最大值的五种方法

《Python使用Pandas对比两列数据取最大值的五种方法》本文主要介绍使用Pandas对比两列数据取最大值的五种方法,包括使用max方法、apply方法结合lambda函数、函数、clip方法、w... 目录引言一、使用max方法二、使用apply方法结合lambda函数三、使用np.maximum函数

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

Qt 中集成mqtt协议的使用方法

《Qt中集成mqtt协议的使用方法》文章介绍了如何在工程中引入qmqtt库,并通过声明一个单例类来暴露订阅到的主题数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一,引入qmqtt 库二,使用一,引入qmqtt 库我是将整个头文件/源文件都添加到了工程中进行编译,这样 跨平台

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中,括号匹配是一个常见问题,尤其是在