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 = [
]
},
// {
// path: '/video',
// component: HomeLayout,
// redirect: "noredirect",
// children: [
// {
// path: "index",
// component: (resolve) => require(['@/views/video/index'], resolve),
// name: "视频监控",
// meta: { title: '视频监控', icon: 'index', affix: true, noCache: true }
// }
// ]
// },
{
path: '/video',
component: HomeLayout,
redirect: "noredirect",
children: [
{
path: "index",
component: (resolve) => require(['@/views/video/index'], resolve),
name: "视频监控",
meta: { title: '视频监控', icon: 'index', affix: true, noCache: true }
}
]
},
{
path: '/leida',
......
src/views/video/VideoPlayer.vue
View file @ 5bd665d8
<!-- <template>
<template>
<div class="video-container">
<video ref="video" controls autoplay></video>
</div>
......@@ -45,4 +45,4 @@
width: 100%;
max-width: 800px;
}
</style> -->
\ No newline at end of file
</style>
\ No newline at end of file
src/views/video/index.vue
View file @ 5bd665d8
......@@ -5,7 +5,33 @@
<div class="page-wrapper">
<div class="video-wrapper">
<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 class="item"></div>
<div class="item"></div>
......@@ -15,46 +41,128 @@
</div>
</div>
</div>
<el-dialog :visible.sync="dialogVisible" title="监控视频">
<iframe :src="currentVideoUrl" frameborder="0" width="100%" height="600px" allowfullscreen></iframe>
<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>
<script>
import { Tools} from '@/assets/js/common.js';
import { reqApi, Config} from '@/assets/js/httpApi.js';
import { Tools } from "@/assets/js/common.js";
import { reqApi, Config } from "@/assets/js/httpApi.js";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
name: 'videoMonitor',
name: "videoMonitor",
data() {
return {
dp: null,
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() {
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() {
loadData() {},
onPlayerPlay(player) {
// your logic
},
}
}
onPlayerPause(player) {
// your logic
},
onPlayerEnded(player) {
// your logic
},
},
};
</script>
<style>
.el-dialog__body{
padding: 0 !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scope>
.page-wrapper{
::v-deep .videoShowModal .el-dialog__body{
padding: 0;
}
.page-wrapper {
width: 100%;
height: 100%;
background:no-repeat center center url('~@/assets/images/layout/main_bg.png');
background-size:100% 100%;
.video-wrapper{
background: no-repeat center center url("~@/assets/images/layout/main_bg.png");
background-size: 100% 100%;
.video-wrapper {
// background-color: #fff;
width: 1200px;
margin: 0 auto;
......@@ -63,40 +171,52 @@ export default {
justify-content: center;
padding-bottom: 0.1rem;
margin-top: 0.5rem;
}
.item{
.item {
width: 32.3333%;
height: 300px;
margin-right: 0.1rem;
margin-top: 0.1rem;
// margin-left: 0.1rem;
background-color: pink;
&:nth-child(3n){
&:nth-child(3n) {
margin-right: 0.01rem;
}
cursor: pointer;
}
}
}
.home_manage{
position:relative;height:100%;width:100%;flex:1;display:flex;justify-content:center;
.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%;
.m-view{
position:relative;width:100%;
.m-view {
position: relative;
width: 100%;
}
.b_0{
border:1px solid #143D96;
position:absolute;top:.20rem;left:.10rem;width:max-content;padding:.10rem;user-select:none;
.b_0 {
border: 1px solid #143d96;
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;
li{
span:first-child{color:#ccc;}
span{color:#fff;}
li {
span:first-child {
color: #ccc;
}
span {
color: #fff;
}
}
}
}
</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