HTML视频插入

article/2025/9/27 17:22:35

本文介绍两种视频插入方法（为了防止有些视频播放不了不要放中文路径）

第一种页面显示视频使用video标签：

 <video width="320" height="240" controls="controls"><source src="mp4/qq.mp4" ></video>

效果图

 第二种使用 layui框架 弹出层组件 layer （注意：这是两个东西）

layui下载地址：https://www.layui.com/

layer下载地址： https://layer.layui.com/

下载完成之后解压即可 

第一步：引入文件 

<script src="layer-v3.5.1/layer-v3.5.1/layer/layer.js"></script>
<link rel="stylesheet" href="layui-v2.6.5/layui-v2.6.5/layui/css/layui.css">
<script src="layui-v2.6.5/layui-v2.6.5/layui/layui.js"></script>

 第二步：


<script>function looka(){layer.open({type: 2,title: false,area: ['630px', '360px'],/*设置高度 宽度 */shade: 0.8,closeBtn: 0,shadeClose: true,content: 'mp4/qq.mp4' /* 视频路径 */});layer.msg('点击任意处关闭');}</script>
<body><button onclick="looka()"> 点我</button>
</body>
</html>

视频效果：

两种视频播放方式你更喜欢哪种呢 有什么疑问欢迎大家咨询


http://chatgpt.dhexx.cn/article/RvJZn93w.shtml

相关文章

如何在网页中插入视频

如何在网页中插入视频

想在网页中插入视频从网上搜索了大概有以下两种方法&#xff1a; 是由HTML5自带的标签&#xff0c;这个标签就可以适用于很多的浏览器&#xff0c;但是对视频的格式有很高的要求&#xff0c;假如你是MP4的视频格式&#xff0c;那么就要求你的编码方式一定要是AVC(H264)的。建议…
阅读更多...
如何插入视频

如何插入视频

视频插入 我们在微信小程序中&#xff0c;经常看见一些新闻报道除了汉字解说有的还附带着视频。这样更能吸引用户的兴趣。那么问题来了&#xff0c;怎样在微信小程序中插入想要的视频呢&#xff1f;接下来让我给大家浅薄的讲解一下吧。 这是我插入的视频&#xff1a; 我们在.w…
阅读更多...
JAVA中DateTime获取当前时间

JAVA中DateTime获取当前时间

原文链接&#xff1a;这里&#xff01; 参考代码&#xff1a; Test public void test(){DateTime time new DateTime(); //获取当前时间System.out.println(time); //输出当前时间 }需要传参数的可以看 这篇文章。 springMVC中从前台往后台传时间 – 每天进步一点点 (longku…
阅读更多...
java 获取时间的方法

java 获取时间的方法

Java的时间是通过字节码指令来控制的&#xff0c;所以 java程序的运行时间是通过字节码指令来控制的。但是由于 Java程序在运行时&#xff0c; JVM会产生一些状态&#xff0c;所以在执行 JVM指令时&#xff0c; JVM也会产生一些状态。 我们在执行 java程序时&#xff0c;主要是…
阅读更多...
java获取当前时间戳的方法

java获取当前时间戳的方法

获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 new Date().getTime(); 获取当前时间 SimpleDateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式 String date df.…
阅读更多...
Java获取当前时间的小时/分钟

Java获取当前时间的小时/分钟

java获取当前时间的小时/分钟等。。。 方法一&#xff1a; Date date new Date(); int hours date.getHours();方法二&#xff1a; GregorianCalendar calendar new GregorianCalendar(); int hour calendar.get(Calendar.HOUR_OF_DAY); System.out.println("hour&…
阅读更多...
Java获取当前年月日、时间

Java获取当前年月日、时间

两种方法&#xff0c;通过Date类或者通过Calendar类。Date类比较简单&#xff0c;但是要得到细致的字段的话Calendar类比较方便。 import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.Loca…
阅读更多...
Java中获取日期和时间

Java中获取日期和时间

Java中获取日期和时间 1.创建 java.util.Calendar 实例&#xff0c;调用其 get()方法传入不同的参数即可获 得参数所对应的值 import java.util.Calender; //获取当前日期和时间 public class D3 {public static void main(String[] args) {Calendar c Calendar.getInstance()…
阅读更多...
Java获取当前时间的前一天时间

Java获取当前时间的前一天时间

Java获取当前时间的前一天时间 引入相关包具体代码实现结果 引入相关包 // 引入日期处理的相关jar包 import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date;具体使用方式可能涉及到开发过程当中&#xff0c;定时任务更新&#xff0c;获取前一…
阅读更多...
java获取当前时间（年月日）

java获取当前时间（年月日）

