zc

src/App.vue

@@ -1,29 +1,36 @@
 <template>
     <div id="app">
         <p class="null-text" v-if="nullType">{{nullType}}</p>
-        <div class="video-max-box" v-if="buttonType">
+        <div class="video-max-box" v-if="buttonType == 1">
             <H5PlayerVideo class="video-box" v-for="(item,index) in videoList" :key="index"
                            :videoProps="item" :style="'width:'+item.width+'px;height:'+item.height+'px;'"></H5PlayerVideo>
         </div>
+        <div class="video-max-box" v-if="buttonType == 2">
+            <H5PlayerVideoTime :videoProps="videoProps"></H5PlayerVideoTime>
+        </div>
     </div>
 </template>
 
 <script>
     import H5PlayerVideo from './components/H5PlayerVideo.vue';
-    import { iotCameraFindByCondition } from "@/api/index";
+    import H5PlayerVideoTime from './components/H5PlayerVideoTime/H5PlayerVideoTime.vue';
+    import { iotCameraFindByCondition,iotCameraGetPlaybackURLs } from "@/api/index";
 
     export default {
         name: 'app',
         components: {
-            H5PlayerVideo
+            H5PlayerVideo,
+            H5PlayerVideoTime
         },
         data() {
             return {
-                buttonType: false,
+                buttonType: 0,
                 width: null,
                 height: null,
                 videoList: [],
                 nullType:false,
+                //报警视频数据
+                videoProps:null,
             }
         },
         created() {
@@ -39,18 +46,68 @@
         },
         methods: {
             getUrl() {
-                let self = this;
                 let text = window.location.href;
-                if(text.indexOf('touken') == -1){
+                if(text.indexOf('touken') != -1){
+                    this.subVideo(text);
+                }else if(text.indexOf('cameraIndexCode') != -1){
+                    this.warningVideo(text);
+                }else{
                     this.$set(this,'nullType','参数异常,请联系管理员');
+                }
+            },
+            warningVideo(text){
+                let self = this;
+                if(text.indexOf('cameraIndexCode') == -1){
+                    this.$set(this,'nullType','cameraIndexCode参数异常,请联系管理员');
+                    return
+                }
+                if(text.indexOf('startTime') == -1){
+                    this.$set(this,'nullType','startTime参数异常,请联系管理员');
+                    return
+                }
+                if(text.indexOf('endTime') == -1){
+                    this.$set(this,'nullType','endTime参数异常,请联系管理员');
+                    return
+                }
+                let urlList = text.split("?")[1].split("&");
+                let urlData = {};
+                urlList.forEach((item) => {
+                    urlData[item.split("=")[0]] = item.split("=")[1];
+                });
+                //视频回放流地址
+                let obj = {
+                    cameraIndexCode :urlData.cameraIndexCode, //摄像头编号
+                    protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+                    startTime:urlData.startTime,    //开始时间 2025-03-07 09:29:00
+                    endTime :urlData.endTime,    //结束时间
+                }
+                iotCameraGetPlaybackURLs(obj).then(response => {
+                    let newObj = {
+                        width: this.width, //(宽度:非必传-默认600)
+                        height: this.height, //(高度:非必传-默认338)
+                        url: response.data,
+                        cameraIndexCode: obj.cameraIndexCode,
+                    }
+                    this.$set(this,'videoProps',newObj);
+                    this.$nextTick(()=>{
+                        setTimeout(function(){
+                            self.$set(self, 'buttonType', 2);
+                        },1000);
+                    })
+                })
+            },
+            subVideo(text){
+                let self = this;
+                if(text.indexOf('touken') == -1){
+                    this.$set(this,'nullType','touken参数异常,请联系管理员');
                     return
                 }
                 if(text.indexOf('source') == -1){
-                    this.$set(this,'nullType','参数异常,请联系管理员');
+                    this.$set(this,'nullType','source参数异常,请联系管理员');
                     return
                 }
                 if(text.indexOf('type') == -1){
-                    this.$set(this,'nullType','参数异常,请联系管理员');
+                    this.$set(this,'nullType','type参数异常,请联系管理员');
                     return
                 }
                 let urlList = text.split("?")[1].split("&");
@@ -100,7 +157,7 @@
                             this.$set(this,'videoList',list)
                             this.$nextTick(()=>{
                                 setTimeout(function(){
-                                    self.$set(self, 'buttonType', true);
+                                    self.$set(self, 'buttonType', 1);
                                 },1000);
                             })
                         }

src/api/index.js

@@ -8,3 +8,11 @@ export function iotCameraFindByCondition(data) {
     data: data
   })
 }
+//获取摄像头流地址
+export function iotCameraGetPlaybackURLs(query) {
+  return request({
+    url: '/iot/camera/getPlaybackURLs',
+    method: 'get',
+    params: query
+  })
+}

src/components/H5PlayerVideoTime/H5PlayerVideoTime.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="H5PlayerVideoTime">
+    <div :id="videoData.id" :ref="videoData.id"></div>
+    <p class="full-screen-button" v-if="!fullScreenType" @click="fullScreen"></p>
+    <p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>
+    <timeInput ref="progressBar"  class="timeInput-max-big-box"></timeInput>
+    <!--<p class="full-screen-button" @click="fullScreen"></p>-->
+    <!--<p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>-->
+  </div>
+</template>
+
+<script>
+  import timeInput from "@/components/H5PlayerVideoTime/timeInput.vue";
+  export default {
+    name: 'H5PlayerVideoTime',
+    components: {
+      timeInput,
+    },
+    props: {
+      videoProps: {}
+    },
+    data() {
+      return {
+        fullScreenType:false,
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData: {},
+      }
+    },
+    created() {
+      this.$set(this, 'videoData', {
+        id: 'video_' + this.generateRandomString(),
+        width: this.videoProps.width ? this.videoProps.width : 600,
+        height: this.videoProps.height ? this.videoProps.height : 338,
+        url: this.videoProps.url
+      })
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initH5Player(1)
+        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
+        this.initPlayer(this.videoData.url, 0,type)
+      })
+    },
+    methods: {
+      //全屏
+      fullScreen() {
+        if(this.$parent.$parent.stopTime){
+          this.$parent.$parent.stopTime(this.videoProps);
+        }else if(this.$parent.stopTime){
+          this.$parent.stopTime(this.videoProps);
+        }else{
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+          this.$set(this,'fullScreenType',false);
+        }
+      },
+      //退出全屏
+      outFullScreen() {
+        let self = this;
+        this.myPlugin.JS_FullScreenDisplay(false).then(
+          (res) => {
+            console.info('JS_FullScreenDisplay success');
+            // do you want...
+          },
+          (err) => {
+            console.info('JS_FullScreenDisplay failed');
+            // do you want...
+          }
+        );
+        self.$set(self,'fullScreenType',false);
+      },
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: this.videoData.id, //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
+          openDebug: true,
+          oStyle: {
+            borderSelect: '#000'
+          },
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          iWidth: this.videoData.width,
+          iHeight: this.videoData.height,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split
+        })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
+        // 事件回调绑定
+        this.myPlugin.JS_SetWindowControlCallback({
+          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+            // console.log('windowSelect callback: ', iWndIndex)
+          },
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          },
+          windowEventOver: function (iWndIndex) {  //鼠标移过回调
+            //console.log(iWndIndex);
+          },
+          windowEventOut: function (iWndIndex) {  //鼠标移出回调
+            //console.log(iWndIndex);
+          },
+          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+            //console.log(iWndIndex);
+          },
+          windowFullCcreenChange: function (bFull) {  //全屏切换回调
+            // console.log('fullScreen callback: ', bFull)
+          },
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          },
+          performanceLack: function () {  //性能不足回调
+            // console.log('performanceLack callback: ')
+          }
+        })
+      },
+      initPlayer(url, index,type) {
+        let newUrl = url.split("?")[0]
+        let list = url.split("?")[1].split("&");
+        let timeData = {};
+        list.forEach((item) => {
+          timeData[item.split("=")[0]] = item.split("=")[1];
+        })
+        let startTime = timeData.beginTime +".000+08:00";
+        let endTime = timeData.endTime + ".000+08:00";
+        this.myPlugin.JS_Play(newUrl,
+          {
+            playURL: newUrl, // 流媒体播放时必传
+            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
+            // ...
+          },
+          index, //当前窗口下标
+          startTime,
+          endTime
+        ).then(
+          () => {
+            // console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_Play failed:', err)
+            // do you want...
+          }
+        )
+        // 初始化进度条（示例时间）
+        this.$refs.progressBar.init(
+          timeData.beginTime,
+          timeData.endTime
+        );
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+        let randomString = ''
+        for (let i = 0; i < 24; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length)
+          randomString += chars.charAt(randomIndex)
+        }
+        return randomString
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            console.info('JS_StopRealPlayAll success')
+            // do you want...
+          },
+          (err) => {
+            console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
+      },
+      //定位时间
+      seeTo(time1,time2){
+        let seekStart = time1 +".000+08:00";
+        let endTime = time2 + ".000+08:00";
+        this.myPlugin.JS_Seek(this.myPlugin.currentWindowIndex, seekStart, endTime).then(
+          () => { console.log('seekTo success') },
+          e => { console.error(e) }
+        )
+      },
+      //暂停
+      playbackPause() {
+        this.myPlugin.JS_Pause(this.myPlugin.currentWindowIndex).then(
+          () => { console.log('playbackPause success') },
+          e => { console.error(e) }
+        )
+      },
+      //恢复
+      playbackResume() {
+        this.myPlugin.JS_Resume(this.myPlugin.currentWindowIndex).then(
+          () => { console.log('playbackResume success') },
+          e => { console.error(e) }
+        )
+      },
+    },
+    beforeDestroy() {
+      let self = this
+      self.videoOff()
+    }
+  }
+</script>
+
+<style scoped>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+  .H5PlayerVideoTime {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    position: relative;
+  }
+  .full-screen-button {
+    background: url("../../assets/icon_0.png");
+    background-size: 100%;
+    position: absolute;
+    font-size: 20px;
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    text-align: center;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+  .full-failed-button {
+      background: url("../../assets/icon_1.png");
+      background-size: 100%;
+      position: fixed;
+      font-size: 20px;
+      height: 30px;
+      width: 30px;
+      line-height: 30px;
+      text-align: center;
+      bottom: 10px;
+      right: 10px;
+      z-index: 999999;
+      cursor: pointer;
+  }
+  .timeInput-max-big-box {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      z-index: 1;
+      width:100%;
+      /*width: 379px;*/
+      height: 40px;
+      background: rgba(0, 0, 0, 0.4);
+      display: flex;
+  }
+</style>

src/components/H5PlayerVideoTime/fullH5PlayerVideo.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="fullH5PlayerVideo">
+    <div style="height:100%;width:100%;" :id="videoData.id+'full'" :ref="videoData.id"></div>
+    <p class="full-failed-button" @click="outFullScreen"></p>
+    <timeInput ref="progressBarTime"></timeInput>
+  </div>
+</template>
+
+<script>
+  import timeInput from "@/components/H5PlayerVideoTime/timeInput.vue";
+  export default {
+    name: 'fullH5PlayerVideo',
+    components: {
+      timeInput,
+    },
+    props: {
+      fullVideoProps: {}
+    },
+    data() {
+      return {
+        fullScreenType:false,
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData: {},
+        //全屏相关
+        innerWidth:window.innerWidth,
+        innerHeight:window.innerHeight,
+      }
+    },
+    created() {
+      this.$set(this, 'videoData', {
+        id: 'video_' + this.generateRandomString(),
+        url: this.fullVideoProps.url
+      })
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initH5Player(1)
+        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
+        this.initPlayer(this.videoData.url, 1,type)
+      })
+    },
+    methods: {
+      //全屏
+      fullScreen() {
+        let self = this;
+        if(this.$parent.stopTime){
+          this.$parent.stopTime(JSON.parse(JSON.stringify(this.fullVideoProps)));
+        }else{
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+          self.$set(self,'fullScreenType',true);
+        }
+      },
+      //退出全屏
+      outFullScreen() {
+        this.$parent.outFullScreen();
+      },
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: this.videoData.id+'full', //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
+          openDebug: true,
+          oStyle: {
+            borderSelect: '#000'
+          },
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          // iWidth: this.innerWidth,
+          // iHeight: this.innerHeight,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split
+        })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
+        // 事件回调绑定
+        this.myPlugin.JS_SetWindowControlCallback({
+          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+            // console.log('windowSelect callback: ', iWndIndex)
+          },
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          },
+          windowEventOver: function (iWndIndex) {  //鼠标移过回调
+            //console.log(iWndIndex);
+          },
+          windowEventOut: function (iWndIndex) {  //鼠标移出回调
+            //console.log(iWndIndex);
+          },
+          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+            //console.log(iWndIndex);
+          },
+          windowFullCcreenChange: function (bFull) {  //全屏切换回调
+            // console.log('fullScreen callback: ', bFull)
+          },
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          },
+          performanceLack: function () {  //性能不足回调
+            // console.log('performanceLack callback: ')
+          }
+        })
+      },
+      initPlayer(url, index, type) {
+        let newUrl = url.split("?")[0]
+        let list = url.split("?")[1].split("&");
+        let timeData = {};
+        list.forEach((item) => {
+          timeData[item.split("=")[0]] = item.split("=")[1];
+        })
+        let startTime = timeData.beginTime +".000+08:00";
+        let endTime = timeData.endTime + ".000+08:00";
+        this.myPlugin.JS_Play(newUrl,
+          {
+            playURL: newUrl, // 流媒体播放时必传
+            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
+            // ...
+          },
+          index, //当前窗口下标
+          startTime,
+          endTime
+        ).then(
+          () => {
+            // console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_Play failed:', err)
+            // do you want...
+          }
+        )
+        // 初始化进度条（示例时间）
+        this.$refs.progressBarTime.init(
+          timeData.beginTime,
+          timeData.endTime
+        );
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+        let randomString = ''
+        for (let i = 0; i < 24; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length)
+          randomString += chars.charAt(randomIndex)
+        }
+        return randomString
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            // console.info('JS_StopRealPlayAll success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
+      },
+      //定位时间
+      seeTo(time1,time2){
+        let seekStart = time1 +".000+08:00";
+        let endTime = time2 + ".000+08:00";
+        this.myPlugin.JS_Seek(this.myPlugin.currentWindowIndex, seekStart, endTime).then(
+          () => { console.log('seekTo success') },
+          e => { console.error(e) }
+        )
+      },
+      //暂停
+      playbackPause() {
+        this.myPlugin.JS_Pause(this.myPlugin.currentWindowIndex).then(
+          () => { console.log('playbackPause success') },
+          e => { console.error(e) }
+        )
+      },
+      //恢复
+      playbackResume() {
+        this.myPlugin.JS_Resume(this.myPlugin.currentWindowIndex).then(
+          () => { console.log('playbackResume success') },
+          e => { console.error(e) }
+        )
+      },
+    },
+    beforeDestroy() {
+      let self = this
+      self.videoOff()
+    }
+  }
+</script>
+
+<style scoped>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+  .fullH5PlayerVideo {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    z-index:11;
+    height: 100%;
+    width:100%;
+    position: fixed;
+    top:1px;
+    left:1px;
+    /*position: relative;*/
+  }
+  .full-failed-button {
+    background: url("../../assets/icon_1.png");
+    background-size: 100%;
+    position: fixed;
+    font-size: 20px;
+    height: 50px;
+    width: 50px;
+    line-height: 30px;
+    text-align: center;
+    top: 40px;
+    right: 40px;
+    z-index: 12;
+    cursor: pointer;
+  }
+</style>

