在HTML中如何设置音频和视频？

已于 2023-12-21 09:21:21 修改
阅读量1.1k 收藏 12
点赞数 23
文章标签： html 音视频 前端
于 2023-12-10 21:35:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78311954/article/details/134914928
版权

目录

HTML 引入原生态的多媒体支持，可在浏览器中直接播放音频和视频文件，不需要借助视频插件播放音频和视频。

🐱一、音频标签(audio)

🐱‍🐉1、什么是音频标签

HTML中的音频指的是在网页上播放音频文件的功能。通过使用HTML的元素，可以将音频文件嵌入到网页中，使用户能够在浏览器中直接播放音频文件。

< audio >元素有多种属性和标签，可以控制音频文件的播放、暂停、音量调节等操作。通过设置不同的属性，可以实现自动播放、循环播放、静音等功能。同时，可以在< audio >标签内添加文本内容，以提供对不支持HTML5的浏览器的替代内容，或者添加音频文件的下载链接

🐱‍🐉2、音频标签的主要属性

属性值作用
srcURL音频文件的 URL，必填
controlscontrols音频就绪后包含播放/暂停按钮的控件
autoplayautoplay音频就绪后自动播放
looploop每当音频结束时重新开始循环播放
mutedmuted静音
 1、src指的是音频地址

 2、autoplay需要设置muted之后才生效。

🐱‍🐉3、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio src="音频路径" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

运行结果：
在这里插入图片描述

🐱二、视频标签(video)

🐱‍🐉1、什么是视频标签

用于在网页中嵌入视频。< video >标签允许您指定视频文件的源，并提供一些属性来控制视频的播放和外观，支持MP4、webm 和 ogg 三个视频格式；

🐱‍🐉2、视频标签的主要属性

属性值
src要播放的视频的 URL
autoplay自动播放
controls显示控件,比如播放按钮
loop循环播放
muted输出被静音
preload页面加载的时候,自动预加载资源
height设置播放器高度
width设置播放器宽度
poster视频封面
 1、src指的是视频地址

 2、autoplay需要设置muted之后才生效。

 3、height与width设置后视频并不会拉伸，而是会自动调整大小

 4、preload指的是：当前视频会默认下载到内存，不管你点不点即播放

 5、poster用于设置视频封面

🐱‍🐉3、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="视频路径" autoplay="autoplay" controls="controls" loop="loop"></video>
</body>
</html>

运行结果：
在这里插入图片描述

🐱三、总结

在上述示例中，src属性指定了音频或视频的文件路径，type属性指定了文件的MIME类型。controls属性用于显示默认的播放控件。

1、可以通过使用<source>标签来指定不同格式的音频或视频文件，以便在不同
的浏览器中获得兼容性。

