|
|
@@ -0,0 +1,146 @@
|
|
|
+<!--
|
|
|
+ * @Author: zjz
|
|
|
+ * @Date: 2024-05-16 14:19:50
|
|
|
+ * @LastEditors: zjz
|
|
|
+ * @LastEditTime: 2024-05-16 17:05:09
|
|
|
+ * @FilePath: \WebGIS\src\components\hikVideo\VideoPlayer.vue
|
|
|
+ * @Description:
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div id="videoDom" class="videoBox">
|
|
|
+ <!-- <video
|
|
|
+ :id="videoId"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ class="video-js"
|
|
|
+ /> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import videojs from 'video.js'
|
|
|
+import 'video.js/dist/video-js.css'
|
|
|
+import 'videojs-flvjs-es6'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ // 视频地址、video的id值
|
|
|
+ vData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ hlsurl: '', // 视频url地址
|
|
|
+ cameraId: '' // id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 视频宽度
|
|
|
+ videoWidth: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ // 视频高度
|
|
|
+ videoHeight: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {
|
|
|
+ autoplay: true, // 设置自动播放
|
|
|
+ muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
|
|
|
+ preload: 'auto', // 预加载
|
|
|
+ controls: false // 显示播放的控件
|
|
|
+ },
|
|
|
+ player: null,
|
|
|
+ videoId: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听视频地址、video的id值
|
|
|
+ vData: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ this.videoId = val.cameraId
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getVideo(val.hlsurl, val.cameraId)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 组件销毁时，清除播放器
|
|
|
+ if (this.player) {
|
|
|
+ this.player.dispose() // 该方法会重置videojs的内部状态并移除dom
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getVideo(nowPlayVideoUrl, nowPlayVideoId) {
|
|
|
+ // this.player = videojs(nowPlayVideoId, this.options)
|
|
|
+ // // 关键代码， 动态设置src，才可实现换台操作
|
|
|
+ // // 不动态设置依然也可以这样写
|
|
|
+ // this.player.src([
|
|
|
+ // {
|
|
|
+ // src: nowPlayVideoUrl,
|
|
|
+ // type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
|
|
|
+ // }
|
|
|
+ // ])
|
|
|
+ this.createDom()
|
|
|
+ this.player = videojs(
|
|
|
+ // videoPlayerEl.value, // 挂载容器
|
|
|
+ document.getElementById('videoPlayer' + nowPlayVideoId),
|
|
|
+ // videoPlayerEl.value,
|
|
|
+ // refs[`videoPlayerEl${this.videoId}`],
|
|
|
+ {
|
|
|
+ autoplay: 'muted', // 自动播放
|
|
|
+ controls: true, // 用户可以与之交互的控件
|
|
|
+ loop: true, // 视频一结束就重新开始
|
|
|
+ muted: false, // 默认情况下将使所有音频静音
|
|
|
+ // fill: true, //铺满
|
|
|
+ // aspectRatio: '16:9', //显示比率
|
|
|
+ fullscreen: {
|
|
|
+ options: { navigationUI: 'hide' }
|
|
|
+ },
|
|
|
+ techOrder: ['html5', 'flvjs'], // 兼容顺序
|
|
|
+ html5: {
|
|
|
+ hls: {
|
|
|
+ withCredentials: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sources: [{ src: nowPlayVideoUrl, type: 'application/x-mpegURL' }] // 视频地址 类型
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ // 开启响应模式
|
|
|
+ this.player.responsive(true)
|
|
|
+ // 开启填充模式
|
|
|
+ this.player.fill(true)
|
|
|
+ },
|
|
|
+
|
|
|
+ createDom() {
|
|
|
+ const id = 'videoPlayer' + this.vData.cameraId
|
|
|
+ if (this.vData.cameraId) {
|
|
|
+ const newVideoElement = document.createElement('video')
|
|
|
+ newVideoElement.id = id
|
|
|
+ newVideoElement.style.width = '100%'
|
|
|
+ newVideoElement.style.height = '100%'
|
|
|
+ newVideoElement.className = 'video-js vjs-big-play-centered vjs-fluid'
|
|
|
+ newVideoElement.preload = 'auto'
|
|
|
+ const oldVideoElement = document.getElementById('videoDom')
|
|
|
+ oldVideoElement.innerHTML = ''
|
|
|
+ oldVideoElement.appendChild(newVideoElement)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.videoBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: solid 1px #ccc;
|
|
|
+}
|
|
|
+</style>
|
xiangyiyong