Skip to content

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

视频监控 demo m3u8

parent 6f182225
Show whitespace changes
Inline Side-by-side
Showing with 668 additions and 160 deletions
package.json
View file @ c97eb7a5
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
"qs": "^6.9.1", "qs": "^6.9.1",
"screenfull": "4.2.0", "screenfull": "4.2.0",
"sortablejs": "1.8.4", "sortablejs": "1.8.4",
"videojs-contrib-hls": "^5.15.0",
"video.js": "^7.21.6",
"vue": "2.6.10", "vue": "2.6.10",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.4.9", "vue-cropper": "0.4.9",
...@@ -48,6 +50,7 @@ ...@@ -48,6 +50,7 @@
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",
"vuex": "3.1.0", "vuex": "3.1.0",
"wangeditor": "^3.1.1", "wangeditor": "^3.1.1",
"webpack": "^4.36.0",
"xlsx": "^0.17.1" "xlsx": "^0.17.1"
}, },
"devDependencies": { "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
...@@ -4,74 +4,90 @@ ...@@ -4,74 +4,90 @@
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="page-wrapper"> <div class="page-wrapper">
<div class="video-wrapper"> <div class="video-wrapper">
<!-- <div class="item" @click="openDialog"> --> <div
<!-- <video-player class="item"
ref="videoPlayer" >
class="video-player" <video
:options="playerOptions" ref="videoPlayer6"
@play="onPlayerPlay" id="my-video6"
@pause="onPlayerPause" class="video-js vjs-default-skin"
@ended="onPlayerEnded" width="380px"
></video-player> --> height="300px"
<!-- <video
style="width: 100%"
controls controls
:src="require('@/assets/video/zimu.mp4')" >
></video> --> <source src="https://gctxyc.liveplay.myqcloud.com/gc/gccntv241-slf01_1/index.m3u8" type="application/x-mpegURL" />
<!-- <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. Your browser does not support the video tag.
</video> --> </video>
<!-- <video </div>
id="videoPlayer" <div class="item">
<video
ref="videoPlayer1"
id="my-video1"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
playsinline controls
autoplay="autoplay" width="380px"
style="width: 100%; height: 100%;" height="300px"
> >
<source :src="attachmentLink" type="application/x-mpegURL" /> <source src="https://gcalic.v.myalicdn.com/gc/ztn_1/index.m3u8" type="application/x-mpegURL" />
<source :src="require('@/assets/video/zimu.mp4')" type="video/mp4"> Your browser does not support the video tag.
</video> --> </video>
<!-- </div> --> </div>
<div class="item" v-for="(index, item) in playerOptions.sources" @click="openDialog" :key="index"> <div class="item">
<video <video
id="videoPlayer" ref="videoPlayer2"
id="my-video2"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
playsinline controls
autoplay="autoplay" width="380px"
style="width: 100%; height: 100%;" height="300px"
> >
<source :src="attachmentLink" type="application/x-mpegURL" /> <source src="https://gctxyc.liveplay.myqcloud.com/gc/hlwxt_1/index.m3u8" type="application/x-mpegURL" />
<source :src="require('@/assets/video/zimu.mp4')" type="video/mp4"> Your browser does not support the video tag.
</video> </video>
</div> </div>
<div class="item">
<video
ref="videoPlayer3"
id="my-video3"
class="video-js vjs-default-skin"
controls
width="380px"
height="300px"
>
<source src="https://gctxyc.liveplay.myqcloud.com/gc/ylxs12_1/index.m3u8" type="application/x-mpegURL" />
Your browser does not support the video tag.
</video>
</div> </div>
</div> <div class="item">
</div>
<el-dialog :visible.sync="dialogVisible" title="监控视频" :fullscreen="true" class="videoShowModal">
<!-- <div style="width: 100%; height: 100%; background-color: pink;"> -->
<video <video
id="videoPlayer" ref="videoPlayer4"
id="my-video4"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
playsinline controls
autoplay="autoplay" width="380px"
style="width: 100%; height: 100%;" height="300px"
> >
<source :src="attachmentLink" type="application/x-mpegURL" /> <source src="https://gctxyc.liveplay.myqcloud.com/gc/zyqcdx01_1/index.m3u8" type="application/x-mpegURL" />
<source :src="require('@/assets/video/zimu.mp4')" type="video/mp4"> Your browser does not support the video tag.
</video> </video>
<!-- </div> --> </div>
<!-- <video <div class="item">
id="videoPlayer" <video
ref="videoPlayer5"
id="my-video5"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
playsinline controls
autoplay="autoplay" width="380px"
style="width: 90%; height: 90%;" height="300px"
> >
<source :src="attachmentLink" type="application/x-mpegURL" /> <source src="https://gctxyc.liveplay.myqcloud.com/gc/ztn_1/index.m3u8" type="application/x-mpegURL" />
<source :src="require('@/assets/video/zimu.mp4')" type="video/mp4"> Your browser does not support the video tag.
</video> --> </video>
</el-dialog> </div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -84,69 +100,32 @@ export default { ...@@ -84,69 +100,32 @@ export default {
name: "videoMonitor", name: "videoMonitor",
data() { data() {
return { return {
dp: null, player: null,
dialogVisible: false, // sources: [
attachmentLink: // {
"https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8", // src: 'https://gctxyc.liveplay.myqcloud.com/gc/gccntv241-slf01_1/index.m3u8',
options: { // },
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 // {
aspectRatio: "16:9", // type: "video/mp4",
notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。 // src: require("@/assets/video/oceans.mp4"),
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", // type: "video/mp4",
// // src: "https://www.example.com/path/to/your/video.mp4" // src: require("@/assets/video/oceans.mp4"),
// src: require('@/assets/video/zimu.mp4'), // },
// }
// { // {
// type: "m3u8", // type: "video/mp4",
// // src: "https://www.example.com/path/to/your/video.mp4" // src: require("@/assets/video/zimu.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',//视频文件地址 // type: "video/mp4",
// // src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',//视频文件地址 // src: require("@/assets/video/zimu.mp4"),
// src: "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
// type: "m3u8",
// // type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
// }, // },
], // {
}, // type: "video/mp4",
// src: require("@/assets/video/zimu.mp4"),
// },
// ],
}; };
}, },
mounted() { mounted() {
...@@ -154,52 +133,43 @@ export default { ...@@ -154,52 +133,43 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.pageApi = Config.getModuleInfo(this); this.pageApi = Config.getModuleInfo(this);
}); });
// this.$refs.videoPlayer.play() const videoConfig = {
_controls: true,
autoplay: true,
muted: true,
preload: 'auto',
controlBar: {
playToggle: false, // 播放/暂停按钮
volumePanel: { inline: false }, // 音量控制
fullscreenToggle: true,
progressControl: false,
pipButton: false,
pictureInPictureToggle: false
}, },
methods: { }
loadVideo() {
this.dp = videojs("videoPlayer", this.options); this.player = videojs(this.$refs.videoPlayer6, videoConfig);
// 也可以使用以下方式给vedio设置 src
// this.db.src([
// { videoConfig.autoplay = false
// src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址 videoConfig.muted = false
// type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
// }, this.player1 = videojs(this.$refs.videoPlayer1,videoConfig);
// ]); this.player2 = videojs(this.$refs.videoPlayer2, videoConfig);
this.player3 = videojs(this.$refs.videoPlayer3,videoConfig);
this.player4 = videojs(this.$refs.videoPlayer4, videoConfig);
this.player5 = videojs(this.$refs.videoPlayer5,videoConfig);
// this.$refs.videoPlayer.play()
}, },
// 销毁 methods: {},
beforeDestroy() { beforeDestroy() {
if (this.dp) { if (this.player) {
this.dp.dispose(); // dispose()会直接删除Dom元素 this.player.dispose();
} }
}, },
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>
::v-deep .videoShowModal .el-dialog__body{
padding: 0;
}
.page-wrapper { .page-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -221,7 +191,7 @@ export default { ...@@ -221,7 +191,7 @@ export default {
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: transparent;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0.01rem; margin-right: 0.01rem;
} }
......
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