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

参考代码如下

<!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()方法播放视频。
菜鸟教程视频标签介绍
菜鸟教程音乐标签介绍

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

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

相关文章

python——第十一天

今日目标&#xff1a; 模块和包的基本概念 python中模块的导入问题 main函数的作用和使用 常见内置模块的使用 IO流相关 模块和包的基本概念&#xff1a; 模块&#xff08;module&#xff09;&#xff1a;一个.py文件就是一个模块 包&#xff08;package&#xff09;&#xff1…

单片非晶磁性测量系统磁参量指标

1. 概述 单片非晶磁性测量系统是专用于测量非晶或纳米晶薄片(带)交流磁特性的装置&#xff0c;由精密励磁及测量装置 ( 40 Hz&#xff5e;65 Hz&#xff0c;可定制至400 Hz )、单片磁导计、全自动测量软件组成。使用该装置可在能耗、效率、材料均匀性/一致性、可靠性、整个生命…

CSS的选择器(一篇文章齐全)

目录 Day26&#xff1a;CSS的选择器 1、CSS的引入方式 2、CSS的选择器 2.1 基本选择器​编辑 2.2 组合选择器 2.3 属性选择器 2.4 伪类选择器 2.5 样式继承 2.6 选择器优先级 3、CSS的属性操作 3.1 文本属性 3.2 背景属性 3.3 边框属性 3.4 列表属性 3.5 dispal…

mysql面试题——索引相关

一&#xff1a;什么是索引? 索引是数据结构。你可以简单理解为“排好序的快速查找数据结构”。 二&#xff1a;为什么使用索引&#xff1f; 能以更少的查询次数来找到数据 三&#xff1a;InnoDB中的索引类型&#xff1f; InnoDB存储引擎支持两种常见的索引数据结构&#…

【10套模拟】【7】

关键字&#xff1a; 二叉排序树插入一定是叶子、单链表简单选择排序、子串匹配、层次遍历

力扣刷题-二叉树-二叉树的高度与深度

二叉树最大深度 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 递归法 本题可以使用前序&#xff08;中左…

Sql Server 2017主从配置之:事务日志传送

使用事务日志传送模式搭建Sql Server 2017主从同步&#xff0c;该模式有一定的延迟&#xff0c;是通过3个不同的定时任务&#xff0c;将主库的日志同步到从库进行恢复来实现数据库同步操作。 该模式在同步时候&#xff0c;从库不可以被使用&#xff0c;否则同步就会失败。 环…

现货白银MACD实战分析例子

MACD这个技术指标的全称是平滑异同移动平均线&#xff0c;主要表示经过平滑处理后均线的差异程度&#xff0c;一般用来研判现货白银价格变化的方向、强度和趋势。MT4中的MACD指标&#xff0c;主要是由信号线、&#xff08;上升/下跌&#xff09;动能柱、0轴这三部分组成。 MACD…

【开源】基于Vue.js的衣物搭配系统的设计和实现

项目编号&#xff1a; S 016 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S016&#xff0c;文末获取源码。} 项目编号&#xff1a;S016&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣…

MyBatis查询数据库(全是精髓)

1. 什么是MyBatis&#xff1f; 简单说&#xff0c;MyBatis就是一个完成程序与数据库交互的工具&#xff0c;也就是更简单的操作和读取数据库的工具。 2. 怎么学习Mybatis Mybatis学习只分为两部分&#xff1a; 配置MyBatis开发环境使用MyBatis模式和语法操作数据库 3. 第一…

彻底解决electron-builder安装问题与npm下载配置问题

electron-builder这个工具每次安装最少要耗费我整整一天的时间。由于只需安装一次即可使用就没去做好笔记,但有时候涉及到更新,或者换了新电脑,这个环境还得重新安装。为了避免下次安装浪费一整天时间,特此做好笔记。 虽然网上找了很多资料但都不详细,现在我们从底层来理解…

Python文本段落翻译

Python文本段落翻译 1、Translate库2、基本使用 1、Translate库 translate非标准库是Python中可以实现对多种语言进行互相翻译的库&#xff0c;translate可以将原始文本或段落翻译成我们需要的目标语言 translate支持多种语言&#xff0c;常见的例如&#xff1a; zh/zh-CN&…

pg 模拟主库down机之pg_kaboom

为了测试pg模拟down机&#xff0c;可使用插件pg_kaboom:GitHub - pgguru/pg_kaboom: Devious SQL-based SQL tools to crash your PostgreSQL server $ git clone gitgithub.com:CrunchyData/pg_kaboom.git $ cd pg_kaboom $ make PG_CONFIGpath/to/pg_config && make…

2023年(第六届)电力机器人应用与创新发展论坛-核心PPT资料下载

一、峰会简介 大会以“聚焦电力机器人创新、助力行业数字化转型、促进产业链协同发展”为主题&#xff0c;展示电力机器人产业全景创新技术&#xff0c;探讨数字化战略下电力机器人应用前景和发展趋势。为加快推进电力机器人应用拓新&#xff0c;助力电网数字化转型升级&#…

Go 语言常用数据结构

1. 请解释 Go 语言中的 map 数据结构&#xff0c;以及它与数组和切片的区别。 ①、解释说明&#xff1a; 在Go语言中&#xff0c;map是一种内置的数据类型&#xff0c;它是一种无序的键值对集合。每个键值对都由一个键和一个值组成&#xff0c;它们之间用冒号分隔。键可以是任…

彻底弄清Python软件包安装流程并解决安装错误

彻底弄清Python软件包安装流程并解决安装错误 前言&#xff1a;写这篇文章的初衷也是因为以前饱受Python环境配置和软件包安装的摧残&#xff0c;所以写下这篇文章希望帮助同样深陷泥潭的小伙伴们&#xff0c;该文会带你理解关于安装软件包的流程。&#xff08;tips&#xff1…

数据集笔记:NGSIM (next generation simulation)

1 数据集介绍 数据介绍s Next Generation Simulation (NGSIM) Open Data (transportation.gov) 数据地址&#xff1a;Next Generation Simulation (NGSIM) Vehicle Trajectories and Supporting Data | Department of Transportation - Data Portal 时间2005年到2006年间地…

七天.NET 8操作SQLite入门到实战 - SQLite 简介

什么是SQLite&#xff1f; SQLite是一个轻量级的嵌入式关系型数据库&#xff0c;它以一个小型的C语言库的形式存在。它的设计目标是嵌入式的&#xff0c;而且已经在很多嵌入式产品中使用了它&#xff0c;它占用资源非常的低&#xff0c;在嵌入式设备中&#xff0c;可能只需要几…

第四代智能井盖传感器,实时守护井盖位安全

城市管理中井盖的安全问题始终是一个不容忽视的方面。传统的巡检方式不仅效率低下&#xff0c;无法实现实时监测&#xff0c;而且很难准确掌握井盖的异动状态。因此智能井盖传感器的应用具有重要意义。这种智能传感器可以帮助政府实时掌握井盖的状态&#xff0c;一旦发现异常情…

企业计算机服务器中了mallox勒索病毒怎么解决,勒索病毒解密文件恢复

随着科技技术的不断发展&#xff0c;网络技术得到了快速提升&#xff0c;但网络安全威胁也不断增加&#xff0c;近期&#xff0c;云天数据恢复中心陆续接到很多企业的求助信息&#xff0c;企业的计算机服务器遭到了mallox勒索病毒攻击&#xff0c;导致企业的所有业务中断&#…