完善web一些功能

Web/html/body/video.html

@@ -42,15 +42,18 @@
             <input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on checked>
         </div>
 
-        <div class="layui-col-xs5" style="text-align: center;">
+        <div class="layui-col-xs4" style="text-align: center;">
             &nbsp; <div id="slider" lay-options="{value: 100,input:true}"></div>
             <span>弹幕透明度</span>
         </div>
+        <div class="layui-col-xs2" style="text-align: right; align-self: center;">
+            弹幕装载数:<span id="danmuSize">你猜</span>
+        </div>
     </div>
     <div class="layui-row">
         <div class="layui-col-xs2">&nbsp;</div>
-        <div class="layui-col-xs7">
-            <canvas id="giftChart" height="200"></canvas>
+        <div class="layui-col-xs7" style="width: auto; height: 50%;">
+            <canvas id="giftChart" style="width: 100%; height: 100%;"></canvas>
         </div>
     </div>
     <div style="margin-bottom: 10vh;"></div>
@@ -232,6 +235,7 @@
             initChart(roomId, options.id)
 
         });
+        var chartView = null;
         function initChart(roomId, videoId) {
             getVideoGiftInfo(roomId, videoId)
                 .then(data => {
@@ -241,20 +245,22 @@
                     var lables = [];
                     var values = [];
                     data.data.guardInfo.forEach(item => {
-                        lables.push(item.gift_name+"\n"+item.total_price/100+"¥")
+                        lables.push(item.gift_name + "\n" + item.total_price / 100 + "¥")
                         values.push(item.total_num)
                     });
                     data.data.giftInfo.forEach(item => {
-                        lables.push(item.gift_name+"\n"+item.total_price/100+"¥")
+                        lables.push(item.gift_name + "\n" + item.total_price / 100 + "¥")
                         values.push(item.total_gift_num)
                     });
-
-                    new Chart($('#giftChart').get(0), {
+                    if(chartView!==null){
+                        chartView.destroy()
+                    }
+                    chartView = new Chart($('#giftChart').get(0), {
                         type: 'pie',
                         data: {
                             labels: lables,
                             datasets: [{
-                                label: '礼物(总额:'+data.data.price/100+"¥)",
+                                label: '礼物(总额:' + data.data.price / 100 + "¥)",
                                 data: values,
                                 borderWidth: 1
                             }
@@ -313,7 +319,8 @@
         }
         function playVideo(url) {
             var video = document.getElementById('videoElement');
-            var videoSrc = url;
+            var videoSrc = window.location.origin + url;
+            console.log('url = ' + videoSrc)
             var hls = new Hls();
             hls.loadSource(videoSrc);
             hls.attachMedia(video);
@@ -328,6 +335,7 @@
             getDanmu(getParam('roomId'), videoId)
                 .then(data => {
                     barrageRenderer.setBarrages(data.data.danmu);
+                    $('#danmuSize').get(0).innerHTML = data.data.danmu.length
                     initSC(data.data.superChat)
                 })