From fc1591b18cad18680e879a6df711bcac62d5d15f Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 26 Sep 2023 16:39:47 +0800
Subject: [PATCH] 视频播放控件配置
---
src/components/MediaPanel.vue | 198 ++++++++++++++++++++++++++-----------------------
1 files changed, 106 insertions(+), 92 deletions(-)
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index a20952c..96d275c 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -1,97 +1,98 @@
<template>
<!-- <div class="header">媒体文件</div>-->
<!--搜索栏-->
- <div class="search-panel-wrapper">
- <div class="search-part">
- <a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat"
- :valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data"
- @change="dateChange" style="width: 300px"/>
- </div>
-
- <div class="search-part">
- <a-select v-model:value="subFileTypeArr" allowClear @change="subFileTypeChange" :options="subFileTypeOptions"
- :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
- :size="searchPanelOptions.size" placeholder="所有类型" style="width: 300px">
- </a-select>
- </div>
-
- <div class="search-part">
- <a-select v-model:value="payloadArr" allowClear @change="payloadChange" :options="payloadOptions"
- :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
- :size="searchPanelOptions.size" placeholder="所有负载" style="width: 300px">
- </a-select>
- </div>
-
- <div class="search-part">
- <a-input-search :size="searchPanelOptions.size" v-model:value="searchQuery.name" @change="inputChange"
- placeholder="按文件名称搜索" style="width: 300px"/>
- </div>
-
+ <div class="search-panel-wrapper">
+ <div class="search-part">
+ <a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat"
+ :valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data"
+ @change="dateChange" style="width: 300px"/>
</div>
- <div class="button-wrapper">
- <a-button type="primary" @click="compress">压缩打包</a-button>
+ <div class="search-part">
+ <a-select v-model:value="subFileTypeArr" allowClear @change="subFileTypeChange" :options="subFileTypeOptions"
+ :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
+ :size="searchPanelOptions.size" placeholder="所有类型" style="width: 300px">
+ </a-select>
</div>
- <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large">
- <div class="media-panel-wrapper">
- <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint" rowKey="file_id" :row-selection="rowSelection"
- :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
- <template v-for="col in ['name']" #[col]="{text, record}" :key="col">
+ <div class="search-part">
+ <a-select v-model:value="payloadArr" allowClear @change="payloadChange" :options="payloadOptions"
+ :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
+ :size="searchPanelOptions.size" placeholder="所有负载" style="width: 300px">
+ </a-select>
+ </div>
- <div>
- <a-input
- v-if="editableData[record.file_id]"
- v-model:value="editableData[record.file_id]['file_name']"
- style="margin: -5px 0"
- />
- <template v-else>
- <a-tooltip :title="text">
- <a @click="viewFile(record.object_key)">{{ text }}</a>
- </a-tooltip>
- </template>
+ <div class="search-part">
+ <a-input-search :size="searchPanelOptions.size" v-model:value="searchQuery.name" @change="inputChange"
+ placeholder="按文件名称搜索" style="width: 300px"/>
+ </div>
+
+ </div>
+
+ <div class="button-wrapper">
+ <a-button type="primary" @click="compress">压缩打包</a-button>
+ </div>
+
+ <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large">
+ <div class="media-panel-wrapper">
+ <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint"
+ rowKey="file_id" :row-selection="rowSelection"
+ :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
+ <template v-for="col in ['name']" #[col]="{text, record}" :key="col">
+
+ <div>
+ <a-input
+ v-if="editableData[record.file_id]"
+ v-model:value="editableData[record.file_id]['file_name']"
+ style="margin: -5px 0"
+ />
+ <template v-else>
+ <a-tooltip :title="text">
+ <a @click="viewFile(record.object_key)">{{ text }}</a>
+ </a-tooltip>
+ </template>
+ </div>
+
+ </template>
+ <template #original="{ text }">
+ {{ text }}
+ </template>
+ <template #action="{ record }">
+
+ <div class="editable-row-operations">
+ <!-- 编辑态操作 -->
+ <div v-if="editableData[record.file_id]">
+ <a-tooltip title="保存">
+ <span @click="save(record)" style="color: #28d445;"><CheckOutlined/></span>
+ </a-tooltip>
+ <a-tooltip title="取消">
+ <span @click="() => delete editableData[record.file_id]" style="color: #e70102;"><CloseOutlined/></span>
+ </a-tooltip>
</div>
+ <!-- 非编辑态操作 -->
+ <div v-else class="flex-align-center flex-row" style="color: #2d8cf0">
+ <a-tooltip title="下载">
+ <a class="fz18" @click="downloadMedia(record)">
+ <DownloadOutlined/>
+ </a>
+ </a-tooltip>
- </template>
- <template #original="{ text }">
- {{ text }}
- </template>
- <template #action="{ record }">
-
- <div class="editable-row-operations">
- <!-- 编辑态操作 -->
- <div v-if="editableData[record.file_id]">
- <a-tooltip title="保存">
- <span @click="save(record)" style="color: #28d445;"><CheckOutlined/></span>
- </a-tooltip>
- <a-tooltip title="取消">
- <span @click="() => delete editableData[record.file_id]" style="color: #e70102;"><CloseOutlined/></span>
- </a-tooltip>
- </div>
- <!-- 非编辑态操作 -->
- <div v-else class="flex-align-center flex-row" style="color: #2d8cf0">
- <a-tooltip title="下载">
- <a class="fz18" @click="downloadMedia(record)">
- <DownloadOutlined/>
- </a>
- </a-tooltip>
-
- <a-tooltip title="编辑">
- <a class="fz18" @click="edit(record)">
- <EditOutlined />
- </a>
- </a-tooltip>
- </div>
+ <a-tooltip title="编辑">
+ <a class="fz18" @click="edit(record)">
+ <EditOutlined/>
+ </a>
+ </a-tooltip>
</div>
+ </div>
- </template>
- </a-table>
- </div>
- </a-spin>
-
- <div @click.self="showVideo = false" v-if="showVideo" class="modal">
- <video class="video-js" :id="videoPlayerId"></video>
+ </template>
+ </a-table>
</div>
+ </a-spin>
+
+ <div @click.self="showVideo = false" v-if="showVideo" class="modal">
+ <video class="video-js" :id="videoPlayerId"></video>
+ </div>
</template>
@@ -129,6 +130,7 @@
dateFormat: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD'
})
+
interface MediaFile {
fingerprint: string,
drone: string,
@@ -138,7 +140,7 @@
file_path: string,
create_time: string,
file_id: string,
- object_key:string
+ object_key: string
}
const subFileTypeOptions = [
@@ -241,7 +243,7 @@
})
}
-function viewFile (objectKey:string) {
+function viewFile (objectKey: string) {
const ext = objectKey.split('.')[1]
const fileType = getFileType(ext)
let url = ''
@@ -256,7 +258,7 @@
}
}
-function getFileType (ext:string) {
+function getFileType (ext: string) {
// 获取类型结果
let result = ''
// fileName无后缀返回 false
@@ -317,23 +319,35 @@
return 'other'
}
-function viewImage (url:string) {
+function viewImage (url: string) {
viewerApi({
images: [url]
})
}
-async function viewVideo (url:string) {
+async function viewVideo (url: string) {
showVideo.value = true
await nextTick()
const player = videojs(videoPlayerId.value, {
- autoplay: true,
- controls: true,
+ autoplay: true, // 自动播放
+ controls: true, // 控件 设置为true，控件才会显示
+ fullscreenToggle: true, // 是否显示全屏按钮
+ playToggle: true, // 是否显示播放按钮
+ progressControl: true, // 是否显示进度条。除了boolean，还可以设置一个ProgressControlOptions对象，更详细的配置进度条。
+ volumePanel: true, // 是否显示音量。除了boolean，还可以设置一个VolumePanelOptions对象，更详细的配置音量组件。
+ pictureInPictureToggle: false, // 是否显示画中画按钮
+ remainingTimeDisplay: true, // 是否显示时长
+
})
player.src(url)
player.on('ended', () => {
showVideo.value = false
+ })
+
+ player.on('error', () => {
+ const error = player.error()
+ console.log('video error:' + error.code + '-' + error.message)
})
}
@@ -366,7 +380,7 @@
}
// 获取文件的blob
-function getFile (url:string, name:string) {
+function getFile (url: string, name: string) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
@@ -482,7 +496,7 @@
}
-.button-wrapper{
+.button-wrapper {
background: #ffffff;
padding-left: 20px;
}
@@ -493,7 +507,7 @@
}
}
-.modal{
+.modal {
position: absolute;
top: 0;
left: 0;
@@ -504,7 +518,7 @@
align-items: center;
justify-content: center;
- #videoPlayerId{
+ #videoPlayerId {
width: 70%;
height: 80%;
}
--
Gitblit v1.9.3