基于LivePlayer的录像回放页面

太过爱你忘了你带给我的痛 2023-07-17 06:57 91阅读 0赞

在视频播放中，少不了录像回放功能。其回放功能进行接口调用暂且不谈，主要记录下包含回放条的录像回放页面。

html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>录像回放窗口</title>
  6.         <link href="../../layui/css/layui.css" rel="stylesheet" />
  7.         <link href="../css/timeRule.css" rel="stylesheet" />
  8.         <style>
  9.             html,body{
  10.                 height: 100%;
  11.                 width: 100%;
  12.             }
  13.             .page {
  14.                 height: 100%;
  15.                 width: 100%;
  16.             } 
  17.             .header {
  18.                 height: 15%;
  19.                 text-align: center;
  20.             }
  21.             .content {
  22.                 height: 70%;
  23.             }
  24.             .footer {
  25.                 height: 15%;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div class="page" id="videoTape">
  31.             <div class="layui-row header">
  32.                 <blockquote class="layui-elem-quote">{
  33.    {cameraData.address}} {
  34.    {cameraData.name}}( {
  35.    {cameraData.main_channel}} )</blockquote>
  36.                 <div class="layui-row" style="text-align: center;">
  37.                     时间：
  38.                     <div class="layui-input-inline">
  39.                         <input class="layui-input" id="dateTime" type="text" placeholder="yyyy-MM-dd">
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.             <div class="layui-row content">
  44.                 <div style="width:50%; padding-left: 25%;">
  45.                     <live-player id="livePalyer" live muted :video-url="videoUrl">
  46.                     </live-player>
  47.                 </div>
  48.             </div>
  49.             <div class="footer">
  50.                 <div class="time-rule box-div">
  51.                     <div class="time-day box-div" ref="day" :style="{ left: timeDayX + 'px'}">
  52.                         <div class="box-div" :class="['time-minute', minuteActiveClass((n - 1)*minutesPerUnit)]" :style="{width: minutesPerUnit + 'px'}" :title="minuteTitle((n - 1)*minutesPerUnit)"
  53.                             v-for="n in (1440/minutesPerUnit)" :key="n" @click.prevent="clickMinute((n-1)*minutesPerUnit)"></div>
  54.                         <div class="box-div" :class="[ k==1 ? 'time-text-first' : 'time-text']" v-for="k in 24">{
  55.    {hourText(k - 1)}}</div>
  56.                     </div>
  57.                     <div class="time-cursor box-div" :style="{ left: timeCursorX + 'px'}" ref="cursor">
  58.                         <div class="time-cursor-text box-div">{
  59.    {timeCursorText}}</div>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.         <script type="text/javascript" src="../../js/lib/jquery/jquery.min.js"></script>
  65.         <script type="text/javascript" src="../../layui/layui.js"></script>
  66.         <script type="text/javascript" src="../../js/lib/vue/vue.js"></script>
  67.         <script type="text/javascript" src="../../video/livePlayer/liveplayer-element.min.js"></script>
  68.         <script type="text/javascript" src="../../video/js/lib/moment.min.js"></script>
  69.         <script type="text/javascript" src="../../js/common/common.js"></script>
  70.         <script type="text/javascript" src="../../video/js/common/liveCommon.js"></script>
  71.         <script type="text/javascript" src="../../video/js/videotapeWin.js"></script>
  72.     </body>
  74. </html>

js

  1. /**
  2.  * 录像回放窗口
  3.  * @author chenbin
  4.  * 
  5.  */
  6. var cameraData = url.getUrlParms("record");
  7. cameraData = JSON.parse(cameraData);
  9. var startDate = new Date(); //开始时间
  10. startDate.setHours(0);
  11. startDate.setMinutes(0);
  12. startDate.setSeconds(0);
  13. var endDate = new Date(); //结束时间
  15. var vm = new Vue({
  16.     el: "#videoTape",
  17.     data: {
  18.         cameraData: cameraData,
  19.         timerange: [
  20.             startDate,
  21.             endDate
  22.         ],
  23.         videos: [],
  24.         video: null,
  25.         videoUrl: "",
  26.         streamID: "",
  27.         day:Format.dateFormat(new Date(),"YYYY/MM/DD"),
  28.         timeCursorX: 0,
  29.         timeDayX: 0,
  30.         bMoving: false,
  31.         minutesArr:[],
  32.         minutesPerUnit: 5
  33.     },
  34.     watch: {
  35.         videos: function(val) {
  36.             this.triggerTimeChange();
  37.         },
  38.         video: function(newVal, oldVal) {
  39.             if (newVal && newVal != oldVal) {
  40.                 this.startPlayback();
  41.             } else {
  42.                 this.stopPlayback();
  43.             }
  44.         },
  45.         day:function(newVal, oldVal){
  46.             if(newVal != oldVal){
  47.                 var start = new Date(newVal);
  48.                 start.setHours(0);
  49.                 start.setMinutes(0);
  50.                 start.setSeconds(0);
  51.                 var end = new Date(newVal);
  52.                 end.setHours(23);
  53.                 end.setMinutes(59);
  54.                 end.setSeconds(59);
  55.                 this.timerange = [
  56.                   start,
  57.                   end
  58.                 ]
  59.                 this.getRecords(true);
  60.             }
  61.         },
  62.         minutesArr:function(val){
  63.             var today = new Date();
  64.             var day = new Date(this.day);
  65.             if(day.getDate() != today.getDate()){
  66.                 var time = 0;
  67.                 if(this.minutesArr.length>0){
  68.                     time = Math.min.apply(null, this.minutesArr) + 5;
  69.                 }
  70.                 this.timeCursorText = time;
  71.             }else{
  72.                 var h = today.getHours();
  73.                 var m = today.getMinutes();
  74.                 this.timeCursorText = h * 60 + m - 10;
  75.             }
  76.             this.triggerTimeChange();
  77.         }
  78.     },
  79.     mounted() { //加载完成后
  80.         let cursor = this.$refs.cursor;
  81.         let day = this.$refs.day;
  82.         let rule = this.$el;
  83.         let _this = this;
  85.         function moveCursor(e) {
  86.             let originPageX = $(cursor).data("originPageX");
  87.             let dx = e.pageX - originPageX;
  88.             _this.timeCursorX = $(cursor).position().left + dx;
  89.             $(cursor).data("originPageX", e.pageX);
  90.         }
  92.         function touchMoveCursor(e) {
  93.             let touch = e.originalEvent.targetTouches[0];
  94.             let originPageX = $(cursor).data("originPageX");
  95.             let dx = touch.pageX - originPageX;
  96.             _this.timeCursorX = $(cursor).position().left + dx;
  97.             $(cursor).data("originPageX", touch.pageX);
  98.         }
  100.         function moveDay(e) {
  101.             let originPageX = $(day).data("originPageX");
  102.             let dx = e.pageX - originPageX;
  103.             _this.timeDayX = $(day).position().left + dx;
  104.             $(day).data("originPageX", e.pageX);
  105.         }
  107.         function touchMoveDay(e) {
  108.             let touch = e.originalEvent.targetTouches[0];
  109.             let originPageX = $(day).data("originPageX");
  110.             let dx = touch.pageX - originPageX;
  111.             _this.timeDayX = $(day).position().left + dx;
  112.             $(day).data("originPageX", touch.pageX);
  113.         }
  114.         $(cursor).on("mousedown", function(e) {
  115.             $(cursor).data("originPageX", e.pageX);
  116.             _this.bMoving = true;
  117.             $(document).on("mousemove", moveCursor).one("mouseup", function(e) {
  118.                 $(document).off("mousemove", moveCursor);
  119.                 $(cursor).removeData("originPageX");
  120.                 _this.triggerTimeChange();
  121.                 _this.bMoving = false;
  122.             })
  123.         }).on("touchstart", function(e) {
  124.             let touch = e.originalEvent.targetTouches[0];
  125.             $(cursor).data("originPageX", touch.pageX);
  126.             _this.bMoving = true;
  127.             $(document).on("touchmove", touchMoveCursor).one("touchend", function(e) {
  128.                 $(document).off("touchmove", touchMoveCursor);
  129.                 $(cursor).removeData("originPageX");
  130.                 _this.triggerTimeChange();
  131.                 _this.bMoving = false;
  132.             })
  133.         })
  135.         $(day).on("mousedown", function(e) {
  136.             if ($(e.target).hasClass("time-minute")) {
  137.                 return false;
  138.             }
  139.             $(day).data("originPageX", e.pageX);
  140.             _this.bMoving = true;
  141.             $(document).on("mousemove", moveDay).one("mouseup", function(e) {
  142.                 $(document).off("mousemove", moveDay);
  143.                 $(day).removeData("originPageX");
  144.                 _this.triggerTimeChange();
  145.                 _this.bMoving = false;
  146.             })
  147.         }).on("touchstart", function(e) {
  148.             if ($(e.target).hasClass("time-minute")) {
  149.                 return false;
  150.             }
  151.             let touch = e.originalEvent.targetTouches[0];
  152.             $(day).data("originPageX", touch.pageX);
  153.             _this.bMoving = true;
  154.             $(document).on("touchmove", touchMoveDay).one("touchend", function(e) {
  155.                 $(document).off("touchmove", touchMoveDay);
  156.                 $(day).removeData("originPageX");
  157.                 _this.triggerTimeChange();
  158.                 _this.bMoving = false;
  159.             })
  160.         })
  162.         let mmt = moment();
  163.         let n = mmt.diff(mmt.clone().startOf('day'), 'minutes');
  164.         n -= 10;
  165.         if (n < 0) n = 0;
  166.         this.clickMinute(n);
  167.         this.getRecords(true);
  168.     },
  169.     methods: {
  170.         hourText(n) {
  171.             let h = moment().hour(n).minute(0).second(0);
  172.             return h.format("HH:mm");
  173.         },
  174.         minuteActiveClass(n) {
  175.             let m = moment().hour(0).minute(n);
  176.             let mtext = m.format("HH:mm");
  177.             return Object.keys(this.activeMinutes).indexOf(mtext) >= 0 ? "active" : "";
  178.         },
  179.         minuteTitle(n) {
  180.             let m = moment().hour(0).minute(n);
  181.             let mtext = m.format("HH:mm");
  182.             return Object.keys(this.activeMinutes).indexOf(mtext) >= 0 ? mtext : "";
  183.         },
  184.         clickMinute(n, bTrigger = true) {
  185.             if (this.bMoving) return;
  186.             this.timeCursorX = n + this.timeDayX;
  187.             if (bTrigger) {
  188.                 this.triggerTimeChange();
  189.             }
  190.         },
  191.         triggerTimeChange() {
  192.             this.onTimeChange(this.activeMinutes[this.timeCursorText]);
  193.         },
  194.         onTimeChange(video) {
  195.             this.video = video;
  196.         },
  197.         getRecords(refresh) {
  198.             if (refresh) {
  199.                 this.videos = [];
  200.             }
  201.             var p = {
  202.                 serial: this.cameraData.main_channel,
  203.                 starttime: moment(this.timerange[0]).format("YYYY-MM-DDTHH:mm:ss"),
  204.                 endtime: moment(this.timerange[1]).format("YYYY-MM-DDTHH:mm:ss")
  205.             }
  206.             Live.videotape.list(cameraData.nvr_id, p, function(e) {
  207.                 var items = e.RecordList || [];
  208.                 vm.videos = vm.videos.concat(items.filter(item => {
  209.                     if (!item || !item.StartTime || !item.EndTime) {
  210.                         return false;
  211.                     }
  212.                     return true;
  213.                 }));
  214.             })
  215.         },
  216.         stopPlayback() {
  217.             if(comm.isEmpty(this.streamID)){
  218.                 return;
  219.             }
  220.             Live.videotape.stopPlay(this.cameraData.nvr_id, {
  221.                 streamid: this.streamID
  222.             }, function(e) {
  223.                 vm.streamID = "";
  224.                 vm.videoUrl = "";
  225.             });
  226.         },
  227.         startPlayback() {
  228.             var p = {
  229.                 serial: this.video.DeviceID,
  230.                 starttime: this.video.StartTime,
  231.                 endtime: this.video.EndTime
  232.             }
  233.             if(!comm.isEmpty(this.streamID)){
  234.                 Live.videotape.stopPlay(this.cameraData.nvr_id, {
  235.                     streamid: this.streamID
  236.                 }, function(e) {
  237.                     vm.streamID = "";
  238.                     vm.videoUrl = "";
  239.                     Live.videotape.startPlay(this.cameraData.nvr_id, p, function(e) {
  240.                         vm.streamID = e.StreamID;
  241.                         vm.videoUrl = e.WS_FLV;
  242.                     })
  243.                 });
  244.             }else{
  245.                 Live.videotape.startPlay(this.cameraData.nvr_id, p, function(e) {
  246.                     vm.streamID = e.StreamID;
  247.                     vm.videoUrl = e.WS_FLV;
  248.                 })
  249.             }
  250.         },
  251.         countTime(str){
  252.             var times = str.split(":");
  253.             var t = parseInt(times[0]) * 60 + parseInt(times[1]);
  254.             return t;
  255.         },
  256.         countPosition(){
  257.             let this_ = this;
  258.             setTimeout(function(){
  259.                 if (this_.timeCursorX >= $(this_.$el).innerWidth()) {
  260.                     this_.timeCursorX = $(this_.$el).innerWidth() - 1;
  261.                 }
  262.                 if (this_.timeCursorX < 0) {
  263.                     this_.timeCursorX = 0;
  264.                 }
  265.                 if (this_.timeDayX < $(this_.$el).innerWidth() - $(this_.$refs.day).outerWidth()) {
  266.                     this_.timeDayX = $(this_.$el).innerWidth() - $(this_.$refs.day).outerWidth();
  267.                 }
  268.                 if (this_.timeDayX > 0) {
  269.                     this_.timeDayX = 0;
  270.                 }
  271.                 if (this_.timeCursorX - this_.timeDayX >= 1440) {
  272.                     this_.timeDayX = $(this_.$el).innerWidth() - $(this_.$refs.day).outerWidth();
  273.                     this_.timeCursorX = $(this_.$el).innerWidth() - 1;
  274.                 }
  275.             },100)
  276.         }
  277.     },
  278.     computed: {
  279.         timeCursorText: {
  280.             get:function(){
  281.                 this.countPosition();
  282.                 var mx = parseInt((this.timeCursorX - this.timeDayX) / this.minutesPerUnit) * this.minutesPerUnit;
  283.                 var m = moment().hour(0).minute(mx);
  284.                 return m.format("HH:mm");
  285.             },
  286.             set:function(time){
  287.                 this.timeCursorX = time;
  288.             }
  290.         },
  291.         activeMinutes() {
  292.             var minutes = {};
  293.             var minArr = [];
  294.             var idx = 0;
  295.             for (var video of this.videos) {
  296.                 var start = moment(video.StartTime, "YYYY-MM-DDTHH:mm:ss");
  297.                 var end = moment(video.EndTime, "YYYY-MM-DDTHH:mm:ss");
  298.                 if (!start.isSame(end, "day")) { // 跨天
  299.                     if (idx == 0) {
  300.                         start = moment(end).startOf("day");
  301.                     } else {
  302.                         end = moment(start).endOf("day");
  303.                     }
  304.                 }
  305.                 var _start = moment(start).startOf("hour");
  306.                 for (var i = 0;; i += 5) {
  307.                     var c = moment(_start).add(i, "minute");
  308.                     if (c.isBefore(start, "minute")) {
  309.                         continue;
  310.                     }
  311.                     if (c.isAfter(end, "minute")) {
  312.                         break;
  313.                     }
  314.                     var mtext = c.format("HH:mm");
  315.                     minArr.push(this.countTime(mtext));
  316.                     minutes[mtext] = Object.assign({}, video, {
  317.                         StartTime: c.format("YYYY-MM-DDTHH:mm:ss")
  318.                     });
  319.                 }
  320.                 idx++;
  321.             }
  322.             this.minutesArr = minArr;
  323.             return minutes;
  324.         }
  325.     }
  326. })
  328. layui.use('laydate', function() {
  329.     var laydate = layui.laydate;
  331.     var nowDate = Format.dateFormat(new Date(), "YYYY-MM-DD");
  333.     //常规用法
  334.     laydate.render({
  335.         elem: '#dateTime',
  336.         value: nowDate,
  337.         showBottom: false,
  338.         max: nowDate,
  339.         done: function(value, date, endDate) {
  340.             vm.day = value.replace(/-/g,"/");
  341.         }
  342.     });
  344. })

css

  1. /**
  2.  * 录像回放css
  3.  */
  4. .time-rule {
  5.     overflow: hidden;
  6.     position: relative;
  7.     height: 50px;
  8.     margin: 0 auto;
  9.     width: 100%;
  10.     font-size: 12px;
  11.     max-width: 1440px;
  12.     background-color: #CCC;
  13. }
  15. .time-day {
  16.     position: absolute;
  17.     left: 0;
  18.     top: 0;
  19.     height: 100%;
  20.     width: 1440px;
  21.     cursor: pointer;
  22.     -ms-user-select: none;
  23.     user-select: none;
  24. }
  26. .time-minute {
  27.     float: left;
  28.     height: 8px;
  29.     margin: 0;
  30.     cursor: default;
  31. }
  33. .time-minute.active {
  34.     background-color: #556677;
  35.     cursor: pointer;
  36. }
  38. .time-text {
  39.     float: left;
  40.     width: 60px;
  41.     border-left: 1px solid #999;
  42.     border-top: 1px solid #999;
  43.     -ms-user-select: none;
  44.     user-select: none;
  45.     text-align: center;
  46.     height: 25px;
  47.     line-height: 25px;
  48. }
  50. .time-text-first {
  51.     border-left: 0;
  52.     float: left;
  53.     width: 60px;
  54.     border-top: 1px solid #999;
  55.     -ms-user-select: none;
  56.     user-select: none;
  57.     text-align: center;
  58.     height: 25px;
  59.     line-height: 25px;
  61. }
  63. .time-cursor {
  64.     position: absolute;
  65.     left: 0;
  66.     top: 0;
  67.     height: 30px;
  68.     width: 2px;
  69.     background-color: red;
  70.     text-align: center;
  71. }
  73. .time-cursor-text {
  74.     position: absolute;
  75.     padding: 0 5px;
  76.     width: 60px;
  77.     left: -30px;
  78.     top: 30px;
  79.     border: 1px solid red;
  80.     height: 15px;
  81.     line-height: 15px;
  82.     cursor: move;
  83.     background-color: white;
  84.     -ms-user-select: none;
  85.     user-select: none;
  86. }
  88. .box-div{
  89.     box-sizing:border-box;
  90.     -moz-box-sizing:border-box; /* Firefox */
  91.     -webkit-box-sizing:border-box; /* Safari */
  92. }

效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读