9.媒体元素

devtools/2024/9/20 13:31:54/ 标签: 前端, html, 编程语言

视频元素

视频标签基本代码结构:

html"><video src="" controls></video>

其中src是视频资源的路径,这个路径有绝对路径和相对路径这里推荐用相对路径。(这里可以回顾我html系列的第四篇图片标签),我们按照规范将resource文件夹建好,还有resource底下的image、audio、video等。如下图

请添加图片描述

然后我们的相对路径就可以写…/resource/video/xxx.mp4,如果只是写基本的代码结构是不够的,在网页端显示的就只有视频的第一帧图片,而且无法点击播放。这个时候我们就要加上在标签里加上controls,这样页面上就会有视频的播放键、进度条、音量、还有播放速度和下载等等这些操作项。效果如下图

html"><video src="../resource/video/自行车定车.mp4" controls></video>

请添加图片描述

我们平时打开一些网页视频就会自动播放,这个是因为加了autoplay自动播放这个代码,我们也可以在代码中加入这一句,这里就不演示了。

音频元素

音频基本代码结构

html"><audio src="../resource/audio/繁华唱遍(泠鸢).mp3" controls></audio>

结构与上面视频标签一样,只需要把video换成audio就行,同样需要加上controls,这样才会在网页显示音频的播放键等操作按键。效果如下图显示

请添加图片描述

感谢您的观看,能和您一起学习是我最大的荣幸!

参考学习资料:媒体元素——狂神说

下面是我的微信公众号,与csdn同步更新,有需要的朋友可以关注一波~

在这里插入图片描述


http://www.ppmy.cn/devtools/35128.html

相关文章

基于springboot实现在线问卷调查系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现在线问卷调查系统演示 摘要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是为…

Java常见异常有哪些

java.lang.IllegalAccessError&#xff1a;违法访问错误。当一个应用试图访问、修改某个类的域&#xff08;Field&#xff09;或者调用其方法&#xff0c;但是又违反域或方法的可见性声明&#xff0c;则抛出该异常。 java.lang.InstantiationError&#xff1a;实例化错误。当一…

GO日志打印添加goroutineid

今天想给日志添加一个前缀&#xff0c;以区分不同goroutine的日志&#xff0c;方便做并发问题的排查&#xff0c;做日志跟踪。 为了解决goroutineid&#xff0c;网上各出奇招&#xff0c;有的使用runtime包未公开的方法获取&#xff1a; func Goid() int {defer func() {if e…

C#中override与重载的区别

在C#中&#xff0c;override和重载&#xff08;通常通过定义具有相同名称但不同参数列表的方法来实现&#xff09;是两个不同的概念&#xff0c;它们在用途和行为上有所区别。下面是关于override和重载的主要区别&#xff1a; override&#xff08;重写&#xff09; 定义&…

C语言从头学02——基本语法概念

这篇文章介绍几个编写C语言程序需要掌握的基本语法概念&#xff1a; 一、语句 C语言代码的组成单位是语句&#xff08;statement&#xff09;&#xff0c;语句是构成程序的基本单位。C语言规定&#xff0c;语句必须使用分号结尾。但有例外&#xff0c;例如&#xff0c…

【postgresql初级使用】可以存储数据的视图-物化视图,加速大数据下的查询分析

物化视图 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 物化视图概述 …

青春送温暖 立夏寄真情

&#xff08;通讯员&#xff1a;赵灿飞 图&#xff1a;杨美、孙红浪&#xff09; 在青春洋溢的五月&#xff0c;为传承中华民族尊老敬老的传统美德&#xff0c;促进当代青年与老人的跨代交流&#xff0c;增强青年的社会责任感和使命感&#xff0c;传递正能量和关爱困难群体…

OPENAI中Assistants API的实现原理及示例代码python实现

OPENAI中Assistants API的实现原理及示例代码 前言 OPENAI是一家人工智能公司&#xff0c;致力于研究和开发人工智能技术。其中&#xff0c;Assistants API是OPENAI推出的一项人工智能服务&#xff0c;可以帮助开发者快速构建智能助手。本文将介绍Assistants API的实现原理&a…

vue实现复制功能详解(使用v-clipboard)

目录 1 前言2 使用2.1 安装2.2 使用2.2.1复制静态的值2.2.2复制动态的变量2.2.3 在方法中使用2.2.4 复制成功失败事件 1 前言 v-clipboard 是一个与 Vue.js 相关的指令或功能&#xff0c;它通常与剪贴板操作结合使用。在 Vue.js 中&#xff0c;v-clipboard 可以用于将文本或其…

