HTML视频插入

本文介绍两种视频插入方法（为了防止有些视频播放不了不要放中文路径）第一种页面显示视频使用video标签：<video width="320" height="240" controls="controls"><source src="mp4/qq.mp4" ></video>效果图第二种使用 layui框架弹出层组件layer （注意：这是两个东西）layui

邂逅于晚风

5849人浏览 · 2021-07-23 11:20:53

邂逅于晚风 · 2021-07-23 11:20:53 发布

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

第一种页面显示视频使用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>

视频效果：

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