Layui实现图片预览和视频预览功能:

1.官网和示例

相关具体配置去官网和示例找,官网和示例地址点标题的字

2.案例:

function imgOpen(url) {
	layui.use(['carousel', 'laydate', 'layer'], function () {
		//页面层-图片
		layer.open({
			closeBtn: 2,
			shift: 3,
			shadeClose: true, // 点击遮罩关闭层
			type: 1,
			title: '预览图',
			resize: true,
			// maxmin: true, //打开放大缩小按钮
			area: ['1024px', '608px'],
			content: "<span><img style='width:100%;height: 100%;' src=" + url + " /></span>",//注意，如果str是object，那么需要字符拼接。
		});
		
		// layer.photos({
		// 	photos: {
		// 		"title": '预览图',
		// 		"start": 0,
		// 		"data": [{ "src": url}]
		// 	}
		// 	, closeBtn: 1//是否显示关闭按钮
		// });
	})
}

//视频预览，传url,width,height
function previewVideo(url, width, height) {
	width = width ? width : '65%';
	height = height ? height : '65%';
	let content = '<video width="100%" height="90%"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
		'<source src="' + url + '" type="video/mp4"></source></video>';
	layer.open({
		type: 1,
		maxmin: true, //打开放大缩小按钮
		title: '视频播放',
		area: [width, height],
		content: content,
	});
}

3.最终效果: