layui表格中预览视频和图片

全代码

<!DOCTYPE html>
<html><head><title>Layui：数据表格table中预览图片、视频</title><meta charset="utf-8"/><link rel="stylesheet" href="../dist/css/layui.css"><style></style>
</head><body>
<table id="demo" lay-filter="demo"></table>
<script type="text/html" id="urlTemplet">{{# if(d.type == 1) { }}<img src="{{d.url}}" alt="{{d.title}}" data-type="1" height="30" class="preview-all"/>{{# } else if (d.type == 2) { }}<video src={{d.url}} height="30" data-type="2" class="preview-all"></video>{{# } else { }}未知{{# } }}
</script>
<script type="text/html" id="typeTemplet">{{# if(d.type == 1) { }}<button class="layui-btn layui-btn-xs">图片</button>{{# } else if (d.type == 2) { }}<button class="layui-btn layui-btn-danger layui-btn-xs">视频</button>{{# } else { }}<button class="layui-btn layui-btn-primary layui-btn-xs">未知</button>{{# } }}
</script>
</body>
<script src="../dist/layui.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () {var $ = layui.$, laydate = layui.laydate //日期, laypage = layui.laypage //分页, layer = layui.layer //弹层, table = layui.table //表格, carousel = layui.carousel //轮播, upload = layui.upload //上传, form = layui.form //表单, element = layui.element; //元素操作 等等.../*layer弹出一个示例*/// layer.msg('Hello World');//数据表格实例let userTable = table.render({elem: '#demo'// ,width: 312// ,url: '/static/json/table/user.json' //数据接口, data: getData(), cols: [[ //表头{field: 'id', title: 'ID', fixed: 'left', width: 100}, {field: 'username', title: '用户名'}, {field: 'url', title: '图片/视频', templet: '#urlTemplet'}, {field: 'sorts', title: '排序'}, {field: 'type', title: '类型', align: 'center', templet: '#typeTemplet'}]], page: true //开启分页, limit: 6 //默认每页记录数, limits: [3, 6, 9] //可选每页记录数});//监听点击方法$(document).on('click', '.preview-all', function (data) {// var obj = data.target.dataset;let clickObject = data.target; //点击的对象let url = clickObject.src; //图片、视频 地址let type = $(clickObject).data('type'); //点击的类型：1-图片，2-视频；3-未知if (type == 1) {previewPicture(url);} else if (type == 2) {previewVideo(url);}});//图片预览，传urlfunction previewPicture(url) {layer.photos({photos: {"title": '预览图',"id": 222,"start": 0,"data": [{"src": url}]}// ,closeBtn: 1 //是否显示关闭按钮});}//视频预览，传url,width,heightfunction 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,});}//文件预览function previewFile(url) {window.location.href = url;}//模拟返回表单中的数据function getData() {let data = [{"id": 10000,"username": "user-0",type: 1,sorts: 1,url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'},{"id": 10001,"username": "user-1",type: 1,sorts: 1,url: 'https://csdnimg.cn/medal/51_create.png',},{"id": 10002,"username": "user-2",type: 3,sorts: 2,url: ''},{"id": 10003,"username": "user-3",type: 1,sorts: 3,url: 'https://img0.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},{"id": 10004,"username": "user-4",type: 2,sorts: 1,url: 'D:/TenXun/WeiXin/WeChatSpace/WeChat Files/w452339689/FileStorage/Video/2021-09/ab83a073d13fc97a774c60e8c5fa1510.mp4'},{"id": 10005,"username": "user-5",type: 2,sorts: 4,rec: 0,url: 'https://vd2.bdstatic.com/mda-ngd42cykdpyqxnjd/720p/h264/1657767198646938123/mda-ngd42cykdpyqxnjd.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1658114325-0-0-56a7e35d692939d6d0ee1d39e7e8657c&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=2925113439&vid=10700712952852671679&abtest=103525_2&klogid=2925113439'},{"id": 10006,"username": "user-6",type: 1,sorts: 5,url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'},{"id": 10007,"username": "user-7",type: 1,sorts: 1,url: 'https://img0.baidu.com/it/u=2521851051,2189866243&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},{"id": 10008,"username": "user-8",type: 1,sorts: 7,url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'},{"id": 10009,"username": "user-9",type: 1,sorts: 1,url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'}];return data;}});
</script>
</html>

主要用到的方法

  • getData（）
    getData()示例中是模拟数据，代入到自己的功能中就是请求返回的数据。
  • 点击实现预览效果
 $(document).on('click', '.preview-all', function (data) {			//点击的预览效果// var obj = data.target.dataset;let clickObject = data.target; //点击的对象let url = clickObject.src; //图片、视频 地址let type = $(clickObject).data('type'); //点击的类型：1-图片，2-视频；3-未知if (type == 1) {		//如果是1，调用预览图片方法previewPicture(url);} else if (type == 2) {		//如果是2，调用预览视频方法previewVideo(url);}});

预览方法

//图片预览，传urlfunction previewPicture(url) {layer.photos({photos: {"title": '预览图',"id": 222,"start": 0,"data": [{"src": url}]}// ,closeBtn: 1 //是否显示关闭按钮});}//视频预览，传url,width,heightfunction 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,});}//文件预览function previewFile(url) {window.location.href = url;}
  • 表格展示对应的数据
    主要是{field: 'url', title: '图片/视频', templet: '#urlTemplet'}
        let userTable = table.render({elem: '#demo'// ,width: 312// ,url: '/static/json/table/user.json' //数据接口, data: getData(), cols: [[ //表头{field: 'id', title: 'ID', fixed: 'left', width: 100}, {field: 'username', title: '用户名'}, {field: 'url', title: '图片/视频', templet: '#urlTemplet'}		//使用urlTemplet这个模板, {field: 'sorts', title: '排序'}, {field: 'type', title: '类型', align: 'center', templet: '#typeTemplet'}		//使用typeTemplet这个模板]], page: true //开启分页, limit: 6 //默认每页记录数, limits: [3, 6, 9] //可选每页记录数});

模板方法，

<script type="text/html" id="urlTemplet">{{# if(d.type == 1) { }}<img src="{{d.url}}" alt="{{d.title}}" data-type="1" height="30" class="preview-all"/>{{# } else if (d.type == 2) { }}<video src={{d.url}} height="30" data-type="2" class="preview-all"></video>{{# } else { }}未知{{# } }}
</script>

url中就是我们后端的具体存储地址，
如果url是本地地址，会报错，需要配置静态资源
在这里插入图片描述

    @Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {// 配置静态资源registry.addResourceHandler("/video/**").addResourceLocations("file:"+videoUrl);	//变量videoUrl值是/opt/video/,只要访问路径是video/**这种，就去/opt/video目录}

文件实际路径是/opt/video/ab83a073d13fc97a774c60e8c5fa1510.mp4,然后如图，替换url路径，最终路径就是http://192.168.0.105:8082/video/ab83a073d13fc97a774c60e8c5fa1510.mp4,然后返回给前端
在这里插入图片描述

来源

html代码来源：https://blog.csdn.net/qq_36025814/article/details/125860454，后端代码自己整理，有不明白的留言

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/579642.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

竞赛保研 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类

竞赛保研 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类

文章目录 0 简介1 常用的分类网络介绍1.1 CNN1.2 VGG1.3 GoogleNet 2 图像分类部分代码实现2.1 环境依赖2.2 需要导入的包2.3 参数设置(路径&#xff0c;图像尺寸&#xff0c;数据集分割比例)2.4 从preprocessedFolder读取图片并返回numpy格式(便于在神经网络中训练)2.5 数据预…
阅读更多...
多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现SSA-BiLSTM麻雀算法优化…
阅读更多...
RabbitMQ 常见问题

RabbitMQ 常见问题

1. 如何保证消息顺序消费 在RabbitMQ中&#xff0c;消息最终会保存在队列中&#xff0c;在同一个队列中&#xff0c;消息是顺序的&#xff0c;保持先进先出的原则&#xff0c;这个由Rabbitmq保证。而不同队列中的消息&#xff0c;RabbitMQ 是无法保证其顺序性。顺序消费主要是…
阅读更多...
UDP攻击是什么？遇到UDP攻击怎么办

UDP攻击是什么？遇到UDP攻击怎么办

UDP攻击&#xff0c;也称为UDP洪水攻击&#xff0c;是一种拒绝服务&#xff08;DoS&#xff09;或分布式拒绝服务&#xff08;DDoS&#xff09;攻击的形式。在此类攻击中&#xff0c;攻击者会发送大量的UDP流量到目标网络或服务器&#xff0c;以消耗其网络带宽或系统资源。由于…
阅读更多...
爬虫工作量由小到大的思维转变---＜第二十八章 Scrapy中间件说明书＞

爬虫工作量由小到大的思维转变---＜第二十八章 Scrapy中间件说明书＞

爬虫工作量由小到大的思维转变---&#xff1c;第二十六章 Scrapy通一通中间件的问题&#xff1e;-CSDN博客 前言: (书接上面链接)自定义中间件玩不明白? 好吧,写个翻译的文档点笔记,让中间件更通俗一点!!! 正文: 全局图: 爬虫中间件--->翻译笔记: from scrapy import s…
阅读更多...
Scikit-Learn线性回归(二)

Scikit-Learn线性回归(二)

Scikit-Learn线性回归二：多项式回归 1、多项式回归2、多项式回归的原理3、Scikit-Learn多项式回归3.1、Scikit-Learn多项式回归API1、多项式回归 本文接上篇：Scikit-Learn线性回归(一) 上篇中，我们详细介绍了线性回归的概念、原理和推导，以及通过由浅入深的案例，详解了Sc…
阅读更多...
淘宝/天猫商品API：实时数据获取与安全隐私保护的指南

淘宝/天猫商品API：实时数据获取与安全隐私保护的指南

一、引言 随着电子商务的快速发展&#xff0c;淘宝/天猫等电商平台已成为商家和消费者的重要交易场所。对于电商企业而言&#xff0c;实时掌握店铺商品的销售情况、库存状态等信息至关重要。然而&#xff0c;手动管理和更新商品信息既费时又费力。因此&#xff0c;淘宝/天猫提…
阅读更多...
随笔笔记-2023

随笔笔记-2023

随笔 computed 是基于他们的依赖进行缓存的&#xff0c;。如果要随时计算 new Date().now&#xff08;因为不是响应式的&#xff09;,那么需要用 computed。 如果不希望用缓存那么就用 methods 字符与字节 1 字节8 位1B8 bit;1KB 1024B,1MB1024KB1024*1024B 编码&#xff1a;…
阅读更多...
面试题之二HTTP和RPC的区别？

面试题之二HTTP和RPC的区别？

面试题之二 HTTP和RPC的区别&#xff1f; Ask范围&#xff1a;分布式和微服务 难度指数&#xff1a;4星 考察频率&#xff1a;70-80% 开发年限&#xff1a;3年左右 从三个方面来回答该问题&#xff1a; 一.功能特性 1)HTTP是属于应用层的协议&#xff1a;超文本传输协议…
阅读更多...
【SpringCloud】-OpenFeign实战及源码解析、与Ribbon结合

【SpringCloud】-OpenFeign实战及源码解析、与Ribbon结合

一、背景介绍 二、正文 OpenFeign是什么&#xff1f; OpenFeign&#xff08;简称Feign&#xff09;是一个声明式的Web服务客户端&#xff0c;用于简化服务之间的HTTP通信。与Nacos和Ribbon等组件协同&#xff0c;以支持在微服务体系结构中方便地进行服务间的通信&#xff1b…
阅读更多...
Linux账号与权限管理

Linux账号与权限管理

目录 一、账号管理 1. 用户账号 1.1 概述 1.2 用户账号类型 1.3 用户账号区分 2. 组账号 2.1 概述 2.2 区分 3. 用户账号管理 3.1 重要文件存放位置 3.2 基本信息 3.3 添加用户 3.3.1 通式 3.3.2 选项示例 3.4 密码管理 3.4.1 通式 3.4.2 选项示例 3.4.3 免交…
阅读更多...
macos Apple开发证书 应用签名p12证书 获取生成方法 codesign 证书获取

macos Apple开发证书 应用签名p12证书 获取生成方法 codesign 证书获取

在开发macos应用的时候必须要对自己开发的应用进行签名才能使用, 下面介绍个人如何获取Apple开发签名证书. 必备条件, 你需要先安装 xcode , 注册一个苹果开发者账号 免费的就可以, 以下为获取流程 You need to create a cert through xcode. Additionally, you need to have…
阅读更多...
深信服技术认证“SCCA-C”划重点：云计算基础

深信服技术认证“SCCA-C”划重点：云计算基础

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08…
阅读更多...
[Angular] 笔记 10：服务与依赖注入

[Angular] 笔记 10：服务与依赖注入

什么是 Services & Dependency Injection? chatgpt 回答&#xff1a; 在 Angular 中&#xff0c;Services 是用来提供特定功能或执行特定任务的可重用代码块。它们可以用于处理数据、执行 HTTP 请求、管理应用程序状态等。Dependency Injection&#xff08;依赖注入&#…
阅读更多...
浅谈互联网架构演变

浅谈互联网架构演变

更好的阅读体验 \large{\color{red}{更好的阅读体验}} 更好的阅读体验 前言 可以将某个项目或产品的架构体系按照如下方式分层&#xff1a; 业务层面&#xff1a;项目业务体系技术层面&#xff1a; 数据架构&#xff1a;数据持久层策略应用架构&#xff1a;应用层的实现方式 …
阅读更多...
云原生Kubernetes系列 | Kubernetes Secret及ConfigMap

云原生Kubernetes系列 | Kubernetes Secret及ConfigMap

云原生Kubernetes系列 | Kubernetes Secret及Configmap 1. Secret及Configmap使用背景简介2. Secret2.1. Secret创建方式2.1.1. 命令行方式2.1.2. 文件方式2.1.3. 变量方式2.1.4. YAML文件方式2.2. Secret使用方式2.2.1. 用于传递配置文件2.2.3. 用于传递变量3. ConfigMap1. Se…
阅读更多...
CPU亲和性和NUMA架构

CPU亲和性和NUMA架构

何为CPU的亲和性 CPU的亲和性&#xff0c;进程要在某个给定的 CPU 上尽量长时间地运行而不被迁移到其他处理器的倾向性&#xff0c;进程迁移的频率小就意味着产生的负载小。亲和性一词是从affinity翻译来的&#xff0c;实际可以称为CPU绑定。 在多核运行的机器上&#xff0c;…
阅读更多...
AlignBench：量身打造的中文大语言模型对齐评测

AlignBench：量身打造的中文大语言模型对齐评测

对齐&#xff08;Alignment&#xff09;&#xff0c;是指大语言模型&#xff08;LLM&#xff09;与人类意图的一致性。换言之&#xff0c;就是让LLM生成的结果更加符合人类的预期&#xff0c;包括遵循人类的指令&#xff0c;理解人类的意图&#xff0c;进而能产生有帮助的回答等…
阅读更多...
SadTalker数字人增加视频输出mp4质量精度

SadTalker数字人增加视频输出mp4质量精度

最近在用数字人简易方案&#xff0c;看到了sadtalker虽然效果差&#xff0c;但是可以作为一个快速方案&#xff0c;没有安装sd的版本&#xff0c;随便找了个一键安装包 设置如上 使用倒是非常简单&#xff0c;但是出现一个问题&#xff0c;就是输出的mp4都出马赛克了 界面上却…
阅读更多...
Servlet见解2

Servlet见解2

4 创建servlet的三种方式 4.1 实现Servlet接口的方式 import javax.servlet.*; import javax.servlet.annotation.WebServlet; import java.io.IOException;WebServlet("/test1") public class Servlet1 implements Servlet {Overridepublic void init(ServletConf…
阅读更多...
最新文章

Copyright @ 2022~2023