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

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

news 2025/6/22 4:17:32

参考代码如下

<!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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/6/20 12:22:01

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/6/20 11:07:53

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/6/21 5:54:29

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/6/21 16:39:31

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/6/18 20:31:42

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/6/21 16:36:19

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/6/19 16:21:41

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/6/21 5:58:57