|
@@ -4,11 +4,26 @@
|
|
|
<span class="title-text">{{ title }}</span>
|
|
<span class="title-text">{{ title }}</span>
|
|
|
<img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="openTsModal" />
|
|
<img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="openTsModal" />
|
|
|
</div>
|
|
</div>
|
|
|
- <Artplayer :option="option" :style="style" @getInstance="getInstance"/>
|
|
|
|
|
|
|
+ <!-- <Artplayer :option="option" :style="style" @getInstance="getInstance"/> -->
|
|
|
|
|
+ <div class="video-player-area" >
|
|
|
|
|
+ <EasyPlayer
|
|
|
|
|
+ ref="playerRef"
|
|
|
|
|
+ playerName="测试"
|
|
|
|
|
+ :videoUrl="option.url"
|
|
|
|
|
+ class="video-player screenshot"
|
|
|
|
|
+ live
|
|
|
|
|
+ speed
|
|
|
|
|
+ :easyStretch="true"
|
|
|
|
|
+ :muted="true"
|
|
|
|
|
+ :has-audio="false"
|
|
|
|
|
+ :reconnection="true"
|
|
|
|
|
+ @click.native.stop
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
<el-dialog title="提示" :visible.sync="tsModalVisible" width="60%">
|
|
<el-dialog title="提示" :visible.sync="tsModalVisible" width="60%">
|
|
|
<span>是否中断当前巡查点监控,进行下一个巡查点视频播放?</span>
|
|
<span>是否中断当前巡查点监控,进行下一个巡查点视频播放?</span>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<span slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="closeVideoDialog">中断当前视频</el-button>
|
|
|
|
|
|
|
+ <el-button type="primary" @click="closeVideoDialog">中断本次任务</el-button>
|
|
|
<el-button @click="toNext">播放下一个视频</el-button>
|
|
<el-button @click="toNext">播放下一个视频</el-button>
|
|
|
<el-button @click="tsModalVisible = false">取 消</el-button>
|
|
<el-button @click="tsModalVisible = false">取 消</el-button>
|
|
|
</span>
|
|
</span>
|
|
@@ -17,34 +32,13 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import Artplayer from '@/components/video-player/video-player.vue'
|
|
|
|
|
-import flvjs from 'flv.js'
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'VideoPlayerPopup',
|
|
name: 'VideoPlayerPopup',
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
visible: false,
|
|
visible: false,
|
|
|
title: '巡查点',
|
|
title: '巡查点',
|
|
|
- option: {
|
|
|
|
|
- url: '',
|
|
|
|
|
- isLive: true, //使用直播模式,会隐藏进度条和播放时间
|
|
|
|
|
- autoplay: true,
|
|
|
|
|
- muted: true, //是否静音
|
|
|
|
|
- type: 'flv',
|
|
|
|
|
- autoSize: true,
|
|
|
|
|
- customType: {
|
|
|
|
|
- flv: (video, url, art) => {
|
|
|
|
|
- if (flvjs.isSupported()) {
|
|
|
|
|
- if (art.flv) art.flv.destroy()
|
|
|
|
|
- const flv = flvjs.createPlayer({ type: 'flv', url })
|
|
|
|
|
- flv.attachMediaElement(video)
|
|
|
|
|
- flv.load()
|
|
|
|
|
- art.flv = flv
|
|
|
|
|
- art.on('destroy', () => flv.destroy())
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ option: {url: ''},
|
|
|
tsModalVisible: false,
|
|
tsModalVisible: false,
|
|
|
style: {
|
|
style: {
|
|
|
width: '600px',
|
|
width: '600px',
|
|
@@ -53,17 +47,16 @@ export default {
|
|
|
type:'add'
|
|
type:'add'
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- components: {
|
|
|
|
|
- Artplayer
|
|
|
|
|
- },
|
|
|
|
|
mounted() {
|
|
mounted() {
|
|
|
this.$globalEventBus.$on('clickVideoPlay', (data) => {
|
|
this.$globalEventBus.$on('clickVideoPlay', (data) => {
|
|
|
this.type = data.type
|
|
this.type = data.type
|
|
|
- this.visible = data.visible
|
|
|
|
|
this.tsModalVisible = false
|
|
this.tsModalVisible = false
|
|
|
this.title = data.point?data.point.devName:''
|
|
this.title = data.point?data.point.devName:''
|
|
|
const url =data.point&&data.point.url? data.point.url:''
|
|
const url =data.point&&data.point.url? data.point.url:''
|
|
|
this.$set(this.option,'url',url)
|
|
this.$set(this.option,'url',url)
|
|
|
|
|
+ this.$nextTick(()=>{
|
|
|
|
|
+ this.visible = data.visible
|
|
|
|
|
+ })
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
destroyed() {
|
|
destroyed() {
|
|
@@ -102,10 +95,10 @@ export default {
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.video-player-container {
|
|
.video-player-container {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: 10%;
|
|
|
|
|
|
|
+ top: 8%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
transform: translate(-50%, 0%);
|
|
transform: translate(-50%, 0%);
|
|
|
- width: 600px;
|
|
|
|
|
|
|
+ width: px-to-rem(600);
|
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
|
.video-player-title {
|
|
.video-player-title {
|
|
|
background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
|
|
background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
|
|
@@ -122,5 +115,9 @@ export default {
|
|
|
margin-left: px-to-rem(20);
|
|
margin-left: px-to-rem(20);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .video-player-area{
|
|
|
|
|
+ width: px-to-rem(600);
|
|
|
|
|
+ height: px-to-rem(350);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|