添加视频删除功能，修改视频播放功能
This commit is contained in:
junleea
parent
9f6251ff1a
commit
0471fd0169
|
|
@ -15,6 +15,14 @@ export const delayVideoService = (data) => {
|
|||
return request2.post('/video/delay', params, { headers : {'token': data.token }});
|
||||
}
|
||||
|
||||
export const deleteVideoService = (data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in data) {
|
||||
params.append(key, data[key])
|
||||
}
|
||||
return request2.post('/video/delete', params, { headers : {'token': data.token }});
|
||||
}
|
||||
|
||||
export const quashVideoService = (data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in data) {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ import App from './App.vue'
|
|||
import router from '@/router'
|
||||
import globalData from '@/utils/global.js'
|
||||
import Menu from '@/views/Menu.vue'
|
||||
// import VideoPlayer from '@/views/Video.vue'
|
||||
|
||||
const app=createApp(App);
|
||||
app.component('Menu',Menu);
|
||||
// app.component('VideoPlayer',VideoPlayer);
|
||||
app.provide('globalData',globalData);
|
||||
|
||||
app.use(router).use(ElementPlus).mount('#app');
|
||||
|
|
|
|||
|
|
@ -331,7 +331,7 @@ export default {
|
|||
</el-form-item>
|
||||
<el-form-item label="外部回调Token" prop="device_status">
|
||||
<el-input v-model="updateForm.cidtoken" style="width: 600px" />
|
||||
回调地址：https://gep.ljsea.xyz/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
|
||||
回调地址：https://{{tokenData.server}}/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="定时执行时间" prop="time">
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const videoPlayer = ref(null);
|
|||
const myPlayer = ref(null);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
console.log("video player")
|
||||
if(localStorage.getItem('token')===null) {
|
||||
router.push("/login");
|
||||
}
|
||||
|
|
@ -60,8 +61,8 @@ onUnmounted(() => {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.video_wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 50vw;
|
||||
height: 60vh;
|
||||
position: relative;
|
||||
|
||||
.backIndex {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,30 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import { getVideoListService, quashVideoService } from "@/api/video.js";
|
||||
import {
|
||||
getVideoListService,
|
||||
quashVideoService,
|
||||
deleteVideoService,
|
||||
} from "@/api/video.js";
|
||||
import { delayVideoService } from "@/api/video.js";
|
||||
import router from "@/router/index.js";
|
||||
import Cookies from "js-cookie";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ElMessage } from "element-plus";
|
||||
import Menu from "@/views/Menu.vue";
|
||||
import VideoPlayer from "@/views/Video.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VideoPlayer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ip: "",
|
||||
tableData: [],
|
||||
file_sum_size: 0,
|
||||
dialogVisible: false,
|
||||
playing_video : "",
|
||||
tokenData: {
|
||||
id: -1,
|
||||
token: localStorage.getItem("token"),
|
||||
ip: localStorage.getItem("ip"),
|
||||
userId: localStorage.getItem("userId"),
|
||||
|
|
@ -45,11 +56,11 @@ export default {
|
|||
console.log(e);
|
||||
}
|
||||
let data = result.data;
|
||||
let len = data?data.length:0;
|
||||
let len = data ? data.length : 0;
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
//this.file_sum_size += parseFloat(data[i].file_size);
|
||||
data[i].FileSize = parseFloat(data[i].FileSize/ 1024 / 1024).toFixed(
|
||||
data[i].FileSize = parseFloat(data[i].FileSize / 1024 / 1024).toFixed(
|
||||
2
|
||||
);
|
||||
}
|
||||
|
|
@ -66,13 +77,13 @@ export default {
|
|||
},
|
||||
async quashOption() {
|
||||
// 撤销操作
|
||||
let result=await quashVideoService(this.tokenData);
|
||||
let result = await quashVideoService(this.tokenData);
|
||||
if (result.code == 0) {
|
||||
//alert(result.message);
|
||||
ElMessage.success("操作成功！"+result.message);
|
||||
ElMessage.success("操作成功！");
|
||||
this.getVideoList();
|
||||
} else {
|
||||
alert("操作失败");
|
||||
ElMessage.error("操作失败！");
|
||||
}
|
||||
},
|
||||
onSubmit() {
|
||||
|
|
@ -85,12 +96,37 @@ export default {
|
|||
alert("页码发生变化" + val);
|
||||
},
|
||||
playVideo(index) {
|
||||
this.dialogVisible = true;
|
||||
// localStorage.setItem("is_to_play", "1");
|
||||
var id = this.tableData[index].ID;
|
||||
var name = this.tableData[index].VideoName;
|
||||
localStorage.setItem("video_id", id);
|
||||
localStorage.setItem("video_name", name);
|
||||
//alert("id=" + id + " name=" + name);
|
||||
router.push("/video");
|
||||
this.playing_video = "id: " + id + " ; name: " + name;
|
||||
components.updated();
|
||||
// //alert("id=" + id + " name=" + name);
|
||||
//router.push("/video");
|
||||
},
|
||||
async deleteVideo(index) {
|
||||
//判断是否删除
|
||||
if (!confirm("是否删除？")) {
|
||||
return;
|
||||
}
|
||||
var id = this.tableData[index].ID;
|
||||
let req = {
|
||||
id: id,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
type: "del_with_logic",
|
||||
};
|
||||
let result = await deleteVideoService(req);
|
||||
if (result.code == 0) {
|
||||
//alert(result.message);
|
||||
ElMessage.success("操作成功！");
|
||||
this.getVideoList();
|
||||
} else {
|
||||
ElMessage.error("操作失败!");
|
||||
}
|
||||
},
|
||||
async downloadVideo(index) {
|
||||
var id = this.tableData[index].ID;
|
||||
|
|
@ -136,7 +172,7 @@ export default {
|
|||
URL.revokeObjectURL(videoUrl);
|
||||
} catch (error) {
|
||||
console.error("下载视频时发生错误:", error);
|
||||
ElMessage.error("下载视频时发生错误")
|
||||
ElMessage.error("下载视频时发生错误");
|
||||
}
|
||||
},
|
||||
async delayVideo(index) {
|
||||
|
|
@ -222,7 +258,6 @@ export default {
|
|||
// console.log("entrydate:",Cookies.get("entrydate"));
|
||||
// this.tokenData.entrydate = [Object(Cookies.get("entrydate")[0]),Object(Cookies.get("entrydate")[1])];
|
||||
// }
|
||||
|
||||
this.getVideoList();
|
||||
},
|
||||
};
|
||||
|
|
@ -279,6 +314,13 @@ export default {
|
|||
</el-select>
|
||||
|
||||
<el-form-item>
|
||||
指定视频ID:
|
||||
<el-col :span="8">
|
||||
<el-input
|
||||
placeholder="指定视频ID"
|
||||
v-model="tokenData.id"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-button type="primary" @click="getVideoList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -299,6 +341,20 @@ export default {
|
|||
</el-form-item> -->
|
||||
</el-form>
|
||||
|
||||
|
||||
<el-dialog
|
||||
title="视频播放"
|
||||
v-model="dialogVisible"
|
||||
width="60%"
|
||||
height="60%"
|
||||
center
|
||||
>
|
||||
<div>
|
||||
视频播放({{playing_video }})：
|
||||
<VideoPlayer v-if="dialogVisible"></VideoPlayer>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 表格 :row-style="this.tableRowClassName"-->
|
||||
<el-table :data="tableData" width="100%" border>
|
||||
:row-style="this.tableRowClassName"
|
||||
|
|
@ -316,17 +372,17 @@ export default {
|
|||
<el-table-column
|
||||
prop="CreateTime"
|
||||
label="开始时间"
|
||||
width="180"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="EndTime"
|
||||
label="结束时间"
|
||||
width="180"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="DeleteTime"
|
||||
label="预期删除时间"
|
||||
width="180"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="FileSize"
|
||||
|
|
@ -338,7 +394,7 @@ export default {
|
|||
label="摄像头"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" width="300">
|
||||
<el-table-column label="操作" width="330">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
|
|
@ -358,6 +414,12 @@ export default {
|
|||
@click.prevent="downloadVideo(scope.$index)"
|
||||
>下载</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click.prevent="deleteVideo(scope.$index)"
|
||||
>删除</el-button
|
||||
>
|
||||
|
||||
<!-- <el-button type="danger" size="mini">删除</el-button> -->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,113 @@
|
|||
<template>
|
||||
<div>
|
||||
<video ref="videoPlayer" class="video-js"></video>
|
||||
<div class="video_wrap">
|
||||
<video
|
||||
width="100%"
|
||||
height="100%"
|
||||
ref="videoPlayer"
|
||||
muted="muted"
|
||||
class="video-js video"
|
||||
></video>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videojs from 'video.js';
|
||||
<script setup>
|
||||
import { onUnmounted, ref, nextTick } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import videojs from "video.js";
|
||||
import "video.js/dist/video-js.css";
|
||||
|
||||
export default {
|
||||
name: 'VideoPlayer',
|
||||
props: {
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
const videoPlayer = ref(null);
|
||||
const myPlayer = ref(null);
|
||||
|
||||
export default {
|
||||
name: "VideoPlayer",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
player: null
|
||||
},
|
||||
methods: {
|
||||
playVideoA(){
|
||||
nextTick(() => {
|
||||
myPlayer.value = videojs(videoPlayer.value, {
|
||||
// poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
|
||||
controls: true, //视频控件
|
||||
autoplay: true, //自动播放
|
||||
sources: [
|
||||
{
|
||||
src:
|
||||
"https://gep.ljsea.top/video/mp4?filename=" +
|
||||
localStorage.getItem("video_name") +
|
||||
"&id=" +
|
||||
localStorage.getItem("video_id") +
|
||||
"&ip=" +
|
||||
localStorage.getItem("ip")+
|
||||
"&userId=" +
|
||||
localStorage.getItem("userId") +
|
||||
"&token=" +
|
||||
localStorage.getItem("token"), //视频地址
|
||||
type: localStorage.getItem("video_name").split('.')[1]==="m3u8" ?"application/vnd.apple.mpegurl":"video/mp4",
|
||||
},
|
||||
],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: {
|
||||
displayNegative: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.player = videojs(this.$refs.videoPlayer, this.options, () => {
|
||||
this.player.log('onPlayerReady', this);
|
||||
playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.player) {
|
||||
this.player.dispose();
|
||||
onMounted(){
|
||||
this.playVideoA();
|
||||
},
|
||||
onUnmounted(){
|
||||
if (myPlayer.value) {
|
||||
myPlayer.value.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// export default VideoPlayer;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video_wrap {
|
||||
width: "80%";
|
||||
height: "80%";
|
||||
position: relative;
|
||||
|
||||
.backIndex {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
line-height: 50px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
padding-left: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
</script>
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep(.vjs-big-play-button) {
|
||||
margin-left: 45%;
|
||||
margin-top: 20%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue