|
@@ -354,15 +354,14 @@
|
|
|
height="800px"
|
|
|
custom-class="modal"
|
|
|
:close-on-click-modal="true"
|
|
|
+ :destroy-on-close="true"
|
|
|
>
|
|
|
- <video
|
|
|
- class="videoPlayer"
|
|
|
- id="videoPlayer"
|
|
|
- muted
|
|
|
- autoplay
|
|
|
- webkit-playsinline
|
|
|
- playsinline
|
|
|
- ></video>
|
|
|
+ <iframe
|
|
|
+ class="videoBoxiframe"
|
|
|
+ width="100%"
|
|
|
+ height="600px"
|
|
|
+ src="http://localhost:8081?token=stream-1"
|
|
|
+ ></iframe>
|
|
|
</el-dialog>
|
|
|
<el-dialog
|
|
|
title="GIS地貌"
|
|
@@ -673,71 +672,12 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
this.tableData.data = data.data;
|
|
|
- console.log(123123,data)
|
|
|
},
|
|
|
+
|
|
|
showVideoBox() {
|
|
|
this.videoBoxShow = true;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.listenEvent();
|
|
|
- this.resetVideo();
|
|
|
- });
|
|
|
- },
|
|
|
- // 销毁播放实例
|
|
|
- cancelPlay() {
|
|
|
- $(".videoPlayer").attr("poster", "").attr("src", "");
|
|
|
- this.videoPlayer &&
|
|
|
- this.videoPlayer.disconnect() &&
|
|
|
- (this.videoPlayer = null);
|
|
|
- },
|
|
|
-
|
|
|
- // 监听视频被暂停和被播放
|
|
|
- listenEvent() {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- //判断设备
|
|
|
- if (H5siOS() === true || H5sSafariBrowser() === true) {
|
|
|
- $(".videoPlayer").prop("controls", true);
|
|
|
- }
|
|
|
-
|
|
|
- //如果是暂停状态,就让它开始;如果是开始就让他暂停。每次开始之前都先清空参数
|
|
|
- $(".videoPlayer").on("click", function () {
|
|
|
- if ($(this).get(0).paused) {
|
|
|
- that.resetVideo();
|
|
|
- } else {
|
|
|
- that.videoPlayer.disconnect();
|
|
|
- $(this).get(0).pause();
|
|
|
- this.BASE.showMsg({
|
|
|
- type: "success",
|
|
|
- msg: "暂停播放",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
},
|
|
|
|
|
|
- // 重置视频播放状态
|
|
|
- resetVideo() {
|
|
|
- this.$nextTick(() => {
|
|
|
- let videoConfig = {
|
|
|
- videoid: "videoPlayer", //跟上面video标签的id一致
|
|
|
- protocol: "http:", //'http:' or 'https:'
|
|
|
- host: this.videoConfigHost, //'localhost:8080'自己内部的网址
|
|
|
- rootpath: "/", // '/' or window.location.pathname
|
|
|
- token: this.videoConfigToken, //可变参数
|
|
|
- // streamprofile: this.videoConfigStreamprofile, // {string} - stream profile, main/sub or other predefine transcoding profile
|
|
|
- hlsver: "v1", //v1 is for ts, v2 is for fmp4
|
|
|
- session: "e312287e-d809-4b4b-a5d6-336e5006199f", //session got from login可变参数
|
|
|
- };
|
|
|
-
|
|
|
- this.cancelPlay();
|
|
|
- this.videoPlayer = new H5sPlayerRTC(videoConfig);
|
|
|
- this.videoPlayer.connect();
|
|
|
-
|
|
|
- this.BASE.showMsg({
|
|
|
- type: "success",
|
|
|
- msg: "播放组件初始化中...请稍后...",
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
selectTab: function (tab, index) {
|
|
|
this.activeTab = index;
|
|
|
if (index === 0) {
|
|
@@ -993,4 +933,9 @@ export default {
|
|
|
height: 800px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.videoBoxiframe {
|
|
|
+ border: none;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
</style>
|