html实现网页插入音频

前言

欢迎来到我的博客

个人主页:北岭敲键盘的荒漠猫-CSDN博客

本文主要介绍html中

如何插入音乐和视频

 视频插入

标签:<video></video>

兼容格式:mp4,因为别的浏览器都有不兼容的格式,唯一对mp4全都兼容。所以尽量使用mp4格式。

属性:

属性属性值作用
autoplayautoplay自动播放(谷歌必须添加muted才能自动播放)
widthpx设置播放器宽度
heightpx设置播放器高度
looploop循环播放
controlscontrols显示播放的控制按钮
src地址视频资源位置
mutedmuted静音播放
preload

auto(早加载视频)

none(慢加载)

用来提高网页加载速度优化体验的
posterimgurl加载等待画面的图片

音频插入

标签:<audio></audio>

兼容描述:mp3格式所有浏览器都兼容,尽量用mp3模式的音频。

属性:

但是也会遇到浏览器禁止播放的问题,因为谷歌不让进去自己播放,咱总不能给音乐一个静音播放吧。

总结

这个确实是比较简单,就俩标签,我就不上案例了,写两下就会了。

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

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

相关文章

解决Win10家庭版找不到组策略gpedit.msc的·方法

因为电脑出问题&#xff0c;一开机就会自动开启ie浏览器&#xff0c;所以就想找有没有方法解决&#xff0c;然后就了解到了gpedit.msc的作用以及相关的一些方法&#xff0c;也是为之后也许有人遇到相同的问题有个提供方法的途径。 首先我们直接运行gpedit.msc 是找不到的&…

【Qt QML】QLibrary加载共享库中的类

QLibrary是一个用于加载动态链接库&#xff08;或称为共享库&#xff09;的类。它提供了一种独立于平台的方式来访问库中的功能。 在QLibrary中&#xff0c;可以通过构造函数或setFileName()方法设置要加载的库文件名。当加载库文件时&#xff0c;QLibrary会搜索所有平台特定的…

计算机网络【应用层】邮件和DNS

文章目录 电子邮件DNSDNS提供的服务&#xff1a;域名分级域名解析流程DNS资源记录DNS服务器类型 电子邮件 使用SMTP协议发送邮件之前&#xff0c;需要将二进制多媒体数据编码为ASCII码SMTP一般不使用中间邮件服务器发送邮件&#xff0c;如果收件服务器没开机&#xff0c;那么会…

【iOS】多线程

文章目录 前言一、多线程的选择方案二、GCD和NSOperation的比较二、多线程相关概念任务队列 三、死锁情况主队列加同步任务 四、任务队列组合主队列异步并发队列异步 前言 这两天将iOS的多线程的使用都看了一遍&#xff0c;iOS的多线程方案有许多&#xff0c;本篇博客主要总结…

流畅的python-学习笔记_符合python风格的对象

对象表示形式 查看对象说明&#xff0c;可以通过__repr__和__str__方法&#xff0c;前者主要用于开发者&#xff0c;后者主要用于用户&#xff0c;这两个方法分别对内置函数repr和str函数提供支持 向量类 备选构造方法 classmethod和staticmethod staticmethod用的不是特别…

基于鸢尾花数据集的四种聚类算法(kmeans,层次聚类,DBSCAN,FCM)和学习向量量化对比

基于鸢尾花数据集的四种聚类算法&#xff08;kmeans&#xff0c;层次聚类&#xff0c;DBSCAN,FCM&#xff09;和学习向量量化对比 注&#xff1a;下面的代码可能需要做一点参数调整&#xff0c;才得到所有我的运行结果。 kmeans算法&#xff1a; import matplotlib.pyplot a…

音视频开发3 视频基础,图片基础

图片像素&#xff08;Pixel&#xff09; 一张图片是由多少个 像素 构成的。 例如一张图片是由60x50组成的。 位深度 bit depth RGB表示法 红&#xff08;Red&#xff09;、绿&#xff08;Green&#xff09;、蓝&#xff08;Blue&#xff09; 除了24bit&#xff0c;常见的位深…

electron 通信总结

默认开启上下文隔离的情况下 渲染进程调用主进程方法&#xff1a; 主进程 在 main.js 中&#xff0c; 使用 ipcMain.handle&#xff0c;添加要处理的主进程方法 const { ipcMain } require("electron"); 在 electron 中创建 preload.ts 文件&#xff0c;从 ele…

在Linux上使用Selenium驱动Chrome浏览器无头模式

