HTML5新特性|01 音频视频

音频

1、Audio (音频)
HTML5提供了播放音频文件的标准

2、control(控制器)
control 属性供添加播放、暂停和音量控件

3、标签:

<audio>  定义声音
<source> 规定多媒体资源,可以是多个
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音频</title>
</head>
<body><!-- <audio src="C:Users/Administrator/Videos/1.mp4" controls="controls">浏览器不支持</audio> --><audio controls="controls"><!-- 一般浏览器都可以播放ogg文件,这样保证基本每个浏览器都能播放这段音频 --><source src="../raw/1.mp4" ><source src="../raw/1.ogg" ></audio>
</body>
</html>

在这里插入图片描述

视频

1、video (视频)
HTML5 提供了展示视频的标准

2、control (控制器)
control属性供添加播放、暂停和音量控件

3、标签:

<video>    定义声音
<source>   规定多媒体资源,可以是多个

4、属性:
width: 宽
height: 高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频</title></head>
<body><!-- ffmpeg.org -->
<!--    此标签格式 IE 不支持,如果要查看浏览器是否支持,可以在官网 w3school.com.cn 上阅读-->
<!--    另外,如何进行转码和转码之后如何进行使用可以在官网  ffmpeg.org 上阅读--><!-- <video src="../raw/1.mp4" controls="controls" height="300px" width="300px">浏览器不支持</video> --><video controls="controls" height="300px" width="300px"><source src="../raw/1.mp4" ><source src="../raw/1.ogg" ></video></body>
</html>

在这里插入图片描述

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

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

相关文章

goView二开低代码平台1.0

官网文档地址&#xff1a;GoView 说明文档 | 低代码数据可视化开发平台 简介&#xff1a;GoView 是一个拖拽式低代码数据可视化开发平台&#xff0c;通过拖拽创建数据大屏&#xff0c;使用Vue3框架&#xff0c;Ts语言和NaiveUI组件库创建的开源项目。安装步骤和地址文档里都有…

2024年中国新能源汽车用车发展怎么样 PaperGPT(一)

概述 在国家政策的强力扶持下&#xff0c;2024年中国新能源汽车市场迎来了新的发展机遇。本文将基于《中国新能源汽车用车报告&#xff08;2024年&#xff09;》的数据&#xff0c;对新能源汽车的市场发展和用车趋势概述。 新能源汽车市场发展 政策推动&#xff1a;国家和地…

数据表中列的完整性约束概述

文章目录 一、完整性约束概述二、设置表字段的主键约束三、设置表字段的外键约束四、设置表字段的非空约束五、设置表字段唯一约束六、设置表字段值自动增加七、设置表字段的默认值八、调整列的完整性约束 一、完整性约束概述 完整性约束条件是对字段进行限制&#xff0c;要求…

Unity网络通信相关

Socket 通信一张图搞定 谁提供服务谁绑定端口&#xff0c;建立Listener,写Host

ChatGPT 与 AGI:人工智能的当下与未来走向全解析

在人工智能的浩瀚星空中&#xff0c;AGI&#xff08;通用人工智能&#xff09;无疑是那颗最为璀璨且备受瞩目的星辰。OpenAI 对 AGI 的定义为“在最具经济价值的任务中超越人类的高度自治系统”&#xff0c;并勾勒出其发展的五个阶段&#xff0c;当下我们大多处于以 ChatGPT 为…

Microsoft Visual Studio中的/MT, /MTd,/MD,/MDd分别是什么意思?

1. /MT&#xff0c;/MTd&#xff0c;/MD&#xff0c;/MDd的含义 /MT&#xff0c;/MTd&#xff0c;/MD&#xff0c;/MDd是 Microsoft Visual C 编译器的运行时库链接选项。它们决定了程序如何链接 C 运行时库&#xff08;CRT&#xff09;。具体含义如下&#xff1a; /MT&#x…

七次课掌握 Photoshop

mediaTEA 的《七次课掌握 Photoshop》系列文章以循序渐进的教学方式&#xff0c;帮助学员在短时间内高效掌握 Photoshop 的核心功能。 从基础知识到高级技巧&#xff0c;课程涵盖图像编辑、选区与抠图、形状与文字、绘画与修饰、调整与混合、样式与滤镜&#xff0c;以及自动化与…

【Goland】怎么执行 go mod download

1、终端的执行 go mod tidy 2、终端执行不行的话&#xff0c;就可以通过右击go.mod文件来执行&#xff1b; 3、也可以按住Ctrl点击这个包安装&#xff1b;

