请求m3u8视频版本
This commit is contained in:
junleea
parent
c7b5f048d9
commit
7f2fdfcb48
|
|
@ -17,6 +17,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"sass": "^1.69.7",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
},
|
||||
|
|
@ -926,6 +927,19 @@
|
|||
"npm": ">=5"
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/async-validator": {
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
|
||||
|
|
@ -946,6 +960,54 @@
|
|||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
|
|
@ -1064,6 +1126,18 @@
|
|||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.4",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
|
||||
|
|
@ -1110,6 +1184,18 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/global": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
|
||||
|
|
@ -1119,16 +1205,64 @@
|
|||
"process": "^0.11.10"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
|
||||
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/individual": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
|
||||
"integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-function": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
|
||||
"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
|
||||
},
|
||||
"node_modules/is-glob": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-extglob": "^2.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-number": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/keycode": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
|
||||
|
|
@ -1268,6 +1402,15 @@
|
|||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-wheel-es": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
|
||||
|
|
@ -1278,6 +1421,18 @@
|
|||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pkcs7": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
|
||||
|
|
@ -1329,6 +1484,18 @@
|
|||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
|
|
@ -1382,6 +1549,23 @@
|
|||
"rust-result": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.69.7",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.7.tgz",
|
||||
"integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
|
|
@ -1390,6 +1574,18 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/url-toolkit": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"sass": "^1.69.7",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,21 @@ export const playVideoService = (data) => {
|
|||
for (let key in data) {
|
||||
params.append(key, data[key])
|
||||
}
|
||||
return request.post('/video/m3u8', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization });
|
||||
return request.post('/video', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization });
|
||||
}
|
||||
|
||||
export const getVideoListService = (data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in data) {
|
||||
if(key === 'entrydate' && data[key].length > 0){
|
||||
console.log(data[key]);
|
||||
let begin=data[key][0].toISOString().slice(0,10)+" 00:00:00";
|
||||
console.log("begin="+begin.toString());
|
||||
params.append("begin", begin);
|
||||
let end=data[key][0].toISOString().slice(0,10)+" 23:59:59";
|
||||
params.append("end", end);
|
||||
continue;
|
||||
}
|
||||
params.append(key, data[key])
|
||||
}
|
||||
// request.headers["Content-Type"] = "application/json";
|
||||
|
|
|
|||
|
|
@ -13,12 +13,6 @@ const routes = [
|
|||
{
|
||||
path: '/video',
|
||||
name: 'Video',
|
||||
meta:{
|
||||
name:'',
|
||||
id:0,
|
||||
userid:0,
|
||||
token:"",
|
||||
},
|
||||
component: VideoVue
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import axios from "axios";
|
||||
import router from "@/router";
|
||||
import router from "@/router/index.js";
|
||||
const baseURL = "/api";
|
||||
const request = axios.create({
|
||||
baseURL: baseURL,
|
||||
|
|
@ -7,13 +7,14 @@ const request = axios.create({
|
|||
|
||||
request.interceptors.response.use(
|
||||
result => {
|
||||
if(result.status!==200){
|
||||
if(result.status!==200 ){
|
||||
router.push("/login")
|
||||
}
|
||||
if(result.data.code===0){
|
||||
return result.data;
|
||||
}else{
|
||||
alert(result.data.message ? result.data.message : "请求失败，请稍后重试！");
|
||||
|
||||
return Promise.reject(result.data.message);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -88,15 +88,16 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,inject } from "vue";
|
||||
import { ref, inject } from "vue";
|
||||
import axios from "axios";
|
||||
import { loginService, registerService } from "@/api/user.js";
|
||||
import router from "@/router/index.js";
|
||||
const isLogin = ref(true);
|
||||
if (localStorage.getItem("token") !== null) {
|
||||
router.push("/videoList");
|
||||
}
|
||||
|
||||
|
||||
|
||||
const globalData=inject('globalData');
|
||||
const globalData = inject("globalData");
|
||||
|
||||
const loginData = ref({
|
||||
username: "",
|
||||
|
|
@ -154,11 +155,10 @@ const login = async () => {
|
|||
// console.error(error);
|
||||
// });
|
||||
let result = await loginService(loginData.value);
|
||||
alert(result.message);
|
||||
globalData.token = result.data;
|
||||
localStorage.setItem('token',result.data.token)
|
||||
localStorage.setItem('userId',result.data.id)
|
||||
localStorage.setItem('username',result.data.username)
|
||||
localStorage.setItem("token", result.data.token);
|
||||
localStorage.setItem("userId", result.data.id);
|
||||
localStorage.setItem("username", result.data.username);
|
||||
//token.value= result.data;
|
||||
router.push("/videoList");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,39 +1,102 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<video-player :options="videoOptions" />
|
||||
<div class="video_wrap">
|
||||
<div class="backIndex">
|
||||
<span @click="router.push({ path: '/videoList' })"
|
||||
><left-outlined
|
||||
/></span>
|
||||
</div>
|
||||
<video width="800" height="600" ref="videoPlayer" muted="muted" class="video-js video"></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoPlayer from "@/views/VideoPlayer.vue";
|
||||
import router from "@/router/index.js";
|
||||
|
||||
export default {
|
||||
name: "VideoExample",
|
||||
components: {
|
||||
VideoPlayer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoOptions: {
|
||||
autoplay: true,
|
||||
controls: true,
|
||||
sources: [
|
||||
{
|
||||
src:
|
||||
"/path/to/video.m3u8?filename=" +
|
||||
router.meta.name +
|
||||
"&id=" +
|
||||
router.meta.id +
|
||||
"&userid=" +
|
||||
router.meta.userid +
|
||||
"&token=" +
|
||||
router.meta.token,
|
||||
type: "video/m3u8",
|
||||
},
|
||||
],
|
||||
<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";
|
||||
const videoPlayer = ref(null);
|
||||
const myPlayer = ref(null);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
if(localStorage.getItem('token')===null) {
|
||||
router.push("/login");
|
||||
}
|
||||
let token = route.query.token;
|
||||
nextTick(() => {
|
||||
myPlayer.value = videojs(videoPlayer.value, {
|
||||
// poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
|
||||
controls: true, //视频控件
|
||||
autoplay: true, //自动播放
|
||||
sources: [
|
||||
{
|
||||
src:
|
||||
"/api/video/m3u8?filename=" +
|
||||
localStorage.getItem("video_name") +
|
||||
"&id=" +
|
||||
localStorage.getItem("video_id") +
|
||||
"&userId=" +
|
||||
localStorage.getItem("userId") +
|
||||
"&token=" +
|
||||
localStorage.getItem("token"), //视频地址
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: {
|
||||
displayNegative: false,
|
||||
},
|
||||
},
|
||||
playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (myPlayer.value) {
|
||||
myPlayer.value.dispose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.video_wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
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;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep(.vjs-big-play-button) {
|
||||
margin-left: 45%;
|
||||
margin-top: 20%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,12 @@ export default {
|
|||
token: localStorage.getItem("token"),
|
||||
userId: localStorage.getItem("userId"),
|
||||
username: localStorage.getItem("username"),
|
||||
hour: 0,
|
||||
entrydate: [],
|
||||
},
|
||||
searchForm: {
|
||||
hour: 0,
|
||||
entrydate: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -47,24 +53,21 @@ export default {
|
|||
alert("页码发生变化" + val);
|
||||
},
|
||||
playVideo(index) {
|
||||
var id=this.tableData[index].id;
|
||||
var name=this.tableData[index].name;
|
||||
var id = this.tableData[index].id;
|
||||
var name = this.tableData[index].name;
|
||||
localStorage.setItem("video_id", id);
|
||||
localStorage.setItem("video_name", name);
|
||||
alert("id=" + id + " name=" + name);
|
||||
router.push(
|
||||
"/video",
|
||||
{
|
||||
name: name,
|
||||
userid: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
id: id,
|
||||
}
|
||||
);
|
||||
router.push("/video");
|
||||
},
|
||||
},
|
||||
|
||||
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
|
||||
// 例如这个函数就会在组件挂载完成后被调用
|
||||
mounted() {
|
||||
if (localStorage.getItem("token") === null) {
|
||||
router.push("/login");
|
||||
}
|
||||
console.log("mounted");
|
||||
this.getVideoList();
|
||||
},
|
||||
|
|
@ -80,22 +83,10 @@ export default {
|
|||
<el-container>
|
||||
<el-main>
|
||||
<!-- 表单 -->
|
||||
<!-- <el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="searchForm.name" placeholder="姓名"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="searchForm.gender" placeholder="性别">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form :inline="true" :model="tokenData" class="demo-form-inline">
|
||||
<el-form-item label="视频日期">
|
||||
|
||||
<el-date-picker
|
||||
v-model="searchForm.entrydate"
|
||||
v-model="tokenData.entrydate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
|
|
@ -104,10 +95,37 @@ export default {
|
|||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-select v-model="tokenData.hour">
|
||||
<el-option label="0点" value="24"></el-option>
|
||||
<el-option label="1点" value="1"></el-option>
|
||||
<el-option label="2点" value="2"></el-option>
|
||||
<el-option label="3点" value="3"></el-option>
|
||||
<el-option label="4点" value="4"></el-option>
|
||||
<el-option label="5点" value="5"></el-option>
|
||||
<el-option label="6点" value="6"></el-option>
|
||||
<el-option label="7点" value="7"></el-option>
|
||||
<el-option label="8点" value="8"></el-option>
|
||||
<el-option label="9点" value="9"></el-option>
|
||||
<el-option label="10点" value="10"></el-option>
|
||||
<el-option label="11点" value="11"></el-option>
|
||||
<el-option label="12点" value="12"></el-option>
|
||||
<el-option label="13点" value="13"></el-option>
|
||||
<el-option label="14点" value="14"></el-option>
|
||||
<el-option label="15点" value="15"></el-option>
|
||||
<el-option label="16点" value="16"></el-option>
|
||||
<el-option label="17点" value="17"></el-option>
|
||||
<el-option label="18点" value="18"></el-option>
|
||||
<el-option label="19点" value="19"></el-option>
|
||||
<el-option label="20点" value="20"></el-option>
|
||||
<el-option label="21点" value="21"></el-option>
|
||||
<el-option label="22点" value="22"></el-option>
|
||||
<el-option label="23点" value="23"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" @click="getVideoList()">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" border>
|
||||
|
|
@ -118,9 +136,9 @@ export default {
|
|||
width="250"
|
||||
></el-table-column>
|
||||
<el-table-column label="是否有人" width="50" prop="human">
|
||||
<!-- <template human="human">
|
||||
{{ human.row.human == 1 ? "有" : "无" }}
|
||||
</template> -->
|
||||
<template #default="scope">
|
||||
{{ scope.row.human == 1 ? "有" : "无" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="create_time"
|
||||
|
|
@ -132,7 +150,7 @@ export default {
|
|||
label="预期删除时间"
|
||||
width="250"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column label="操作" width="250">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
|
|
@ -149,15 +167,18 @@ export default {
|
|||
|
||||
<!-- 分页条 -->
|
||||
<!-- Pagination 分页 -->
|
||||
<el-pagination
|
||||
<!-- <el-pagination
|
||||
background
|
||||
layout="total,sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:total="1000"
|
||||
></el-pagination>
|
||||
></el-pagination> -->
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<div>
|
||||
{{ tokenData.entrydate }},{{ tokenData.hour }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue