视频加载 样式调整

liuyg

2021-06-11 518af6f3d0ee7164f24c901c60165b17a4325ce4

视频加载  样式调整

 libs/flv/flvjs/flv.js

Diff too large

 widgets/searchL/Widget.js

@@ -311,43 +311,47 @@
                            var data = obj.data //获得当前行数据
                                , layEvent = obj.event; //获得 lay-event 对应的值
                            if (layEvent === 'detail') {
                                //   layer.msg('查看操作');
                                // var dom = $('#poput-m-t-video'),
                                //     str = `
                                //     <div class="header">${obj.data.name}--实时视频</div>
                                //     <video id="video1" class="video-js vjs-default-skin" width="100%" height="100%"
                                //         data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
                                //         <source src="http://171.34.197.243:701/rtp/34020000001110000100_34020000001320000004.flv" type="video/x-flv">
                                //     </video>`;
                                // dom.empty();
                                // dom.append(str);

                                var dom = $('#twovideo'),
                                    //     <div class="header" style="z-index: 14">${obj.data.name}--实时视频</div>
                                    //    <video id="poput-m-t-video-video" ></video>
                                    str = `
                                <div class="cloce"><i class="layui-icon">&#x1006;</i></div>
                                    <div class="header">${obj.data.name}--实时视频</div>
                                    <div id="poput-m-t-video">
                                        <video id="poput-m-t-video-video" ></video>
                                </div>
                                `;
                                var dom = $('.header'),
                                    str = `${obj.data.name}--实时视频`;
                                dom.empty();
                                dom.append(str);
                                // console.log(obj.data.name);
                                // console.log(obj.data.flv);
                                if (obj.data.flv) {
                                    var dom = $('#poput-m-t-video'),
                                    // <div id="poput-m-t-video-login"><i class="layui-icon">&#xe63e;</i></div>
                                        str = `
                                            <video id="poput-m-t-video-video" ></video>
                                    `;
                                    dom.empty();
                                    dom.append(str);

                                if (flvjs.isSupported()) {
                                    var videoElement = document.getElementById('poput-m-t-video-video');
                                    var flvPlayer = flvjs.createPlayer({
                                        type: 'flv',
                                        url: obj.data.flv
                                    });
                                    flvPlayer.attachMediaElement(videoElement);
                                    flvPlayer.load();
                                    flvPlayer.play();
                                    // console.log(obj.data.name);
                                    // console.log(obj.data.flv);
									
                                    if (flvjs.isSupported()) {
                                        var videoElement = document.getElementById('poput-m-t-video-video');
                                        var flvPlayer = flvjs.createPlayer({
                                            type: 'flv',
                                            url: obj.data.flv
                                        });
                                        flvPlayer.attachMediaElement(videoElement);
                                        flvPlayer.load();
                                        flvPlayer.play();
                                    }
                                    window.$myVideoFlvplayer = flvPlayer;
                                    // var time = setTimeout(() => {
										
                                    // }, 2000);
                                } else {
                                    var dom = $('#poput-m-t-video'),
                                        str = `
                                            <div id="poput-m-t-video-none" >·暂无视频</div>
                                    `;
                                    dom.empty();
                                    dom.append(str);
                                }



                                $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                                $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                            } else if (layEvent === 'edit') {

 widgets/searchL/css/style.css

@@ -57,6 +57,9 @@
  align-items: center;
  justify-content: center;
}
.jimu-widget-searchL .searchLMain .layui-tab-content{
  padding: 0 !important;
}

.jimu-widget-searchL #inputTwo #local_data2 {
  position: relative;
@@ -113,7 +116,7 @@
  right: 5px;
  top: 70px;
  width: 462px;
  min-height: 554px;
  min-height: 540px;
  height: auto;
  padding-bottom: 20px;
  border-radius: 5px 5px 5px 5px;

 widgets/searchTabaPopup/Widget.html

@@ -1,11 +1,11 @@
<div>
    <div class="popup">
        <div class="p-main two" id="twovideo">
            <!-- <div class="cloce"><i class="layui-icon">&#x1006;</i></div>
             <div class="cloce"><i class="layui-icon">&#x1006;</i></div>
            <div class="header">江豚湾--实时视频</div>
            <div id="poput-m-t-video">
                <video id="poput-m-t-video-video" ></video>
            </div> -->
                <!-- <video id="poput-m-t-video-video" ></video> -->
            </div> 
        </div>
        <div class="p-main three">
            <div class="cloce"><i class="layui-icon">&#x1006;</i></div>

 widgets/searchTabaPopup/Widget.js

@@ -31,6 +31,15 @@
                // 暴露在外的接
                var that = this;
                $('.cloce').click(() => {
                    if (window.$myVideoFlvplayer) {
                        var flvPlayer = window.$myVideoFlvplayer;
                        flvPlayer.pause();
                        flvPlayer.unload();
                        flvPlayer.detachMediaElement();
                        flvPlayer.destroy();
                        flvPlayer = null;
                        window.$myVideoFlvplayer = false
                    }
                    $('.jimu-widget-searchTabaPopup').css({ 'display': 'none' });
                    that.myChart.clear();
                    that.myChart1.clear();

 widgets/searchTabaPopup/css/style.css

@@ -98,8 +98,25 @@
#poput-m-t-video-video{
  width: 100%;
  height: 560px;
  object-fit: fill;
  /* border: 1px springgreen solid; */
}
#poput-m-t-video-login{
  width: 100%;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#poput-m-t-video-none{
  font-size: 24px;
  width: 100%;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}



.jimu-widget-searchTabaPopup .layui-this {