大家好&#xff0c;我们平时在做UI自动化测试的时候&#xff0c;经常会用到Chrome浏览器的无头模式&#xff08;无界面模式&#xff09;&#xff0c;并且将测试代码部署到Linux系统中执行&#xff0c;或者平时我们写个爬虫爬取网站的数据也会使用到&#xff0c;接下来和大家分享…

Elasticsearch初步认识

Elasticsearch初步认识 ES概述基本概念正向索引和倒排索引IK分词器ik_smart最少切分ik_max_word为最细粒度划分 ES索引库基本操作对索引库操作对文档操作 ES概述 Elasticsearch&#xff0c;简称为 ES&#xff0c;是一款非常强大的开源的高扩展的分布式全文检索引擎&#xff0c…

神经网络中的归一化

我们今天介绍一下神经网络中的归一化方法~ 之前学到的机器学习中的归一化是将数据缩放到特定范围内&#xff0c;以消除不同特征之间的量纲和取值范围差异。通过将原始数据缩放到一个特定的范围内&#xff0c;比如[0,1]或者[-1,1]&#xff0c;来消除不同特征之间的量纲和取值范围…

【前沿模型解析】一致性模型CM(一)| 离散时间模型到连续时间模型数学推导

文章目录 1 离散时间模型2 连续时间模型 得到 SDE 随机微分方程2.1 从离散模型到SDE的推理步骤 3 补充&#xff1a;泰勒展开近似 1 − β i \sqrt{1-\beta_i} 1−βi​ ​ CM模型非常重要 引出了LCM等一系列重要工作 CM潜在性模型的数学公式推导并不好理解 一步一步&#xf…

Springboot框架web开发实用功能-02

在些模块中汇总了一些web开发常用的配置和功能。 涉及的模块 springboot-common-config&#xff0c; 端口号&#xff1a;17000 Springboot框架web开发常用功能 Restful接口定义 查询参数 Data public class QueryParam {private String key;private String value; }Control…

C#上位机源程序 下位机单片机实现控制电机

基于C#的上位机编程程序&#xff0c;通过上位机控制下位机实现电脑操作控制步进电机的转动 程序 #include<reg52.h>#define uchar unsigned char#define uint unsigned int#include "2401.h"#include "delay.h"#include "ds18b20.h"sbit I…

力扣每日一题110:平衡二叉树

题目 简单 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&#xff1a;false示例 3&#xff1a; …

python从0开始学习(四)

目录 前言 1、算数运算符 1.1 //:整除运算符 1.2 %:取模操作 1.3 **&#xff1a;幂运算 2、赋值运算符 3、比较运算符 4、逻辑运算符 5、位运算符 5.1 &&#xff1a;按位与 5.2 |&#xff1a;按位或 5.3 ^&#xff1a;按位异或 5.4 ~&#xff1a;按位取反 5.5…

Linux学习笔记(3)---- Debian测试网速指令及查看是否千兆网卡

测试网速指令 在Debian系统中&#xff0c;测网速的指令主要有以下几种方法&#xff1a; 使用speedtest-cli工具&#xff1a; speedtest-cli是一个常用的网络速度测试工具&#xff0c;可以通过命令行进行安装和运行。首先&#xff0c;需要安装speedtest-cli&#xff1a; sud…

工业物联网技术在生产流程中的应用及优势与挑战——青创智通

工业物联网解决方案-工业IOT-青创智通 随着科技的不断发展&#xff0c;物联网技术逐渐渗透到各个行业中&#xff0c;尤其是在工业领域&#xff0c;工业物联网的应用正在逐步重塑生产流程。本文将探讨工业物联网如何影响生产流程&#xff0c;并分析其带来的优势和挑战。 一、工…

k8s保持pod健康

存活探针 Kubemetes 可以通过存活探针 (liveness probe) 检查容器是否还在运行。可以为 pod 中的每个容器单独指定存活探针。如果探测失败&#xff0c;Kubemetes 将定期执行探针并重新启动容器。 Kubemetes 有以下三种探测容器的机制&#xff1a; HTTP GET 探针对容器的 IP 地…

java学习记录最后一篇

面向对象编程 封装 该露的露&#xff0c;该藏的藏 我们程序设计要追求“高内聚&#xff0c;低耦合”。高内聚就是类的内部数据细节由自己完成&#xff0c;不允许外部干涉&#xff1b;低耦合&#xff1a;仅暴露少量的方法给外部使用。 封装&#xff08;数据的隐藏&#xff0…