MQ如何保证可靠性

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;MQ ⛺️稳中求进&#xff0c;晒太阳 消息到达MQ以后&#xff0c;如果MQ不能及时保存&#xff0c;也会导致消息丢失&#xff0c;所以MQ的可靠性也非常重要。 2.数据持久化 为了提高性能&a…

C语言写的LLM训练

特斯拉前 AI 总监、OpenAI 创始团队成员 Andrej Karpathy 用 C 代码完成了 GPT-2 大模型训练过程&#xff1a;karpathy/llm.c: LLM training in simple, raw C/CUDA (github.com) 下载源码 git clone --recursive https://github.com/karpathy/llm.c.git下载模型 从HF-Mirro…

【MyBatis】深入解析MyBatis:高效操作数据库技术详解

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录文章&#xff1a;【MyBatis】深入解析MyBatis&#xff1a;高效操作数据库技术详解 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 动态SQL1. \<if>标签2. \<trim&…

Spring Security + JWT 实现登录认证和权限控制

Spring Security JWT 实现登录认证和权限控制 准备步骤 准备好一些常用的工具类&#xff0c;比如jwtUtil&#xff0c;redisUtil等。引入数据库&#xff0c;mybatis等&#xff0c;配置好controller&#xff0c;service&#xff0c;mapper&#xff0c;保证能够正常的数据请求。…

学习笔记:【QC】Android Q - data 模块

一、data init 流程图 主要分为3部分&#xff1a; 1.加载TelephonyProvider&#xff0c;解析apns-config.xml文件&#xff0c;调用loadApns将 xml中定义的数据&#xff0c;插入到TelephonyProvider底层的数据库中 2.初始化phone、DcTracker、TelephonyNetworkFactory、Conne…

Celery(分布式任务队列)入门学习笔记

Celery 的简单介绍 用 Celery 官方的介绍&#xff1a;它是一个分布式任务队列; 简单&#xff0c;灵活&#xff0c;可靠的处理大量消息的分布式系统; 它专注于实时处理&#xff0c;并支持任务调度。 Celery 如果使用 RabbitMQ 作为消息系统的话&#xff0c;整个应用体系就是下…

react项目配置装饰器

1.创建react项目并安装支持装饰器的依赖 npm install -g create-react-app create-react-app my-first-react-app npm install --save-dev babel/plugin-proposal-decorators 2.在.babelrc文件中配置Babel插件&#xff1a; {"presets": ["babel/preset-env&q…

NFTScan | 04.22~04.28 NFT 市场热点汇总

欢迎来到由 NFT 基础设施 NFTScan 出品的 NFT 生态热点事件每周汇总。 周期&#xff1a;2024.04.22~ 2024.04.28 NFT Hot News 01/ ApeCoin DAO 发起「由 APE 代币支持的 NFT Launchpad」提案投票 4 月 22 日&#xff0c;ApeCoin DAO 社区发起「由 APE 代币支持的 NFT Launch…

win中python中OpenCV使用cv2.imshow()报错的解决办法

1. 问题 cv2.error: OpenCV(4.9.0) D:\a\opencv-python\opencv-python\opencv\modules\highgui\src\window.cpp:1272: error: (-2:Unspecified error) The function is not implemented. Rebuild the library with Windows, GTK 2.x or Cocoa support. If you are on Ubuntu o…

【华为】IPSec VPN手动配置

【华为】IPSec VPN手动配置 拓扑配置ISP - 2AR1NAT - Easy IPIPSec VPN AR3NATIPsec VPN PC检验 配置文档AR1AR2 拓扑 配置 配置步骤 1、配置IP地址&#xff0c;ISP 路由器用 Lo0 模拟互联网 2、漳州和福州两个出口路由器配置默认路由指向ISP路由器 3、进行 IPsec VPN配置&…

STM32开启停止模式,用外部中断唤醒程序运行

今天学习了一下STM32的停止模式&#xff0c;停止模式下&#xff0c;所有外设的时钟和CPU的电源都会被关闭&#xff0c;所以会很省电&#xff0c;打破这种停止模式的方式就是外部中断可以唤醒停止模式。要想实现这个功能&#xff0c;其实设置很简单的&#xff0c;总共就需要两步…