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

制作含有音频、视频的网页

news 2026/5/25 3:09:54

参考代码如下

<!DOCTYPE html>
<html>
<head><title>视频音乐网页</title>
</head>
<body><!-- 视频 --><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video><!-- 音乐 --><audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg">Your browser does not support the audio tag.</audio><!-- JavaScript --><script>// 播放音乐var audio = new Audio('music.mp3');audio.play();// 播放视频var video = document.getElementsByTagName('video')[0];video.play();</script>
</body>
</html>

使用了‘<video>’和‘<audio>’标签来嵌入视频和音乐。controls属性可以让用户控制媒体的播放、暂停、音量等。如果浏览器不支持HTML5的视频和音频标签，我们可以在标签中添加元素，提供多个格式的媒体文件，以便浏览器选择最适合的格式进行播放。

在JavaScript中，我们可以使用Audio和Video对象来控制音乐和视频的播放。在上面的示例中，我们使用了new Audio()创建了一个音乐对象，并使用play()方法播放音乐。同样地，我们使用document.getElementsByTagName(‘video’)获取了页面中的第一个视频元素，并使用play()方法播放视频。
菜鸟教程视频标签介绍
菜鸟教程音乐标签介绍

相关文章：

制作含有音频、视频的网页

参考代码如下 <!DOCTYPE html> <html> <head><title>视频音乐网页</title> </head> <body><!-- 视频 --><video width"320" height"240" controls><source src"movie.mp4" type"…...

编程日记 2023/11/20 3:13:58

QPair的介绍及用法

QPair是一个模板类&#xff0c;它存储一对值&#xff08;key&#xff0c;value&#xff09;&#xff0c;可以是不同的数据类型。QPair的用法有以下几个方面&#xff1a; QPair的构造函数有以下几种形式&#xff1a; QPair()&#xff1a;默认构造函数&#xff0c;创建一个空的QP…...

编程日记 2023/11/20 3:11:56

掌握未来技术趋势，Python编程引领人工智能时代

掌握未来技术趋势&#xff0c;Python编程引领人工智能时代 摘要&#xff1a;Python作为一种高级编程语言&#xff0c;在人工智能领域中扮演着越来越重要的角色。本文将通过介绍Python编程的特点、应用场景及发展前景&#xff0c;展望Python未来的发展趋势&#xff0c;并结合代…...

编程日记 2023/11/20 3:10:54

【自留地】后端 - PHP - MySQL - Nginx - Python - Java

PHP ThinkPHP6入门手册 【精选】【汇总】ThinkPHP6入门手册_tp6手册_Rudon滨海渔村的博客-CSDN博客文章浏览阅读5.4k次。安装安装Composer【win】https://getcomposer.org/Composer-Setup.exe【Linux & MacOS】curl -sS https://getcomposer.org/installer | phpmv compo…...

编程日记 2023/11/20 3:08:51

网页视频下载工具 iTubeGo mac中文版软件特色

iTubeGo YouTube Downloader mac是一款功能强大的YouTube视频下载工具。 iTubeGo YouTube Downloader mac软件特色 多种格式支持&#xff1a;iTubeGo YouTube Downloader可以将YouTube视频下载为多种常见的视频和音频格式&#xff0c;包括MP4、MP3、AVI、FLV、MOV、WMV等&…...

编程日记 2023/11/20 3:07:49

深度学习入门（第三天）——卷积神经网络

一、卷积神经网络应用领域 CV领域发展&#xff1a; 比赛中预测错误率的百分比&#xff0c;每年逐步下降。Human是人类肉眼的识别能力&#xff0c;2016年开始已经远高于人类肉眼死别能力&#xff0c;后面就取消了该方向的比赛了。 检测任务&#xff1a; 分类与检索&#xff1a;…...

编程日记 2023/11/20 3:06:48

【Unity小技巧】图片使用的一些常见问题

文章目录 前言Button不规则按钮点击空白区域不响应点击事件1. 设置资源参数2. 代码设置按钮Image的alphaHitTestMinimumThreshold3. 解释&#xff1a;4. 效果 Unity Image 原图比例控制方法一 Preserve Aspect1. 设置勾选Preserve Aspect&#xff08;保持长宽比&#xff09;&am…...

编程日记 2023/11/20 3:05:46

ZJU Beamer学习手册（二）

ZJU Beamer学习手册基于 Overleaf 的 ZJU Beamer模板 进行解读&#xff0c;本文则基于该模版进行进一步修改。 参考文献 首先在frame文件夹中增加reference.tex文件&#xff0c;文件内容如下。这段代码对参考文献的引用进行了预处理。 \usepackage[backendbiber]{biblatex} \…...

