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

相关文章

SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

《SpringBoot中使用ThreadLocal进行多线程上下文管理及注意事项小结》本文详细介绍了ThreadLocal的原理、使用场景和示例代码,并在SpringBoot中使用ThreadLo... 目录前言技术积累1.什么是 ThreadLocal2. ThreadLocal 的原理2.1 线程隔离2

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

Springboot 中使用Sentinel的详细步骤

《Springboot中使用Sentinel的详细步骤》文章介绍了如何在SpringBoot中使用Sentinel进行限流和熔断降级,首先添加依赖,配置Sentinel控制台地址,定义受保护的资源,... 目录步骤 1: 添加 Sentinel 依赖步骤 2: 配置 Sentinel步骤 3: 定义受保护的

Python中Markdown库的使用示例详解

《Python中Markdown库的使用示例详解》Markdown库是一个用于处理Markdown文本的Python工具,这篇文章主要为大家详细介绍了Markdown库的具体使用,感兴趣的... 目录一、背景二、什么是 Markdown 库三、如何安装这个库四、库函数使用方法1. markdown.mark

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加