Video标签自定义简易视频播放器

提示：以下是本篇文章正文内容，下面案例可供参考

一、Dom结构

<template><el-dialog :title="winTitle" :close-on-click-modal="false" :visible="dialogVisible" width="44%"@close="cancel"><div class="main-content"><header class="header-content" style="background: #0F6668;"><span style="margin-left: 10px">{{ rowData.cameraName }}</span><i class="el-icon-full-screen" style="float: right; cursor: pointer; line-height: inherit; margin-right: 10px" @click="fullScreen"></i></header><div class="video-content"><video ref="video" :src="rowData.filePath" preload="auto" style="width: 100%; height: 100%" @canplay="getVideo" @timeupdate="updateProgress"></video></div><footer class="footer-content"><div class="footer-div" style="width: 40px; height: 40px"><span :class="[isPause ? 'el-icon-video-play' : 'el-icon-video-pause']" style="font-size: 40px; cursor: pointer" @click="start(isPause)"></span></div><div><span style="display: inline-block; width: 16px; height: 16px; cursor: pointer; background-color: #BF2613" @click="reStart"></span></div><div class="footer-div"><span class="el-icon-caret-left caret-span" @click="goBack"></span><span style="vertical-align: super">{{ timeTitle }}</span><span class="el-icon-caret-right caret-span" @click="goFront"></span></div><div class="footer-div progress"><el-slider v-model="percent":show-tooltip="false"@change="changePercent"@mousedown.native="progressState = true"@mouseup.native="progressState = false"></el-slider></div><div class="footer-div"><span> {{ currentTime }} </span> /<span> {{ duration }} </span></div></footer></div></el-dialog>
</template>

二、JS

<script>export default {name: 'VideoFileWindow',props: ['winTitle', 'dialogVisible', 'rowData'],data() {return {isPause: true,duration: '00:00:00',currentTime: '00:00:00',timeTitle: '',percent: 0,progressState: false}},computed: {},mounted() {},methods: {/*** 全屏* */fullScreen() {let el = this.$refs.video;if (el.requestFullscreen) {el.requestFullscreen();} else if (el.msRequestFullscreen) {el.msRequestFullscreen();} else if (el.mozRequestFullScreen) {el.mozRequestFullScreen();} else if (el.webkitRequestFullscreen) {el.webkitRequestFullscreen();} else {console.log('不支持全屏!');}},/*** 开始/暂停* */start(flag) {let video = this.$refs.video;flag ? video.play() : video.pause();this.isPause = !flag;},/*** 重播* */reStart() {let video = this.$refs.video;video.currentTime = 0;video.pause();this.isPause = true;},/*** 快进* */goFront() {let video = this.$refs.video;video.currentTime += 10;this.timeTitle = '快进10S';},/*** 快退* */goBack() {let video = this.$refs.video;video.currentTime -= 10;this.timeTitle = '快退10S';},/*** 视频加载完成* */getVideo() {this.duration = this.timeFormat(this.$refs.video.duration);},/***视频进度更新* */updateProgress() {if (!this.progressState) {let current = this.$refs.video.currentTime;let total = this.$refs.video.duration;this.currentTime = this.timeFormat(this.$refs.video.currentTime);this.percent = current / total * 100;current === total ? this.isPause = true : '';}},/*** 拖动进度条* */changePercent(data) {let total = this.$refs.video.duration;this.$refs.video.currentTime = total * data / 100;},/*** 取消操作* */cancel() {this.$emit('closeWin');},/*** 秒数转换为时分秒* @param time* @returns {string}*/timeFormat(time) {// 转换为式分秒let h = parseInt(time / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(time / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(time % 60)s = s < 10 ? '0' + s : s// 作为返回值返回return h + ':' + m + ':' + s;}}}
</script>

三、CSS

<style scoped>.main-content {background: #000000;border: 1px solid #196C71;height: 100%;}.header-content {height: 34px;font-size: 17px;font-family: Source Han Sans CN;font-weight: 500;color: #62FCFA;line-height: 37px;}.video-content {width: 100%;height: calc(90% - 34px);}.footer-content {width: 100%;height: 10%;background: #14738A;display: flex;justify-content: space-evenly;align-items: center;}.footer-div {font-size: 16px;font-family: Source Han Sans CN;font-weight: 500;color: #FFFFFF;line-height: 36px;}.caret-span {cursor: pointer;font-size: 30px;}.progress {width: 40%;}::v-deep .el-slider__bar {height: 15px;background: #59FF74;border-radius: 8px;}::v-deep .el-slider__runway {height: 15px;background: #FFFFFF;border-radius: 8px;}::v-deep .el-slider__button {transform: translateY(4px);background: #FFFFFF;border: 5px solid #59FF74;border-radius: 50%;}</style>

Video标签自定义简易视频播放器相关推荐

video标签学习 xgplayer视频播放器分段播放mp4
文章目录学习链接目标 video标签自带视频和制作的视频区别 video标签的src属性本地视频文件前端代码播放效果服务器视频文件示例1 后端代码前端代码播放效果示例2 后端代码 ...
video标签设计vue视频播放器组件
文章目录 1.video播放器组件设计 2.在弹窗中运用视频组件 3.小结 1.video播放器组件设计啥也别说了,上代码: <template> <div><meta ...
视频播放器+android,简易视频播放器
NetConnection 对象 0002 var netConnection:NetConnection=new NetConnection ; 0003 /*如果连接到没有使用服务器的 priva ...
Android的媒体播放器——简易视频播放器（详解）
一.案例效果二.主界面的设计与功能 2.1 案例效果 2.2 布局界面 activity_main.xml 参考代码: <?xml version="1.0" encodi ...
【基于QMediaPlayer的简易视频播放器】— 3、结合QSlider实现播放进度控制和音量控制
基于QMediaPlayer的简易视频播放器 1.创建基本布局 2.QMediaPlayer的基本使用 3.结合QSlider实现播放进度控制和音量控制 4.重载QSlider鼠标响应事件,实现单击跳 ...
【Java】简易视频播放器
[效果图] [功能] 1.当窗口获取焦点后,按空格暂停/播放 2.原速播放键.暂停/播放键.倍速播放键(最高3倍速,每次递增0.5) 3.进度条可点击选择播放位置 4.时间显示.播放速度显示 [项目与 ...
【Harmony OS】【ArkUI】ets开发简易视频播放器
前言:这一次我们来使用ets的Swiper组件.List组件和Video组件制作一个简易的视频播放器.本篇是以HarmonyOS官网的codelab简易视频播放器(eTS)为基础进行编写.本篇最主要的 ...
java视频播放器制作_java创建简易视频播放器
java创建简易视频播放器发布时间:2020-09-23 04:28:09 来源:脚本之家阅读:98 作者:南柯一梦xihe 最近有个多媒体的作业,要求使用visualC++和OpenCV编写一个 ...
视频播放页php,html jquery简易视频播放器
html jquery js 简易视频播放器直接上代码:html> Document #durationbar{ width: 500px; height: 20px; } #duration ...

Video标签自定义简易视频播放器

Video标签自定义简易视频播放器

一、Dom结构

二、JS

三、CSS

Video标签自定义简易视频播放器相关推荐

最新文章

热门文章