layui弹窗 预览图片、音频、视频、资源文档在线预览

图片预览

图片预览

function previewImages() {
	let parentObj = $(this).parents('[data-img="prveimgbox"]');//父元素
    layer.photos({
        photos: parentObj,
        closeBtn:1,
        anim: 5
    });
}

视频预览

视频预览
$(document).on('click','[data-role="videoPreview"]',function(){
	var _videouri = $(this).attr('data-uri');
	layer.open({
	  type: 1,
	  title:0,
	  shadeClose:true,
	  area: ['80%', '80%'], //宽高
	  content: '<div style="display:flex;justify-content:center;align-items:center;height:100%"><video src="'+_videouri+'" width="100%"  height="100%" controls></video></div>'
	});
});

音频预览

.hwaudio-animate {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 7px;
	background: url('/static/shared/images/hw3.png') no-repeat center;
	background-size: 75%;
}
.hwaudio-animate.active {
	animation: audioanimatesss 1s linear infinite;
}
@keyframes audioanimatesss {
	0% {
		background: url('/static/shared/images/hw1.png') no-repeat center;
		background-size: 75%;
	}
	50% {
		background: url('/static/shared/images/hw2.png') no-repeat center;
		background-size: 75%;
	}
	100% {
		background: url('/static/shared/images/hw3.png') no-repeat center;
		background-size: 75%;
	}
}

$(document).on('click','[data-role="audioPreview"]',function(event){
    $('[data-role="audioPreview"] .hwaudio-animate').removeClass('active');
	if($(this).attr('isError') === '1'){
		layer.msg('播放失败');
	    return;
	}
    if($(this).attr('isPlaying') === '1'){
        $(this).attr('isPlaying','0');
        audioPlayer[0].pause();
        return;
    }
	let audiouri = $(this).attr('data-uri');
    if(!audioPlayer){
        audioPlayer = $('<audio>',{
            src:audiouri,
        });
        audioPlayer.bind('ended',function () {
            console.log('监听结束');
            $('[data-role="audioPreview"] .hwaudio-animate').removeClass('active');
        });
        audioPlayer.bind('error',function () {
			$('[data-role="audioPreview"]').attr('isError','1');
            $('[data-role="audioPreview"] .hwaudio-animate').removeClass('active');
            layer.msg('播放失败');
        });
    }else{
        if(audiouri !== audioPlayer.attr('src')){
            audioPlayer.attr('src',audiouri);
        }
    }
	audioPlayer[0].play();
    $('[data-role="audioPreview"]').attr('isPlaying','0');
    $(this).attr('isPlaying','1');
    $(this).find('.hwaudio-animate').addClass('active');
	event.stopPropagation();
}); 

资源预览

layer.open({
  type: 1,
  title:0,
  shadeClose:true,
  area: ['80%', '80%'], //宽高
  content: '<iframe width="100%" height="100%" src="/js/pdf.js/web/viewer.html?file='+result.data.uri+'"></iframe>',
});