Skip to content

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

视频监控demo

parent c82db7e1
Show 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
...@@ -5,7 +5,33 @@ ...@@ -5,7 +5,33 @@
<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
ref="videoPlayer"
class="video-player"
:options="playerOptions"
@play="onPlayerPlay"
@pause="onPlayerPause"
@ended="onPlayerEnded"
></video-player> -->
<!-- <video
style="width: 100%"
controls
:src="require('@/assets/video/zimu.mp4')"
></video> -->
<!-- <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>
<div class="item"></div> <div class="item"></div>
<div class="item"></div> <div class="item"></div>
...@@ -15,46 +41,128 @@ ...@@ -15,46 +41,128 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog :visible.sync="dialogVisible" title="监控视频"> <el-dialog :visible.sync="dialogVisible" title="监控视频" :fullscreen="true" class="videoShowModal">
<iframe :src="currentVideoUrl" frameborder="0" width="100%" height="600px" allowfullscreen></iframe> <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> </el-dialog>
</div> </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 {
dp: null,
dialogVisible: false, dialogVisible: false,
} attachmentLink:
"https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
options: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
aspectRatio: "16:9",
notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
autoplay: false, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
preload: "auto", // 预加载
controls: true, // 显示播放的控件
},
playerOptions: {
// 其他设置项
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() { mounted() {
var that = this; var that = this;
this.$nextTick(() => { this.$nextTick(() => {
this.pageApi = Config.getModuleInfo(this); this.pageApi = Config.getModuleInfo(this);
}) });
// this.$refs.videoPlayer.play()
}, },
methods: { 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) { openDialog(url) {
this.currentVideoUrl = url; this.currentVideoUrl = url;
this.dialogVisible = true; this.dialogVisible = true;
}, },
loadData() { 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{
padding: 0;
}
.page-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
background:no-repeat center center url('~@/assets/images/layout/main_bg.png'); background: no-repeat center center url("~@/assets/images/layout/main_bg.png");
background-size:100% 100%; background-size: 100% 100%;
.video-wrapper{ .video-wrapper {
// background-color: #fff; // background-color: #fff;
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
...@@ -63,40 +171,52 @@ export default { ...@@ -63,40 +171,52 @@ export default {
justify-content: center; justify-content: center;
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.item{ .item {
width: 32.3333%; width: 32.3333%;
height: 300px; height: 300px;
margin-right: 0.1rem; margin-right: 0.1rem;
margin-top: 0.1rem; margin-top: 0.1rem;
// margin-left: 0.1rem; // margin-left: 0.1rem;
background-color: pink; background-color: pink;
&:nth-child(3n){ &:nth-child(3n) {
margin-right: 0.01rem; margin-right: 0.01rem;
} }
cursor: pointer; cursor: pointer;
} }
} }
.home_manage{ .home_manage {
position:relative;height:100%;width:100%;flex:1;display:flex;justify-content:center; 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%; //background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;
.m-view{ .m-view {
position:relative;width:100%; 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;
top: 0.2rem;
left: 0.1rem;
width: max-content;
padding: 0.1rem;
user-select: none;
// background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px; // background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px;
li{ li {
span:first-child{color:#ccc;} span:first-child {
span{color:#fff;} 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