当前位置： 首页 > news >正文

HTML5新特性|01 音频视频

news 2026/4/3 0:29:11

音频

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>

在这里插入图片描述

相关文章：

HTML5新特性|01 音频视频

音频 1、Audio (音频) HTML5提供了播放音频文件的标准 2、control(控制器) control 属性供添加播放、暂停和音量控件 3、标签: <audio> 定义声音 <source> 规定多媒体资源,可以是多个<!DOCTYPE html> <html lang"en"> <head><…...

编程日记 2025/1/3 13:49:04

迅为RK3568开发板编译Android12源码包-设置屏幕配置

在源码编译之前首先要确定自己想要使用的屏幕并修改源码&#xff0c;在编译镜像&#xff0c;烧写镜像。如下图所示&#xff1a; 第一步&#xff1a;确定要使用的屏幕种类&#xff0c;屏幕种类选择如下所示&#xff1a; iTOP-3568 开发板支持以下种类屏幕&#xff1a; 迅为 LV…...

编程日记 2025/1/3 13:47:00

力扣hot100——图论

200. 岛屿数量 class Solution { public:int numIslands(vector<vector<char>>& grid) {int ans 0;vector<int> dx { 0, 1, 0, -1 };vector<int> dy { 1, 0, -1, 0 };int n grid.size(), m grid[0].size();vector<vector<int>> …...

编程日记 2025/1/3 13:45:56

Docker- Unable to find image “hello-world“locally

Docker- Unable to find image “hello-world“locally 文章目录 Docker- Unable to find image “hello-world“locally问题描述一. 切换镜像1. 编辑镜像源2. 切换镜像内容 二、 检查设置1、 重启dockers2、 检查配置是否生效3. Docker镜像源检查4. Dokcer执行测试 三、自定义…...

编程日记 2025/1/3 13:44:55

spring-boot启动源码分析（二）之SpringApplicationRunListener

在上一篇《spring-boot启动源码分析&#xff08;一&#xff09;之SpringApplication实例构造》后&#xff0c;继续看了一个月的Spring boot启动源码&#xff0c;初步把流程看完了&#xff0c;接下来会不断输出总结&#xff0c;以巩固这段时间的学习。同时也希望能帮到同样感兴趣…...

编程日记 2025/1/3 13:38:46

ELK入门教程(超详细）

什么是ELK&#xff1f; ELK是Elasticsearch、Logstash、Kibana三大开源框架首字母大写简称(后来出现的filebeat属于beats家族中的一员&#xff0c;可以用来替代logstash的数据收集功能&#xff0c;比较轻量级)&#xff0c;也被称为Elastic Stack。 Filebeat Filebeat是用于转…...

编程日记 2025/1/3 13:35:40

人工智能知识分享第六天-机器学习_​逻辑回归（Logistic Regression）

简介 在机器学习中&#xff0c;分类问题是一种常见的任务&#xff0c;目标是根据输入特征将数据点分配到不同的类别中。为了实现分类&#xff0c;我们需要训练一个分类器&#xff0c;该分类器能够根据输入数据的特征进行预测。 逻辑回归&#xff08;Logistic Regression&…...

编程日记 2025/1/3 13:33:38

基于Springboot + vue实现的校园周边美食探索及分享平台

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…...

编程日记 2025/1/3 13:32:36

初学STM32 --- 外部SRAM

目录 SRAM简介 SRAM特性: XM8A51216 功能框图 8080并口读时序​编辑 8080并口写时序 SRAM 读写操作步骤 FSMC介绍 FSMC时序介绍 FSMC控制器对内核地址映射​编辑 FSMC HAL库相关驱动 SRAM驱动步骤 SRAM简介 静态随机存取存储器&#xff08;Static Random-Access Memory&am…...

编程日记 2025/1/3 13:31:35

创龙3588——debian根文件系统制作

文章目录 build.sh debian 执行流程build.sh源码流程 30-rootfs.sh源码流程 mk-rootfs-bullseys.sh源码流程 mk-sysroot.sh源码流程 mk-image.sh源码流程 post-build.sh 大致流程系统制作步骤 build.sh debian 执行流程 build.sh 源码 run_hooks() {DIR"$1"shiftf…...

编程日记 2025/1/3 13:28:33

javacript中function (res) {}与箭头函数表达式(res) =＞{}的区别

javacript中function (res) {}与(res) &#xff1e;{}的区别 function (res) {} 代码演示 let shape {name:长方形,say:function(){console.log(我是this.name)setTimeout(function(){console.log(3秒后输出我是: this.name); //this.name为undefined}, 3000)} }shape.sa…...

编程日记 2025/1/3 13:26:30

kylin安装docker

1. 前言 本文详细介绍如何在kylin v10上安装docker。系统环境如下&#xff1a; dockder: 20.10.7 linux os: kylinv 10 (GFB) linux kernel: 4.19.90-52.23.v2207.gfb01.ky10.aarch642. 安装docker 2.1. 下载docker二进制包 wget https://mirror.nju.edu.cn…...

编程日记 2025/1/3 13:24:26

【Yarn】通过JMX采集yarn相关指标的Flink任务核心逻辑

通过JMX采集yarn相关指标的Flink任务核心逻辑 文章目录 通过JMX采集yarn相关指标的Flink任务核心逻辑通过jmx接口查询Yarn队列指标请求JMX配置项核心处理流程输出到kafka格式通过jmx接口查询ResourceManager核心指标请求JMX读取配置yaml配置文件核心处理逻辑输出Kafka格式彩蛋 …...

编程日记 2025/1/3 13:22:23

鸿蒙HarmonyOS开发：基于Swiper组件和自定义指示器实现多图片进度条轮播功能

文章目录 一、概述1、场景介绍2、技术选型 二、实现方案1、图片区域实现2、底部导航点设计3、手动切换 三、所有代码1、设置沉浸式2、外层Tabs效果3、ImageSwiper组件 四、效果展示 一、概述 在短视频平台上&#xff0c;经常可以见到多图片合集。它的特点是&#xff1a;由多张…...

编程日记 2025/1/3 13:21:20

Excel 身份证号计算年龄

1. 设置身份证号列格式 复制身份证列值到记事本或其他地方重新设置身份证号列单元格格式为“文本”将复制出去的身份证号重新复制粘贴回来 2. 年龄列单元格中添加公式 DATEDIF(DATE(LEFT(MID(A2, 7, 8), 4), MID(MID(A2, 7, 8), 5, 2), RIGHT(MID(A2, 7, 8), 2)), TODAY(), …...

编程日记 2025/1/3 13:20:17

【2024年-6月-14日-开源社区openEuler实践记录】探索 test - tools：高效测试的开源宝库

开篇引言 大家好&#xff0c;我是 fzr123&#xff0c;在软件开发领域深耕多年&#xff0c;一直致力于探索各种提升效率的工具与技术。今天&#xff0c;我将为大家深入介绍一款在测试领域极具价值的开源项目——test - tools&#xff0c;它为开发者们提供了一系列强大的测试功能…...

编程日记 2025/1/3 13:16:10

2022浙江大学信号与系统笔记

原视频地址&#xff1a;2022浙江大学信号与系统&#xff08;含配套课件和代码&#xff09; - 胡浩基老师-哔哩哔哩 ⭐⭐⭐ 我的笔记&#xff1a;飞书链接 - 信号与系统 基于视频&#xff0c;记得笔记&#xff0c;加了点自己的补充&#xff08;有的是问 ChatGPT 的&#xff09;…...

编程日记 2025/1/3 13:13:04

DeepSeek-VL2

《DeepSeek-VL2: Mixture-of-Experts Vision-Language Models for Advanced Multimodal Understanding》是 DeepSeek-AI 团队发布的关于视觉语言模型 DeepSeek-VL2 的论文&#xff0c;以下是对该论文的详细介绍&#xff1a; 研究背景与动机 多模态理解的重要性&#xff1a;在当…...

编程日记 2025/1/3 13:11:57

前端⾯试⼋股⽂

1.http 和 https 的基本概念 - http: 是⼀个客⼾端和服务器端请求和应答的标准&#xff08;TCP&#xff09;&#xff0c;⽤于从 WWW 服务器传输超⽂本到本地浏 览器的超⽂本传输协议。 - https:是以安全为⽬标的 HTTP 通道&#xff0c;即 HTTP 下 加⼊ SSL 层进⾏加密。其作⽤…...

编程日记 2025/1/3 13:10:54

【Rust自学】8.6. HashMap Pt.2：更新HashMap

8.6.0. 本章内容 第八章主要讲的是Rust中常见的集合。Rust中提供了很多集合类型的数据结构&#xff0c;这些集合可以包含很多值。但是第八章所讲的集合与数组和元组有所不同。 第八章中的集合是存储在堆内存上而非栈内存上的&#xff0c;这也意味着这些集合的数据大小无需在编…...

编程日记 2025/1/3 13:08:51

BLE HID库：嵌入式设备实现HID-over-GATT的轻量级方案

1. BLE_HID 库概述&#xff1a;面向嵌入式设备的 HID-over-GATT 实现BLE_HID 是一个专为资源受限嵌入式平台设计的轻量级开源库&#xff0c;其核心目标是将传统 USB HID&#xff08;Human Interface Device&#xff09;协议栈无缝迁移至 Bluetooth Low Energy&#xff08;BLE&a…...

编程新知 2026/4/3 0:18:12

别再只用XCOM了！手把手教你配置SecureCRT/MobaXterm成为专业串口调试工具（含换行、回显、分屏技巧）

别再只用XCOM了&#xff01;手把手教你配置SecureCRT/MobaXterm成为专业串口调试工具 嵌入式开发工程师们对XCOM这类轻量级串口工具一定不陌生&#xff0c;但当你需要同时管理多个设备、处理复杂协议或进行长时间调试时&#xff0c;功能单一的串口助手就显得力不从心了。Secure…...

编程新知 2026/4/3 0:12:10

从滤波到故障诊断：手把手教你用MATLAB实现信号互相关分析的实际项目

从振动信号到故障定位&#xff1a;MATLAB互相关分析的工业实战指南 车间里那台大型离心泵的异常振动已经持续两周了。王工程师带着加速度传感器采集了三组不同位置的振动信号&#xff0c;屏幕上跳动的波形看起来杂乱无章。"到底是轴承磨损还是叶轮不平衡&#xff1f;"…...

编程新知 2026/4/2 20:30:06

GprMax正演模拟避坑指南：从‘空白结果’到‘清晰双曲线’，我踩过的雷都在这了

GprMax正演模拟避坑指南&#xff1a;从异常结果到专业级图像的实战手册 第一次看到GprMax模拟结果窗口弹出全空白图像时&#xff0c;我盯着屏幕足足愣了三分钟——明明参数设置合理&#xff0c;模型构建完整&#xff0c;为什么输出的雷达图像就像被擦除了一样&#xff1f;这种经…...

编程新知 2026/4/2 19:45:44

收藏备用！小白程序员必看：从基础到进阶，彻底吃透Prompt与提示工程

本文将从基础入门到进阶实操&#xff0c;全面拆解Prompt的核心知识点&#xff0c;涵盖概念定义、分类维度、核心要素、工作原理&#xff0c;以及可直接套用的实用提示工程方法。全程避开晦涩术语&#xff0c;用程序员易懂的表述搭配具体案例&#xff0c;适配刚接触大模型的小白…...

编程新知 2026/4/2 19:23:26

“AI人工智能+”政务一网通办多智能体协同建设方案：五层两体系总体架构、数据与安全体系、信创适配与实施运维

该方案是一份成熟的技术蓝图&#xff0c;它不仅仅是将AI简单叠加到政务系统&#xff0c;而是通过“多智能体协同”重构了业务组织逻辑。方案详细定义了从语料治理、模型微调、Agent协作、信创适配到安全合规的全链路工程细节&#xff0c;具有极强的实操性与前瞻性&#xff0c;适…...

编程新知 2026/4/2 18:14:20

2026CIOE中国光博会观众报名通道正式开启！光电全产业链盛会蓄势待发

覆盖光电全产业链的综合型展会——第二十七届中国国际光电博览会&#xff08;CIOE中国光博会&#xff09;将于2026年9月9-11日在深圳国际会展中心举办。现报名通道已全面开启&#xff0c;即刻登记成功可获取CIOE2025全套会刊&#xff01;点击阅读原文即刻登记参观&#xff01;本…...

编程新知 2026/4/2 16:01:30

Instant-NGP实战：5分钟用CUDA加速你的NeRF模型渲染（附代码片段）

Instant-NGP实战&#xff1a;5分钟用CUDA加速你的NeRF模型渲染&#xff08;附代码片段&#xff09; 当你在深夜调试NeRF模型&#xff0c;看着进度条缓慢爬行&#xff0c;是否想过——如果能像英伟达演示的那样&#xff0c;在10毫秒内完成一帧高清渲染该多好&#xff1f;去年横空…...

编程新知 2026/4/2 15:33:16

实战演练：基于快马平台codex构建可一键部署的智能api接口生成器

今天想和大家分享一个特别实用的开发技巧——如何用AI快速生成可用的API接口代码。这个项目我是在InsCode(快马)平台上完成的&#xff0c;整个过程非常顺畅&#xff0c;尤其是最后的一键部署功能&#xff0c;让我省去了很多配置环境的麻烦。 项目背景与需求 最近在做一个内部…...

编程新知 2026/4/2 15:06:37

如何快速解锁NCM音乐格式：ncmppGui完全指南

如何快速解锁NCM音乐格式&#xff1a;ncmppGui完全指南 【免费下载链接】ncmppGui 一个使用C编写的极速ncm转换GUI工具 项目地址: https://gitcode.com/gh_mirrors/nc/ncmppGui 你是否曾经遇到过这样的情况&#xff1a;从音乐平台下载的歌曲只能在特定应用中播放&#x…...

编程新知 2026/4/2 14:44:17