2、可以通过添加其他属性来自定义音频和视频元素的行为和样式，例如autoplay
属性用于自动播放，loop属性用于循环播放，preload属性用于加载媒体文件等。
L败落
关注
多任务学习(Multi-Task Learning)
AI天才研究院
07-12 715
多任务学习(Multi-Task Learning) Multi Task Learning. 本文目录： 多任务学习的定义及特点 多任务学习的网络结构 多任务学习的损失函数
论文速读| Multi-Task Learning for Dense Prediction Tasks: A Survey密集预测中的多任务学习综述.TPAMI2020
科研笔记
01-15 1085
随着深度学习的出现，许多密集预测任务，即产生像素级预测的任务，已经看到了显着的性能改进。典型的方法是孤立地学习这些任务，即为每个单独的任务训练一个单独的神经网络。然而，最近的多任务学习（MTL）技术通过学习的共享表示联合处理多个任务，在性能、计算和/或内存占用方面显示出有希望的结果。在本次调查中，我们全面介绍了计算机视觉中MTL的最先进深度学习方法，明确强调密集预测任务。我们的贡献涉及以下方面。首先，我们从网络架构的角度考虑MTL。我们包括广泛的概述并讨论了最近流行的MTL模型的优点/缺点。
MultiObjectiveOptimization:神经信息处理系统（NeurIPS）2018年论文《多任务学习作为多目标优化》的源代码-Source code learning
03-25
多任务学习作为多目标优化 该代码存储库包含的源代码： Multi-Task Learning as Multi-Objective Optimization Ozan Sener, Vladlen Koltun Neural Information Processing Systems (NeurIPS) 2018 实验框架基于PyTorch。 但是，所提出的算法（MGDA_UB）在很大程度上是Numpy的，没有其他要求。 因此，将其扩展到其他深度学习框架应该是微不足道的。 PyTorch版本在min_norm_solvers.py实现，仅使用Numpy的通用版本在min_norm_solvers.py文件中min_norm_solvers_numpy.py 。 此回购所包含的内容不只是本文的实现。 它同时采用了Frank-Wolfe和投影梯度下降法。 它还具有智能的初始化和梯度归一化
论文笔记-Multi-Task Learning as Multi-Objective Optimization
chenxino的博客
05-16 1354
在深度学习，使用多个任务（loss）训练模型时，通常使用最小化加权线性和的方式来训练整个模型。但是这要求多任务之间不存在相互竞争。因此作者提出新的多任务学习方法，将多任务学习转化成多目标优化问题，借助凸优化问题求帕累托（pareto）最优解。
正交lora：克服多任务学习过程中的知识冲突与灾难遗忘
最新发布
qq_36671160的博客
03-19 1317
多任务微调时，引入正交性能有效避免任务知识冲突
Multi-Task Learning as Multi-Objective Optimization 阅读笔记
icylling的专栏
01-10 1万+
Multi-Task Learning as Multi-Objective Optimization 阅读笔记
【多任务】——Multi-Task Learning as Multi-Objective Optimization代码阅读
怡宝2号
03-30 1000
多任务训练，帕累托优化
精读论文：Multi-Task Learning as Multi-Objective Optimization(附翻译)
菜菜小孙的blog
08-22 8948
Multi-Task Learning as Multi-Objective Optimization 二、翻译 0. 摘要 abstract： 在多任务学习中，多个任务共同解决，它们之间共享归纳偏差。多任务学习本质上是一个多目标问题，因为不同的任务可能会发生冲突，因此需要进行权衡。常见的折衷方案是优化代理目标（proxy objective），以最小化每个任务损失的加权线性组合。但是，这种解决方法仅在任务不竞争时才有效，这种情况很少发生。在本文中，我们明确地将多任务学习视为多目标优化，其总体目标是找到帕累
多任务学习优化总结 Multi-task learning（附代码）
热门推荐
Treasure Ashes
07-29 1万+
Multi-task Learning(Review)多任务学习概述 多任务学习优化（Optimization in Multi-task learning） Multi-Task Learning as Multi-Objective Optimization 阅读笔记 Multi-Task Learning Using Uncertainty to Weigh Losses GradNorm：Gradient Normalization for Adaptive Loss Balancing
Multi-Task Learning as Multi-Objective Optimization
weixin_41811657的博客
01-25 551
本文将多任务学习作为多目标优化，总体目标是找到帕累托最优解。 现有的MGDA（multiple-gradient descent algorithm）缺陷： (i) The underlying optimization problem does not scale gracefully to high-dimensional gradients, which arise naturally in deep networks. (ii) The algorithm requires explicit co
论文笔记讲解：A Modulation Module for Multi-task Learning with Applications
11-21
最新的关于多任务学习，如何消除不相关任务的干涉：一种用于图像检索的多任务学习的调制模块A Modulation Module for Multi-task Learning with Applications in Image Retrieval_ECCV_2018
Multi-Objective Particle Swarm Optimization ------(MOPSO)
05-08
Multi-Objective Particle Swarm Optimization ------(MOPSO)
【连续学习之MGDA算法】2018年NIPS多任务学习论文：Multi-Task Learning as Multi-Objective Optimization
BetterBench的博客
10-15 2160
本文提出了一种基于梯度的多目标优化算法，用于多任务学习，该算法通过优化一个上界来高效地找到帕累托最优解，且只需单次反向传播。
双目标帕累托优化_多目标优化(五): 多任务学习定义
weixin_40001519的博客
12-21 551
五. 多任务学习（MTL）5.1 多任务学习定义多任务学习（Multi-task learning）的目标是在同一时间学习多个任务，求得最优解。多任务学习定义[9]：有N个输入样本点，其中为任务数量，是第个任务、第个样本点标签label。定义映射：其中为多个任务共享参数，为单个任务独有的参数。其损失函数定义:其中为每个具体任务的权重，每个具体任务的损失函数定义：5.2 多任务学习转化为多目标优化多...
Multi task learning（MTL）多任务学习介绍
猪逻辑公园
10-21 1983
1、定义及与其他机器学习任务的区别 1.1 单任务学习与多任务学习 既然要介绍多任务学习，那么就必须要提到与之对应的单任务学习。 我们平时接触最多的那些机器学习算法基本都是单任务学习，即专注于一个学习目标。 如上图所示，有4个独立的神经网络，每个网络针对同样的输入只有一个输出函数（优化目标），这四个网络之间没有任何连接，所以每个网络之间的表示层是独立的，彼此训练的隐层对其他网络的训练没有任...
读论文：Deep Neural Networks with Multitask Learning
知行_那片天
03-26 1030
读论文：A Unified Architecture for Natural Language Processing: Deep Neural Networks with Multitask Learning 使用一个卷积神经网络，对输入的句子做：词性标注，词块分割(chunks)，命名实体识别，词语相似度以及语言模型等任务。 背景： 很多系统缺乏统一的框架来进行深度语义任务，这些系统有三大缺点:...
## 作为多目标优化的多任务学习：寻找帕累托最优解+组合在线学习：实时反馈玩转组合优化-微软研究院+用于组合优化的强化学习：学习策略解决复杂的优化问题
古月哲亭
05-23 1万+
组合在线学习：实时反馈玩转组合优化 看似无比困难的权衡问题，如今组合在线学习就能帮你“算出”最优解，轻松破解传统组合优化问题。本文中，我们邀请到微软亚洲研究院资深研究员陈卫为大家多面解读组合在线学习的奥妙之处。 什么是组合在线学习？大家都曾有过这样的经历，在我们刷微博或是阅读新闻的时候，经常会看到一些自动推荐的内容，这些信息可以根据你对推送的点击情况以及阅读时间等来调整以后的推送选择。再比如，手...
多任务学习
xw555666的博客
05-22 2962
多任务学习（Multi-task Learning, MTL）是一种机器学习范式，它旨在同时学习多个相关任务，以提高模型在各个任务上的性能。数学上，多任务学习可以表示为一个联合优化问题，其中模型需要在多个任务上同时优化。
构建深度强化学习代理的新工具：autonomous-learning-library
- **reinforcement-learning**: 强化学习，一种机器学习范式，用于训练智能体通过与环境交互来执行任务。 - **deep-reinforcement-learning**: 深度强化学习，结合深度学习和强化学习的交叉领域。 - **dqn**: 深度Q...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值