数据分析与应用:如何分析7日动销率和滞销率?

目录 0 需求描述 1 数据准备 1.1 订单明细表 1.2 商品信息表 2 SQL实现 3 问题分析与总结

深度学习模型概论

深度学习模型是机器学习领域中的一个重要分支&#xff0c;它通过使用多层神经网络来模拟人脑处理信息的方式&#xff0c;从而解决复杂的学习任务。以下是一些主要的深度学习模型&#xff1a; 深度前馈神经网络&#xff08;Deep Feedforward Networks&#xff09;&#xff1a; …

玩转OCR | 腾讯云智能结构化OCR初次体验

目录 一、什么是OCR&#xff08;需要了解&#xff09; 二、产品概述与核心优势 产品概述 智能结构化能做什么 举例说明&#xff08;选看&#xff09; 1、物流单据识别 2、常见证件识别 3、票据单据识别 4、行业材料识别 三、产品特性 高精度 泛化性 易用性 四、…

十个Scala的小知识

# 1. 与Java的互操作性 Scala与Java有很好的互操作性。可以在Scala项目中直接使用Java类库&#xff0c;也可以将Scala代码编译后供Java项目使用。例如&#xff0c;一个Java框架可以轻松地集成Scala编写的代码模块。 # 2. 强大的集合库 Scala拥有功能丰富的集合库。像List、Se…

基于BiLSTM和随机森林回归模型的序列数据预测

本文以新冠疫情相关数据集为案例,进行新冠数量预测。(源码请留言或评论) 首先介绍相关理论概念: 序列数据特点 序列数据是人工智能和机器学习领域的重要研究对象,在多个应用领域展现出独特的特征。这种数据类型的核心特点是 元素之间的顺序至关重要 ,反映了数据内在的时…

c# Record关键字

在 C# 9.0 中引入了 record 关键字&#xff0c;用于定义记录类型&#xff08;Record Types&#xff09;。记录类型是一种轻量级的数据载体&#xff0c;专注于表示数据&#xff0c;它提供了内置的相等性比较、生成属性和方法等功能&#xff0c;使得编写数据类更加简洁和高效。 …

开源模型应用落地-Qwen2.5-7B-Instruct与vllm实现离线推理-降本增效(一)

一、前言 离线推理能够在模型训练完成后,特别是在处理大规模数据时,利用预先准备好的输入数据进行批量推理,从而显著提高计算效率和响应速度。通过离线推理,可以在不依赖实时计算的情况下,快速生成预测结果,从而优化决策流程和提升用户体验。此外,离线推理还可以降低云计…

安装、快速入门

安装 sudo docker run \-e RABBITMQ_DEFAULT_USERroot \-e RABBITMQ_DEFAULT_PASS123456 \-v rabbitmq-plugins:/plugins \--name rabbitmq \--hostname rabbitmq \-p 15672:15672 \-p 5672:5672 \-d \rabbitmq 1、防火墙开放两个端口 2、RabbitMQ 安装 Web 插件&#xff1a; …

JVM学习:CMS和G1收集器浅析

总框架 一、Java自动内存管理基础 1、运行时数据区 运行时数据区可分为线程隔离和线程共享两个维度&#xff0c;垃圾回收主要是针对堆内存进行回收 &#xff08;1&#xff09;线程隔离 程序计数器 虚拟机多线程是通过线程轮流切换、分配处理器执行时间来实现的。为了线程切换…

用uniapp写一个播放视频首页页面代码

效果如下图所示 首页有导航栏&#xff0c;搜索框&#xff0c;和视频列表&#xff0c; 导航栏如下图 搜索框如下图 视频列表如下图 文件目录 视频首页页面代码如下 <template> <view class"video-home"> <!-- 搜索栏 --> <view class…

uniapp 判断多选、选中取消选中的逻辑处理

一、效果展示 二、代码 1.父组件: :id=“this.id” : 给子组件传递参数【id】 @callParentMethod=“takeIndexFun” :给子组件传递方法,这样可以在子组件直接调用父组件的方法 <view @click="$refs.member.open()"

影刀进阶指令 | Kimi (对标ChatGPT)

文章目录 影刀进阶指令 | Kimi &#xff08;对标ChatGPT&#xff09;一. 需求二. 流程三. 实现3.1 流程概览3.2 流程步骤讲解1\. 确定问题2\. 填写问题并发送3\. 检测答案是否出完 四. 运维 影刀进阶指令 | Kimi &#xff08;对标ChatGPT&#xff09; 简单讲讲RPA调用kimi实现…