HTML——30.视频引入

html 复制代码
<head>
		<meta charset="UTF-8">
		<title>视频引入</title>
	</head>
	<body>
		<!--video:在网页中引入音频
			IE8以及之前版本不支持
			
			属性名和属性值一样,可以只写属性名
			
			src属性:指定视频文件路径,必须要有
			controls属性:显示播放控件,
			autoplay属性:视频在就绪后马上播放
			loop属性:视频播放结束后重新开始
			muted属性:视频输出应该被静音
			preload属性:页面加载时就开始加载视频,并预备播放.如果使用了"autoplay"属性,preload属性不会生效
			
			width属性和height属性:
			1.width属性:设置视频窗口宽度,height属性:设置视频窗口高度
			2.不设置,视频窗口会按原始尺寸显示
			3.如果只设置1个属性,另一个会根据已设置的属性等比例缩放
			4.如果2个属性width属性和height属性都设置,可能会变形
			5.默认单位为像素,也可以使用百分比
			
			
			poster属性:用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径
			-->
		
		<!--<audio src="m/wdzg.mp3" controls autoplay loop muted preload></audio>-->
		
		<video src="v/wdzg.mp4" poster="img/logo.png" width="600" height="400" controls loop muted preload>
			您的浏览器不支持video
		</video>
		
	</body>
</html>

视频引入和音频引入除了标签不一样,他们的属性都是一样的

在这里插入图片描述

画圈的视频在没播放前展示的图片

poster属性:用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径,poster属性经常用于视频播放前的广告

相关推荐
棉花糖超人2 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
老虎062711 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台11 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
祝余呀16 小时前
HTML初学者第三天
前端·html
zhanshuo1 天前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 天前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
孤水寒月1 天前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀1 天前
html初学者第一天
前端·html
Eiceblue2 天前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
超级土豆粉2 天前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html