Skip to content

V
V3-TailingPond
Commit 5bd665d8 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

视频监控demo

parent c82db7e1
Hide whitespace changes
Inline Side-by-side
Showing with 225 additions and 105 deletions
src/router/routers.js
View file @ 5bd665d8
...@@ -51,19 +51,19 @@ export const constantRouterMap = [ ...@@ -51,19 +51,19 @@ export const constantRouterMap = [
] ]
}, },
// { {
// path: '/video', path: '/video',
// component: HomeLayout, component: HomeLayout,
// redirect: "noredirect", redirect: "noredirect",
// children: [ children: [
// { {
// path: "index", path: "index",
// component: (resolve) => require(['@/views/video/index'], resolve), component: (resolve) => require(['@/views/video/index'], resolve),
// name: "视频监控", name: "视频监控",
// meta: { title: '视频监控', icon: 'index', affix: true, noCache: true } meta: { title: '视频监控', icon: 'index', affix: true, noCache: true }
// } }
// ] ]
// }, },
{ {
path: '/leida', path: '/leida',
......
src/views/video/VideoPlayer.vue
View file @ 5bd665d8
<!-- <template> <template>
<div class="video-container"> <div class="video-container">
<video ref="video" controls autoplay></video> <video ref="video" controls autoplay></video>
</div> </div>
...@@ -45,4 +45,4 @@ ...@@ -45,4 +45,4 @@
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
} }
</style> --> </style>
\ No newline at end of file \ No newline at end of file
src/views/video/index.vue
View file @ 5bd665d8
<template> <template>
<div class="home_manage cm-layout"> <div class="home_manage cm-layout">
<div class="m-view"> <div class="m-view">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="page-wrapper"> <div class="page-wrapper">
<div class="video-wrapper"> <div class="video-wrapper">
<div class="item" @click="openDialog"> <div class="item" @click="openDialog">
<!-- <video-player
</div> ref="videoPlayer"
<div class="item"></div> class="video-player"
<div class="item"></div> :options="playerOptions"
<div class="item"></div> @play="onPlayerPlay"
<div class="item"></div> @pause="onPlayerPause"
<div class="item"></div> @ended="onPlayerEnded"
</div> ></video-player> -->
</div> <!-- <video
</div> style="width: 100%"
<el-dialog :visible.sync="dialogVisible" title="监控视频"> controls
<iframe :src="currentVideoUrl" frameborder="0" width="100%" height="600px" allowfullscreen></iframe> :src="require('@/assets/video/zimu.mp4')"
</el-dialog> ></video> -->
</div> <!-- <video width="480" height="480" controls>
<source src="https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8" type="application/x-mpegURL">
Your browser does not support the video tag.
</video> -->
<video
id="videoPlayer"
class="video-js vjs-default-skin"
playsinline
autoplay="autoplay"
style="width: 100%; height: 100%;"
>
<source :src="attachmentLink" type="application/x-mpegURL" />
<source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
</video>
</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
<el-dialog :visible.sync="dialogVisible" title="监控视频" :fullscreen="true" class="videoShowModal">
<video
id="videoPlayer"
class="video-js vjs-default-skin"
playsinline
autoplay="autoplay"
style="width: 100%; height: 100%;"
>
<source :src="attachmentLink" type="application/x-mpegURL" />
<source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
</video>
</el-dialog>
</div>
</template> </template>
<script> <script>
import { Tools} from '@/assets/js/common.js'; import { Tools } from "@/assets/js/common.js";
import { reqApi, Config} from '@/assets/js/httpApi.js'; import { reqApi, Config } from "@/assets/js/httpApi.js";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default { export default {
name: 'videoMonitor', name: "videoMonitor",
data() { data() {
return { return {
dialogVisible: false, dp: null,
} dialogVisible: false,
}, attachmentLink:
mounted() { "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
var that = this; options: {
this.$nextTick(() => { playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
this.pageApi = Config.getModuleInfo(this); aspectRatio: "16:9",
}) notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
}, autoplay: false, // 设置自动播放
methods: { muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
openDialog(url) { preload: "auto", // 预加载
this.currentVideoUrl = url; controls: true, // 显示播放的控件
this.dialogVisible = true; },
}, playerOptions: {
loadData() { // 其他设置项
}, notSupportedMessage: "此视频暂无法播放，请稍后再试", //提示信息
} autoplay: true, //是否自动播放
} controls: true, // 是否显示控制栏
// poster: 'http://path/to/poster.jpg',//视频封面
sources: [
// {
// type: "video/mp4",
// // src: "https://www.example.com/path/to/your/video.mp4"
// src: require('@/assets/video/zimu.mp4'),
// }
// {
// type: "m3u8",
// // src: "https://www.example.com/path/to/your/video.mp4"
// src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',
// }
{
// src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
// src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',//视频文件地址
src: "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
type: "m3u8",
// type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
},
],
},
};
},
mounted() {
var that = this;
this.$nextTick(() => {
this.pageApi = Config.getModuleInfo(this);
});
// this.$refs.videoPlayer.play()
},
methods: {
loadVideo() {
this.dp = videojs("videoPlayer", this.options);
// 也可以使用以下方式给vedio设置 src
// this.db.src([
// {
// src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址
// type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
// },
// ]);
},
// 销毁
beforeDestroy() {
if (this.dp) {
this.dp.dispose(); // dispose()会直接删除Dom元素
}
},
openDialog(url) {
this.currentVideoUrl = url;
this.dialogVisible = true;
},
loadData() {},
onPlayerPlay(player) {
// your logic
},
onPlayerPause(player) {
// your logic
},
onPlayerEnded(player) {
// your logic
},
},
};
</script> </script>
<style>
.el-dialog__body{
padding: 0 !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scope> <style rel="stylesheet/scss" lang="scss" scope>
.page-wrapper{ ::v-deep .videoShowModal .el-dialog__body{
width: 100%; padding: 0;
height: 100%; }
background:no-repeat center center url('~@/assets/images/layout/main_bg.png');
background-size:100% 100%; .page-wrapper {
.video-wrapper{ width: 100%;
height: 100%;
// background-color: #fff; background: no-repeat center center url("~@/assets/images/layout/main_bg.png");
width: 1200px; background-size: 100% 100%;
margin: 0 auto; .video-wrapper {
display: flex; // background-color: #fff;
flex-wrap: wrap; width: 1200px;
justify-content: center; margin: 0 auto;
padding-bottom: 0.1rem; display: flex;
margin-top: 0.5rem; flex-wrap: wrap;
justify-content: center;
} padding-bottom: 0.1rem;
.item{ margin-top: 0.5rem;
width: 32.3333%; }
height: 300px; .item {
margin-right: 0.1rem; width: 32.3333%;
margin-top: 0.1rem; height: 300px;
// margin-left: 0.1rem; margin-right: 0.1rem;
background-color: pink; margin-top: 0.1rem;
&:nth-child(3n){ // margin-left: 0.1rem;
margin-right: 0.01rem; background-color: pink;
} &:nth-child(3n) {
cursor: pointer; margin-right: 0.01rem;
}
} }
cursor: pointer;
}
}
.home_manage {
position: relative;
height: 100%;
width: 100%;
flex: 1;
display: flex;
justify-content: center;
//background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;
.home_manage{ .m-view {
position:relative;height:100%;width:100%;flex:1;display:flex;justify-content:center; position: relative;
//background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%; width: 100%;
}
.m-view{
position:relative;width:100%;
}
.b_0{ .b_0 {
border:1px solid #143D96; border: 1px solid #143d96;
position:absolute;top:.20rem;left:.10rem;width:max-content;padding:.10rem;user-select:none; position: absolute;
// background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px; top: 0.2rem;
li{ left: 0.1rem;
span:first-child{color:#ccc;} width: max-content;
span{color:#fff;} padding: 0.1rem;
} user-select: none;
} // background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px;
} li {
span:first-child {
color: #ccc;
}
span {
color: #fff;
}
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment