HTML——30.视频引入

news2025/1/3 23:38:52
<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属性经常用于视频播放前的广告
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

T7 TensorFlow入门实战——咖啡豆识别

&#x1f368; 本文為&#x1f517;365天深度學習訓練營 中的學習紀錄博客&#x1f356; 原作者&#xff1a;K同学啊 | 接輔導、項目定制 一、前期准备 1. 导入数据 # Import the required libraries import numpy as np import PIL,pathlib from PIL import Image import ma…

OpenHarmony源码编译后烧录镜像教程,RK3566鸿蒙开发板演示

本文介绍瑞芯微主板/开发板编译OpenHarmony源码后烧录镜像的教程&#xff0c;触觉智能Purple Pi OH鸿蒙开发板演示。搭载了瑞芯微RK3566四核处理器&#xff0c;树莓派卡片电脑设计&#xff0c;支持开源鸿蒙OpenHarmony3.2-5.0系统&#xff0c;适合鸿蒙开发入门学习。 编译源码…

flask后端开发(3):html模板渲染

目录 渲染模板html模板获取路由参数 gitcode地址&#xff1a; https://gitcode.com/qq_43920838/flask_project.git 渲染模板 这样就能够通过html文件来渲染前端&#xff0c;而不是通过return了 html模板获取路由参数

SOME/IP 协议详解——序列化

文章目录 0. 概述1.基本数据序列化2.字符串序列化2.1 字符串通用规则2.2 固定长度字符串规则2.3 动态长度字符串规则 3.结构体序列化4. 带有标识符和可选成员的结构化数据类型5. 数组5.1 固定长度数组5.2 动态长度数组5.3 Enumeration&#xff08;枚举&#xff09;5.4 Bitfield…

HTML5实现好看的喜庆圣诞节网站源码

HTML5实现好看的喜庆圣诞节网站源码 前言一、设计来源1.1 主界面1.2 圣诞介绍界面1.3 圣诞象征界面1.4 圣诞活动界面1.5 圣诞热度界面1.6 圣诞纪念界面1.7 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 HTML5实现好看的喜庆圣诞节网站源码&#xff0c;圣…

嵌入式开发中的机器人表情绘制

机器人的表情有两种&#xff0c;一种是贴图&#xff0c;一钟是调用图形API自绘。 贴图效果相对比较好&#xff0c;在存储空间大的情况下是可以采用的。 自绘比较麻烦&#xff0c;但在资源和空缺少的情况下&#xff0c;也是很有用的。而且自绘很容易通过调整参数加入随机效果&…

opencv实现KNN算法识别图片数字

KNN算法实现识别图片数字 目录 KNN算法实现识别图片数字图片基本情况图片数据 图片数字识别图片数据处理及预测其它数字图片正确率预测 图片基本情况 图片 数据 图片像素是2000x1000,即高&#xff08;行&#xff09;1000&#xff0c;宽&#xff08;列&#xff09;2000&#xf…

美畅物联丨视频上云网关获取视频流地址供第三方调用的方法

在视频监控与流媒体传输领域&#xff0c;视频流地址的获取与调用是极为关键的环节。视频上云网关作为一款高效且稳定的视频传输设备&#xff0c;为获取视频流地址提供了便捷途径&#xff0c;从而使外部系统或平台能够方便地进行调用。今天我们就来讨论一下如何在视频上云网关上…

MySQL数据库——索引结构之B+树

本文先介绍数据结构中树的演化过程&#xff0c;之后介绍为什么MySQL数据库选择了B树作为索引结构。 文章目录 树的演化为什么其他树结构不行&#xff1f;为什么不使用二叉查找树&#xff08;BST&#xff09;&#xff1f;为什么不使用平衡二叉树&#xff08;AVL树&#xff09;&a…

一起学Git【第六节:查看版本差异】

git diff是 Git 版本控制系统中用于展示差异的强大工具。他可以用于查看文件在工作区、暂存区和版本库之间的差异、任意两个指定版本之间的差异和两个分支之间的差异等,接下来进行详细的介绍。 1.显示工作区与暂存区之间的差异 # 显示工作区和暂存区之间的差异,后面不加参数…

Fetch处理大模型流式数据请求与解析

为什么有的大模型可以一次返回多个 data&#xff1f; Server-Sent Events (SSE)&#xff1a;允许服务器连续发送多个 data: 行&#xff0c;每个代表一个独立的数据块。 流式响应&#xff1a;大模型服务通常以流式响应方式返回数据&#xff0c;提高响应速度。 批量处理&#x…

期权懂|个股期权的流动性如何?

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 个股期权的流动性如何&#xff1f; 个股期权作为场外交易工具&#xff0c;具有较高的灵活性。场外交易意味着交易双方可以直接协商交易条款&#xff0c;这有助于满足不同投资者的…

国产低代码框架zdppy开发笔记002 标准的接口响应

前言 通过前面的学习, 我们已经知道了zdppy_api和zdppy_req的基本用法, 接下来我们会在学习中多次用到这两个框架. 我们已经知道了该如何响应一个字符串,但是我们该如何响应json数据呢? 在zdppy_api中,我们定义了一组规范的API响应, 我们慢慢来看看. 规范的响应 首先来看…

Linux | 零基础Ubuntu解压RaR等压缩包文件

目录 介绍 案例分析 安装工具 解压实践 介绍 RAR是一种专利文件格式&#xff0c;用于数据压缩与归档打包&#xff0c;开发者为尤金罗谢尔&#xff08;俄语&#xff1a;Евгений Лазаревич Рошал&#xff0c;拉丁转写&#xff1a;Yevgeny Lazarevich R…

Python基于卷积神经网络的车牌识别系统开发与实现

1. 简介 车牌识别是人工智能在交通领域的重要应用&#xff0c;广泛用于高速违章检测、停车场管理和智能交通系统等场景。本系统通过基于卷积神经网络&#xff08;CNN&#xff09;的深度学习算法&#xff0c;结合 Python 和 MySQL 实现车牌的快速识别与管理。 系统特点&#x…

stm32内部flash在线读写操作

stm32内部flash在线读写操作 &#x1f4cd;相关开源库文章介绍《STM32 利用FlashDB库实现在线扇区数据管理不丢失》 ✨不同系列&#xff0c;内部flash编程有所区别。例如stm32f1是按照页擦除&#xff0c;半字&#xff08;16bit&#xff09;或全字(32bit)数据写入&#xff1b;st…

IDEA | SpringBoot 项目中使用 Apifox 上传接口

目录 1 安装 Apifox Helper 插件2 获取 Apifox 的 API 访问令牌3 IDEA 中设置 API 访问令牌4 IDEA 中上传接口5 常见问题5.1 如何自动设置目录名5.2 如何自动设置接口名5.3 如何更改上传位置 Apifox 官方指南&#xff1a; https://apifox.com/help/applications-and-p…

Leetcode 10-正则表达式匹配/ 剑指 Offer 19. 正则表达式匹配

给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 ‘.’ 匹配任意单个字符 ‘*’ 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s 的&#xff0c;而不是部分字符串。 题解 字符串匹配多…

学习vue3的笔记

一、vue和react的对比 1、基础介绍 vue&#xff1a;https://cn.vuejs.org/ vue3是2020年创建的 react&#xff1a;https://react.dev/ react是一个2013年开源的JavaScript库&#xff0c;严格意义上来说不是一个框架 2、diff算法 两个框架采用的都是同级对比策略 两节点对…

基于STM32的智能家居环境监控系统设计

目录 引言系统设计 硬件设计软件设计系统功能模块 环境监控模块控制模块显示模块系统实现 硬件实现软件实现系统调试与优化结论与展望 1. 引言 随着智能家居技术的发展&#xff0c;环境监控系统已经成为家居管理的重要组成部分。智能家居环境监控系统通过实时监测室内温度、湿…