Skip to content

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

视频监控 demo m3u8

parent 6f182225
Expand all Show whitespace changes
Inline Side-by-side
Showing with 668 additions and 160 deletions
package.json
View file @ c97eb7a5
......@@ -37,6 +37,8 @@
"qs": "^6.9.1",
"screenfull": "4.2.0",
"sortablejs": "1.8.4",
"videojs-contrib-hls": "^5.15.0",
"video.js": "^7.21.6",
"vue": "2.6.10",
"vue-count-to": "1.0.13",
"vue-cropper": "0.4.9",
......@@ -48,6 +50,7 @@
"vuedraggable": "2.20.0",
"vuex": "3.1.0",
"wangeditor": "^3.1.1",
"webpack": "^4.36.0",
"xlsx": "^0.17.1"
},
"devDependencies": {
......
src/views/video/index-mp4.vue 0 → 100644
View file @ c97eb7a5
<template>
<div class="home_manage cm-layout">
<div class="m-view">
<!-- 视频监控 -->
<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" v-for="(index, item) in playerOptions.sources" @click="openDialog" :key="index">
<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>
</div>
<el-dialog :visible.sync="dialogVisible" title="监控视频" :fullscreen="true" class="videoShowModal">
<!-- <div style="width: 100%; height: 100%; background-color: pink;"> -->
<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> -->
<!-- <video
id="videoPlayer"
class="video-js vjs-default-skin"
playsinline
autoplay="autoplay"
style="width: 90%; height: 90%;"
>
<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 videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
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: require('@/assets/video/oceans.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/oceans.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/oceans.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
// {
// 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>
<style>
.el-dialog__body{
padding: 0 !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scope>
::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-color: #fff;
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 0.1rem;
margin-top: 0.5rem;
}
.item {
width: 32.3333%;
height: 300px;
margin-right: 0.1rem;
margin-top: 0.1rem;
// margin-left: 0.1rem;
background-color: pink;
&:nth-child(3n) {
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%;
.m-view {
position: relative;
width: 100%;
}
.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;
}
}
}
}
</style>
src/views/video/index-videojs-m3u8.vue 0 → 100644
View file @ c97eb7a5
<template>
<div class="home_manage cm-layout">
<div class="m-view">
<!-- 视频监控 -->
<div class="page-wrapper">
<div class="video-wrapper">
<div class="item">
<video
ref="videoPlayer"
id="my-video"
class="video-js vjs-default-skin"
controls
autoplay
preload="auto"
width="640"
height="360"
>
<source :src="attachmentLink" type="application/x-mpegURL" />
Your browser does not support the video tag.
</video>
</div>
<div class="item">
<video
ref="videoPlayer1"
id="my-video"
class="video-js vjs-default-skin"
controls
autoplay
preload="auto"
width="640"
height="360"
>
<source :src="attachmentLink" type="application/x-mpegURL" />
Your browser does not support the video tag.
</video>
</div>
<div class="item">
<video
ref="videoPlayer2"
id="my-video"
class="video-js vjs-default-skin"
controls
autoplay
preload="auto"
width="640"
height="360"
>
<source :src="attachmentLink" type="application/x-mpegURL" />
Your browser does not support the video tag.
</video>
</div>
<!-- <div class="item" v-for="(index, item) in playerOptions.sources" @click="openDialog" :key="index">
<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>
</div>
</div>
</div>
</template>
<script>
import { Tools } from "@/assets/js/common.js";
import { reqApi, Config } from "@/assets/js/httpApi.js";
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {
name: "videoMonitor",
data() {
return {
player: null,
dp: null,
dialogVisible: false,
// attachmentLink:"https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
attachmentLink:"https://gctxyc.liveplay.myqcloud.com/gc/gccntv241-slf01_1/index.m3u8", // 好用的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: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
{
type: "video/mp4",
src: require('@/assets/video/zimu.mp4'),
},
// {
// 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()
this.player = videojs(this.$refs.videoPlayer);
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
},
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>
<style>
.el-dialog__body{
padding: 0 !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scope>
::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-color: #fff;
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 0.1rem;
margin-top: 0.5rem;
}
.item {
width: 32.3333%;
height: 300px;
margin-right: 0.1rem;
margin-top: 0.1rem;
// margin-left: 0.1rem;
background-color: pink;
&:nth-child(3n) {
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%;
.m-view {
position: relative;
width: 100%;
}
.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;
}
}
}
}
</style>
src/views/video/index.vue
View file @ c97eb7a5
This diff is collapsed.
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