src/components/H5PlayerVideoTime/timeInput.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="timeInput-max-big-box">
+    <div class="time-display">
+      <span>{{ formattedHours }}</span>:
+      <span>{{ formattedMinutes }}</span>:
+      <span>{{ formattedSeconds }}</span>
+    </div>
+    <div class="time-input-box">
+      <input
+        class="time-input"
+        type="range"
+        v-model="progress"
+        :max="totalSeconds"
+        min="0"
+        @input="updateTimeDisplay"
+        @change="handleDragEnd"
+      >
+    </div>
+    <p class="icon-play-button" @click="videoTypeButton()"
+       :class="playType?'el-icon-video-play':'el-icon-video-pause'"></p>
+  </div>
+</template>
+
+<script>
+  // 参数1转时间戳（ISO格式转毫秒）
+  const param1ToTimestamp = (datetimeStr) => {
+    return new Date(datetimeStr).getTime();
+  };
+
+  // 参数2转时间戳（秒转毫秒）
+  const param2ToTimestamp = (seconds) => {
+    return seconds * 1000;
+  };
+
+  // 总时间戳转回ISO格式
+  const timestampToISO = (timestamp) => {
+    const date = new Date(timestamp);
+    const pad = (n) => n.toString().padStart(2, '0'); // 补零函数‌:ml-citation{ref="3" data="citationList"}
+
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
+      `T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+  };
+  export default {
+    data() {
+      return {
+        totalSeconds: 0,   // 总秒数（进度条最大值）
+        progress: 0,       // 当前进度（秒数）
+        playType: false,
+        timer: null,
+        startTime:null,
+        endTime:null,
+      }
+    },
+    computed: {
+      // 格式化小时（补零）
+      formattedHours() {
+        return Math.floor(this.progress / 3600).toString().padStart(2, '0')
+      },
+      // 格式化分钟（补零）
+      formattedMinutes() {
+        return Math.floor((this.progress % 3600) / 60).toString().padStart(2, '0')
+      },
+      // 格式化秒数（补零）
+      formattedSeconds() {
+        return (this.progress % 60).toString().padStart(2, '0')
+      }
+    },
+    methods: {
+      /**
+       * 初始化方法
+       * @param {string} startTime - ISO格式开始时间
+       * @param {string} endTime - ISO格式结束时间
+       */
+      init(startTime, endTime) {
+        this.$set(this,'startTime',startTime);
+        this.$set(this,'endTime',endTime);
+        const start = new Date(startTime)
+        const end = new Date(endTime)
+        const diff = end.getTime() - start.getTime()
+        this.totalSeconds = Math.floor(diff / 1000)
+        this.progress = 0
+        this.timeFunction()
+      },
+      /**
+       * 更新时间显示（处理拖动时的值变化）
+       */
+      updateTimeDisplay() {
+        // 保证进度值在合法范围内
+        this.progress = Math.min(Math.max(this.progress, 0), this.totalSeconds)
+      },
+      // 拖动方法
+      handleDragEnd() {
+        if(!this.timer){
+          this.$parent.playbackResume();
+          this.timeFunction()
+          this.$set(this, 'playType', false)
+        }
+        this.$parent.seeTo(this.calculateFinalTime(this.startTime,this.progress),this.endTime)
+      },
+      //播放/暂停调用
+      videoTypeButton() {
+        if (this.playType) {
+          //恢复
+          this.$parent.playbackResume();
+          this.timeFunction()
+          this.$set(this, 'playType', !this.playType)
+        } else {
+          //暂停
+          this.$parent.playbackPause();
+          window.clearInterval(this.timer)
+          this.$set(this, 'timer', null)
+          this.$set(this, 'playType', !this.playType)
+        }
+      },
+      //时间定时器
+      timeFunction() {
+        let self = this
+        this.timer = window.setInterval(showTime, 1000)
+        function showTime() {
+          if (self.progress < self.totalSeconds) {
+            self.progress++
+          } else {
+            self.$parent.seeTo(self.startTime,self.endTime)
+            self.$set(self, 'progress', 0)
+          }
+        }
+      },
+      //拖动计算
+      calculateFinalTime(param1, param2) {
+        // 转换时间戳并相加
+        const totalTimestamp = param1ToTimestamp(param1) + param2ToTimestamp(param2)
+        // 转回目标格式
+        return timestampToISO(totalTimestamp)
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      window.clearInterval(this.timer)
+      this.$set(this, 'timer', null)
+    },
+    destroyed() {
+      //清除定时器
+      window.clearInterval(this.timer)
+      this.$set(this, 'timer', null)
+    }
+  }
+</script>
+
+<style scoped>
+  .timeInput-max-big-box {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    width:100%;
+    /*width: 379px;*/
+    height: 40px;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+  }
+  .time-input-box {
+    margin-top: 1px;
+    flex: 1;
+    display: flex;
+  }
+  .time-input {
+    flex: 1;
+    /*width:220px;*/
+  }
+  .time-display {
+    padding: 0 10px;
+    margin-top: 10px;
+    font-size: 16px;
+    color: #fff;
+  }
+  .icon-play-button {
+    cursor: pointer;
+    font-size: 22px;
+    color: #E0E0E0;
+    margin: 9px 10px 0 10px;
+  }
+  .icon-play-button:hover {
+    color: #0183FA;
+  }
+</style>