springboot-thymeleaf添加一个表格和video

 时间:2024-10-12 23:25:03

1、在static目录下创建js和images目录,创建hello.js,找一个图片命名3.jpg。先看一眼项目的目录结构,如下图,

springboot-thymeleaf添加一个表格和video

2、首先编写User类,有三个属性:姓名、性别、phone。

springboot-thymeleaf添加一个表格和video

3、编写Controller,构造四个user,存储到List中,并将数据返回到前台。

springboot-thymeleaf添加一个表格和video

4、编写hello.js,和Hello.html文件,代码如下

springboot-thymeleaf添加一个表格和video
springboot-thymeleaf添加一个表格和video

5、启动项目,访问/sjn/hello,点击屏幕会出现提示框,多次点击会出现不同的提示信息

springboot-thymeleaf添加一个表格和video
springboot-thymeleaf添加一个表格和video

6、添加视频:首先在static下创建一个video目录,把要播放的video放进去

springboot-thymeleaf添加一个表格和video

7、除了播放video,还实现了放大和缩小video的功能,先来在js文件中添加播放、放大和缩小video的方法。

springboot-thymeleaf添加一个表格和video

8、修改Hello.html文件,垢卜埂呦增加三个按钮,和一个video标签,设置属性,让video展示控制图标,并循环播放。在Hello.html文件的下方的<s艘早祓胂cript>中,获取video,并播放video,这样可以使得页面加载的时候自动播放。

springboot-thymeleaf添加一个表格和video
springboot-thymeleaf添加一个表格和video

9、打开浏览器,访问/sjn/hello,可以看到video自动播放了,可以点击 暂停/播放 按钮暂停或者播放vide,也可以放大或者缩小video;当鼠标放在video上方时,会展示出video标签自带的控制面板,控制面板中有进度条、声音调节、全屏和下载功能。

springboot-thymeleaf添加一个表格和video
springboot-thymeleaf添加一个表格和video
springboot-thymeleaf添加一个表格和video
  • 怎么给myeclipse配置tomcat服务器
  • java swing mysql实现的学生信息管理系统
  • 初次使用myeclipse,如何写出第一个类
  • Eclipse为项目添加类库
  • 在js中如何改变文本框的长度
  • 热门搜索
    绿色家园手抄报 五年级数学手抄报 关于健康的手抄报 关于清明节手抄报 致敬英雄手抄报图片 黄河手抄报 关于保护环境的手抄报 中秋手抄报 我和我的祖国手抄报 关于法制的手抄报