编程日记 2023/11/20 3:03:45

Shaderlab的组成部分SubShader

文档 渲染标签 渲染状态 渲染通道 Subshader 一个shader文件至少有一个subshader;多个subshader的顺序一般按照效果好到差的顺序编写显示物体的时候&#xff0c;设备从多个subshader中&#xff0c;按从前到后的顺序找到第一个符合的subshader进行执行 Subshader组成 渲染标…...

编程日记 2023/11/20 3:02:44

C语言 字符函数汇总，模拟实现各字符函数（炒鸡详细）

目录 求字符串长度 strlen 示例 模拟实现strlen 长度不受限制的字符串函数 strcpy 示例 模拟实现strcpy strcat 模拟实现strcat strcmp 示例 模拟实现strcmp 长度受限制的字符串函数介绍 strncpy 示例 模拟实现strncpy strncat 示例 模拟实现strncat s…...

编程日记 2023/11/20 3:01:42

微积分在神经网络中的本质

calculus 在一个神经网络中我们通常将每一层的输出结果表示为&#xff1a; a [ l ] a^{[l]} a[l] 为了方便记录&#xff0c;将神经网络第一层记为&#xff1a; [ 1 ] [1] [1] 对应的计算记录为为&#xff1a; a [ l ] &#xff1a; 第 l 层 a [ j ] &#xff1a; 第 j 个神经…...

编程日记 2023/11/20 3:00:41

CentOS部署Skywalking

一、安装Docker #yum -y install gcc #yum -y install gcc-c #yum install -y yum-utils 设置国内的镜像仓库 #yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新yum软件包索引 #yum makecache fast 安装Docker引擎 #yum …...

编程日记 2023/11/20 2:59:40

window上Clion配置C++版本的opencv

window上Clion配置opencv 注意版本一定要对的上&#xff0c;否则可能会出错&#xff0c;亲测 widnows 11mingw 8.1.0opencv 4.5.5 mingw8.1下载地址https://sourceforge.net/projects/mingw/ 配置环境变量 cmake下载 安装完添加环境变量 来到官网&#xff0c;下载 windows 对…...

编程日记 2023/11/20 2:58:38

FPGA时序分析与约束（14）——虚拟路径

一、概述 到目前为止&#xff0c;我们已经看到了如何约束时钟和端口来指定设计中的时序要求&#xff0c;我们可以通过这些基础的约束命令来进行时序约束&#xff0c;但是时序分析工具默认的时序检查方式可能和我们实际工程实现的情况不同&#xff0c;通常来说是约束过紧&#x…...

编程日记 2023/11/20 2:57:37

【Python】解析CPP类定义代码，获取UML类图信息

参考 & 鸣谢 CppHeaderParser - 官方文档Python解析C头文件win10直接获得文件绝对路径的方法总结 目的 解析CPP头文件中的类定义&#xff0c;获取UML中的属性。用于画UML类图。如下所示格式&#xff0c;图片来源-链接 即获取&#xff0c;类名&#xff0c;成员函数&#x…...

编程日记 2023/11/20 2:56:36

Docker存储驱动之- overlay2

docker支持多种graphDriver&#xff0c;包括vfs、devicemapper、overlay、overlay2、aufs等等&#xff0c;其中最常用的就是aufs了&#xff0c;但随着linux内核3.18把overlay纳入其中&#xff0c;overlay的地位变得更重&#xff0c;最近也在自己的虚拟机上用overlay2作为docker…...

编程日记 2023/11/20 2:55:34

Vue3 shallowRef 和 shallowReactive

一、shallowRef 使用shallowRef之前需要进行引入&#xff1a; import { shallowRef } from vue; 使用方法和ref 的使用方法一致&#xff0c;以下是二者的区别&#xff1a; 1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据&#xff0c;那么他们的效果是一样的&#x…...

编程日记 2023/11/20 2:54:33

Python数据分析实战① Python实现数据可视化

文章目录 一、数据可视化介绍二、matplotlib和pandas画图1.matplotlib简介和简单使用2.matplotlib常见作图类型3.使用pandas画图4.pandas中绘图与matplotlib结合使用 三、订单数据分析展示四、Titanic灾难数据分析显示 一、数据可视化介绍 数据可视化是指将数据放在可视环境中…...

编程日记 2023/11/20 2:53:32

ASP.NET 开发几个知识点

1、 皮肤设定&#xff1a; 项目右键&#xff0c;建立皮肤 app_themes 文件夹&#xff0c;右键 建立 web from 皮肤文件&#xff0c; 设定皮肤样式。全局使用皮肤 web.config 增加 <pages styleSheetTheme"Skin1" /> &#xff0c;或在 具体页面 头 增加 sty…...