在java程序中常常需要获取的时间和设置时间的格式 1、获取当前的时间 Date datenew Date();//此时date为当前的时间 2、设置时间的格式 Date datenew Date();//此时date为当前的时间 System.out.println(date); SimpleDateFormat dateFormatnew SimpleDateFormat(“YYYY-…
阅读更多...
java获取当前时间戳的方法（*）

java获取当前时间戳的方法（*）

获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 new Date().getTime();获取当前时间 SimpleDateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式 String date df…
阅读更多...
Java中如何获取当前日期和时间的4种方法

Java中如何获取当前日期和时间的4种方法

最近群里有一位 C 转 Java 的网友&#xff0c;问到“Java如何获取当前日期和时间”这个问题&#xff0c;知识虽然基础&#xff0c;但大部分网友只记得 Java8 以前的用法。本文总结了 4 种方法&#xff0c;其中第 4 种是 Java8 才提供的 API。 System.currentTimeMillis() 获…
阅读更多...
P2822 [NOIP2016 提高组] 组合数问题

P2822 [NOIP2016 提高组] 组合数问题

题目&#xff1a; 思路&#xff1a; 如果纯暴力&#xff0c;把所有小于2000并且%k的组合数都求出来,能拿个90分 改进方案&#xff0c;可采用前缀和的方法 二维的组合数的求法a[i][j]a[i-1][j]a[i][j-1]-a[i-1][j-1] 前缀和 这里还需要注意以下两个点&#xff1a; 1.如果当前…
阅读更多...
【NOIP2016提高组】愤怒的小鸟

【NOIP2016提高组】愤怒的小鸟

题目背景 NOIP2016 提高组 Day2 T3 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔。简单来说&#xff0c;这款游戏是在一个平面上进行的。 有一架弹弓位于 (0,0) 处&#xff0c;每次 Kiana 可以用它向第一象限发射一只红色的小鸟&#xff0c;小鸟们的飞行轨迹均为形如 …
阅读更多...
P2058 [NOIP2016 普及组] 海港

P2058 [NOIP2016 普及组] 海港

题目描述 小K是一个海港的海关工作人员&#xff0c;每天都有许多船只到达海港&#xff0c;船上通常有很多来自不同国家的乘客。 小K对这些到达海港的船只非常感兴趣&#xff0c;他按照时间记录下了到达海港的每一艘船只情况&#xff1b;对于第i艘到达的船&#xff0c;他记录了…
阅读更多...
NOIP 2016 年普及组初赛试题整理

NOIP 2016 年普及组初赛试题整理

#include <iostream> using namespace std; int readint() {int num 0; // 存储读取到的整数int negative 0; // 负数标识char c;c cin.get(); // 存储当前读取到的字符while ((c < 0 || c > 9) && c ! -)c ① ;if (c -)negative 1;else② ;c cin.g…
阅读更多...
「NOIP2016」玩具谜题

「NOIP2016」玩具谜题

小南有一套可爱的玩具小人&#xff0c;它们各有不同的职业。 有一天&#xff0c;这些玩具小人把小南的眼镜藏了起来。小南发现玩具小人们围成了一个圈&#xff0c;它们有的面朝圈内&#xff0c;有的面朝圈外。如下图&#xff1a; 这时singer告诉小南一个谜题&#xff1a;“眼镜…
阅读更多...
【NOIP2016提高组】蚯蚓

【NOIP2016提高组】蚯蚓

蚯蚓 题目背景 NOIP2016 提高组 Day2 T2 题目描述 本题中&#xff0c;我们将用符号 表示对 c 向下取整&#xff0c;例如&#xff1a; 蛐蛐国最近蚯蚓成灾了&#xff01;隔壁跳蚤国的跳蚤也拿蚯蚓们没办法&#xff0c;蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓。 蛐蛐国里…
阅读更多...
NOIP2016提高组 day1

NOIP2016提高组 day1

1.玩具谜题 题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业。 有一天, 这些玩具小人把小南的眼镜藏了起来。 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外。如下图: 这时 s i n g e r singer singer告诉小南一个谜題: “眼镜藏在我左数第3个玩具…
阅读更多...
[NOIP2016 普及组] 魔法阵

[NOIP2016 普及组] 魔法阵

[NOIP2016 普及组] 魔法阵 - 洛谷 题意分析 给定一个四元组&#xff0c;四个数分别为a,b,c,d&#xff0c;满足以下条件&#xff1a; 1.a<b<c<d 2.b-a2*(d-c) 3.b-a(c-b)/3 //注意是实除 现在给你一个序列X&#xff0c;请你求出序列X中每个数分别作为a,b,c,d的个数。…
阅读更多...
推荐文章

Copyright @ 2022~2023