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

HTML5新特性|01 音频视频

news 2026/5/18 16:02:24

音频

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

HiveWE魔兽地图编辑器：5分钟快速上手指南，告别卡顿创作新时代

HiveWE魔兽地图编辑器&#xff1a;5分钟快速上手指南&#xff0c;告别卡顿创作新时代 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 还在为《魔兽争霸III》原版地图编辑器缓慢的加载速度和繁琐的操作而烦恼…...

编程新知 2026/5/18 15:40:05

051岛屿数量

岛屿数量 题目链接&#xff1a;https://leetcode.cn/problems/number-of-islands/description/?envTypestudy-plan-v2&envIdtop-100-liked 我的解答&#xff1a; public int numIslands(char[][] grid) {int m grid.length, n grid[0].length;int[][] directions new i…...

编程新知 2026/5/18 15:35:53

全栈AI应用开发框架Flappy：从智能体到生产级Web应用的快速构建指南

1. 项目概述&#xff1a;从“Flappy”到“Pleisto”的AI应用构建新范式最近在AI应用开发圈子里&#xff0c;一个名为“pleisto/flappy”的项目开始引起不少人的注意。乍一看这个名字&#xff0c;你可能会联想到那个经典的像素小鸟游戏&#xff0c;但此“Flappy”非彼“Flappy”…...

编程新知 2026/5/18 15:35:52

51单片机驱动SG90舵机：从PWM原理到按键控制实战

1. SG90舵机与51单片机的基础认知 第一次接触SG90舵机时&#xff0c;我盯着那三根彩色导线发愣——这玩意儿怎么就能精准控制角度呢&#xff1f;后来发现它其实是微型伺服系统的典型代表&#xff0c;红色接5V电源&#xff0c;褐色接地线&#xff0c;黄色信号线接任意IO口&#…...

编程新知 2026/5/18 15:08:12

Arm DynamIQ架构缓存一致性协议解析与优化

1. Arm DynamIQ架构中的缓存一致性技术解析在异构计算架构中&#xff0c;缓存一致性协议是确保多核处理器高效协同工作的关键技术。作为Arm体系结构的重要组成部分&#xff0c;DynamIQ共享单元(DSU)通过AMBA ACE和CHI协议实现了灵活的系统级缓存一致性管理。这两种协议虽然设计…...

编程新知 2026/5/18 15:08:12

为Claude Code配置Taotoken作为备用API服务商防止中断

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为Claude Code配置Taotoken作为备用API服务商防止中断 当您依赖Claude Code作为编程助手时&#xff0c;可能会遇到服务暂时不可用或…...

编程新知 2026/5/18 14:30:14

[物联网入门实战] 从零搭建C51最小系统：Proteus仿真点亮LED全流程解析

1. 为什么选择C51最小系统入门物联网&#xff1f; 很多刚接触物联网开发的朋友都会遇到一个难题&#xff1a;硬件成本高、调试复杂、学习曲线陡峭。我当年自学嵌入式时&#xff0c;烧坏过好几块开发板&#xff0c;后来发现用Proteus仿真C51最小系统是最稳妥的入门方式。这套组合…...

编程新知 2026/5/18 14:07:06

如何在Windows上快速配置词法语法分析器：WinFlexBison完整实战指南

如何在Windows上快速配置词法语法分析器&#xff1a;WinFlexBison完整实战指南 【免费下载链接】winflexbison Main winflexbision repository 项目地址: https://gitcode.com/gh_mirrors/wi/winflexbison 你是否在Windows平台上开发编译器、解释器或配置文件解析器时&a…...

编程新知 2026/5/18 13:54:09

SolidWorks二次开发踩坑记：Python调用SaveAs函数时，那些让人头疼的Errors和Warnings详解

SolidWorks二次开发实战&#xff1a;Python调用SaveAs函数时的错误码解析与解决方案 当你在深夜加班调试SolidWorks二次开发脚本时&#xff0c;SaveAs函数突然返回False&#xff0c;错误码像摩尔斯电码一样难以解读——这种经历恐怕每个工业软件开发者都深有体会。本文将深入剖…...

编程新知 2026/5/18 13:38:55

魔兽争霸3终极优化指南：7步让你的经典游戏在现代电脑上焕发新生

魔兽争霸3终极优化指南&#xff1a;7步让你的经典游戏在现代电脑上焕发新生 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 魔兽争霸3作为一款经典的即…...

编程新知 2026/5/18 13:07:44