编程日记 2023/11/20 2:52:30

企业微信H5开发遇到的坑

企业微信官方推荐wx.agentConfig引用<script src"https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>是没有效果的 必须引用以下代码才有效果&#xff0c;这也是我看了社区的回答才有所收获&#xff0c;是一个坑 且VUE引用在线的…...

编程日记 2023/11/20 2:51:28

if语句

含义if就是判断条件&#xff0c;满足就执行&#xff0c;不满足就跳过&#xff0c;相当于“如果……就……”代码基础格式&#xff1a;if 条件&#xff1a;满足条件才运行的代码&#xff08;打完冒号之后要按回车键自动缩进&#xff0c;直接顶格写会报错&#xff0c;手动缩进不符…...

编程新知 2026/5/25 3:06:18

告别.bash_profile：在macOS Ventura/Sonoma上为Maven配置环境变量的几种新方法（含Zsh教程）

macOS Ventura/Sonoma时代&#xff1a;Maven环境变量配置的现代实践指南如果你最近升级到了macOS Ventura或Sonoma&#xff0c;可能会发现那些教你修改.bash_profile来配置Maven环境变量的教程突然不灵了。这不是你的问题——而是macOS的Shell环境已经悄然进化。作为长期在macO…...

编程新知 2026/5/25 3:04:14

QM/MM与ML/MM模拟对比：从呋喃光化学弛豫看机器学习力场结构保真度

1. 项目概述&#xff1a;从呋喃的光化学弛豫看QM/MM与ML/MM模拟的实战差异在计算化学和分子模拟领域&#xff0c;我们常常需要回答一个核心问题&#xff1a;一个分子在吸收光能量后&#xff0c;究竟会经历怎样的微观旅程&#xff1f;这个过程充满了不确定性&#xff0c;电子在几…...

编程新知 2026/5/25 2:09:24

Agent Harness 系列：为什么你的 Agent 演示很顺、上线就崩？

导读&#xff1a; 同样的模型&#xff0c;换一套外围基础设施&#xff0c;排名从第 30 开外直接冲到第 5——没有改动任何模型权重&#xff0c;没有换更贵的 API。这不是玄学&#xff0c;这是 Agent Harness 的威力。本文是三篇系列的第一篇&#xff0c;从"为什么需要 Har…...

编程新知 2026/5/25 2:03:04

深度解析sguard_limit：ACE-Guard内核级资源限制器的架构设计与性能优化

深度解析sguard_limit&#xff1a;ACE-Guard内核级资源限制器的架构设计与性能优化 【免费下载链接】sguard_limit 限制ACE-Guard Client EXE占用系统资源&#xff0c;支持各种腾讯游戏 项目地址: https://gitcode.com/gh_mirrors/sg/sguard_limit 在腾讯游戏生态中&…...

编程新知 2026/5/24 20:10:19

【Elasticsearch从入门到精通】第26篇：Elasticsearch Term级别查询——精确匹配与范围查询

上一篇【第25篇】Elasticsearch全文检索——match、phrase与query_string详解 下一篇【第27篇】Elasticsearch复合查询——bool、dis_max与function_score 摘要 与全文检索的模糊匹配不同&#xff0c;Term级别查询用于结构化数据的精确检索&#xff0c;不对查询词进行分词分析…...

编程新知 2026/5/24 15:22:46

3步解锁：开源工具Applera1n完全指南——iOS 15-16激活锁绕过方案

3步解锁&#xff1a;开源工具Applera1n完全指南——iOS 15-16激活锁绕过方案 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n Applera1n是一款专为iOS 15-16系统设计的免费开源激活锁绕过工具&#xff…...

编程新知 2026/5/24 14:35:39

如何在Windows上优雅安装安卓应用：APK安装器实用指南

如何在Windows上优雅安装安卓应用&#xff1a;APK安装器实用指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾想过在Windows电脑上直接运行安卓应用&#x…...

编程新知 2026/5/24 13:28:12

为内部工具快速添加 AI 能力，Taotoken 分钟级接入实践

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为内部工具快速添加 AI 能力&#xff0c;Taotoken 分钟级接入实践 当你需要为一个现有的内部数据分析或报告生成工具添加智能摘要或…...

编程新知 2026/5/24 12:46:45

iOS设备激活锁绕过指南：Applera1n工具实战详解

iOS设备激活锁绕过指南&#xff1a;Applera1n工具实战详解 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n 你是否曾经遇到过这样的困境&#xff1f;购买了一台二手的iPhone或iPad&#xff0c;却因为前…...

编程新知 2026/5/24 12:08:37