html之如何设置音频和视频

文章目录

  • 前言
  • 一、音频标签:audio
    • 1.audio简介
    • 2.常用属性
      • controls
      • autoplay
      • loop
      • 代码演示:
  • 二、视频标签:video
    • 1.video
    • 2.常用的视频元素
      • controls
      • autoplay
      • loop
      • 代码演示:
  • 总结
    • 视频元素总结
    • 音频元素总结


前言

html中插入音频和视频的方法基本相同

音频格式:mp3、ogg、wav

视频格式:mp4、ogv、webm


一、音频标签:audio

1.audio简介

audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时,默认情况下不允许用户自己控制播放按钮。

以下情况在页面中不会显示,需要加上controls:

 <audio src=""></audio>

2.常用属性

controls

controls:是否允许用户控制播放。

<audio src="歌曲路径" controls></audio>

autoplay

autoplay:音频文件是否自动播放。如果设置了autoplay,则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放。

<audio src="歌曲路径" controls autoplay></audio>

loop

loop :音乐是否循环播放。设置了此属性,则音乐会进行循环播放。

<audio src="" controls loop></audio>

代码演示:

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

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

二、视频标签:video

1.video

video:向网页中引入一个视频,使用方法和audio类似。

<video src="视频路径"></video>

2.常用的视频元素

controls

controls:是否允许用户控制播放。

<audio src="视频路径" controls></audio>

autoplay

autoplay:视频文件是否自动播放。如果设置了autoplay,则视频在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对视频进行播放。

<audio src="视频路径" controls autoplay></audio>

loop

loop :视频是否循环播放。设置了此属性,则视频会进行循环播放。

<audio src="视频路径" controls loop></audio>

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<video src="周杰伦-晴天(蓝光).mp4" controls loop autoplay width="500px" height="300px"></video>
</body>
</html>

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


总结

视频元素总结

属性说明
src要播放的视频的URL
control向用户系统显示控件,比如播放按钮
autoplay视频就绪后马上播放
loop当媒体文件完成播放后再次开始播放
preload视频在页面加载完时就开始加载,并开始预备播放,如果使用autoplay则该属性忽略
poster规定视频正在加载时显示的图像,直到用户单击播放按钮
width设置视频播放器的宽度
height设置视频播放器的高度

音频元素总结

属性说明
controls显示或隐藏用户控制界面
autoplay媒体是否自动播放
loop媒体是否循环播放
paused媒体是否暂停(只读属性)
ended媒体是否播放完毕(只读属性)
currentTime当前播放进度
duration媒体播放总时间(只读属性)
volume0.0到1.0的音量相对值
muted是否静音

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

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

相关文章

【科学计算语言】实验一 Python数据类型与控制结构

实验名称 【目的和要求】 &#xff08;1&#xff09;掌握Python语言的分支及循环结构编程语句&#xff1a;if、for、while &#xff08;2&#xff09;熟练掌握Python基本运算和内置函数及数据表达 &#xff08;3&#xff09;在具体问题中综合运用顺序、分支、循环三种结构完成设…

macos 上使用 java+opencv记录

自编译 失败很多次之后终于跑起来一个 javaopencv 的demo。 过程 主要步骤如下&#xff1a; 编译需要 Apache Ant brew install ant需要告诉 opencv 需要 javabuild -DBUILD_opencv_javaON brew edit opencv编辑这个我错了很多次 直接编辑完了它会默认下载未修改的openc…

Java 并发编程 —— 透过源码剖析 ForkJoinPool

目录 一. 前言 二. 工作窃取的实现原理 2.1. WorkQueue&#xff08;工作队列&#xff09; 2.2. 工作窃取流程 三. ForkJoinPool 源码解析 3.1. ForkJoinPool 的字段 3.1.1. 常量 3.1.2. 成员变量 3.1.3. ctl&#xff08;5个部分组成&#xff09; 3.2. 构造函数 3.3.…

TensorFlow(3):初始TensorFlow

1 初始TensorFlow TensorFlow程序通常被组织成一个构件图阶段和一个执行图阶段。 在构建图阶段&#xff0c;数据与操作的执行步骤被描述为一个图 在执行图阶段&#xff0c;使用会话&#xff08;调用系统资源&#xff09;执行构建好的图中的操作 图和会话 图&#xff1a;这是…

HarmonyOS引导页登陆页以及tabbar的代码说明 home 下拉刷新页代码 5

下拉刷新页 代码说明 这一页第一次运行时很卡&#xff0c;就是你点击修改&#xff0c;要等一会才出来&#xff0c;加一句&#xff0c;修改的字样原来应是修车二字。只能将错就错。 const TopHeight 200; Component export default struct Car {State list: Array<number&…

​TrustZone之可信固件

Trusted Firmware是Armv8-A设备的安全世界软件的开源参考实现。Trusted Firmware为SoC开发人员和OEM提供了一个符合相关Arm规格&#xff08;包括TBBR和SMCC&#xff09;的参考Trusted代码库。 以下图表显示了Trusted Firmware的结构&#xff1a; SMC调度程序处理传入的SMC。SMC…

基于html5的演唱会购票系统的设计与实现论文

基于html5的演唱会购票系统的设计与实现 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的电商平台以及购物管理系统。本文介绍了基于html5的演唱会购票系统的设计与实现的开发全过程。通过分析企业对于基于html5的演唱会购票系统的设计与实现的需求…

docker运行java程序的Dockerfile

1&#xff0c;docker运行java程序的Dockerfile # 使用基础镜像 FROM alpine:latest # 暴露容器的端口 不会自动将容器的端口映射到宿主机上 docker run -d -p <宿主机端口>:7080 <镜像名称> EXPOSE 9202 EXPOSE 19202 #下载jdk8 RUN apk update && apk a…

机器学习之随机森林 python

随机森林是一种集成学习方法&#xff0c;它是由多个决策树组成的模型&#xff0c;其中每棵树都是随机生成的。随机深林包括两种主要类型&#xff1a;随机森林和极端随机树。 废话不说上代码 import numpy as np import matplotlib.pyplot as plt from sklearn.datasets import…

百模大战下的AI变革:七大趋势引领未来

AI行业的发展正在经历前所未有的变革。随着各大科技公司和初创企业竞相推出各种先进的人工智能模型&#xff0c;AI技术的边界正在不断被突破&#xff0c;新的行业趋势和应用场景也在逐渐浮现。在这场激烈的竞争中&#xff0c;AI行业的新趋势不仅影响着我们如何看待和使用AI&…

@德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?

德人合科技 | 天锐绿盾加密软件是一款全面保障企业电脑数据和安全使用的加密软件 PC端访问地址&#xff1a;www.drhchina.com 它的功能包括但不限于&#xff1a; 实时操作日志&#xff1a;可以实时详细地记录所有终端的操作日志&#xff0c;包括终端上窗口标题的变换、程序的…

MySQL数据库利用binlog日志文件恢复数据

MySQL数据库利用binlog日志文件恢复数据 MySQL数据库利用binlog日志文件恢复数据的步骤主要有以下几种&#xff1a; 1.使用mysqlbinlog工具解析binlog日志文件&#xff0c;生成SQL语句。 2.使用mysql命令行工具执行生成的SQL语句&#xff0c;将数据恢复到目标数据库。 3.使用…

C++学习笔记(十七)

模板 1. 模板的概念 模板就是建立通用的模具&#xff0c;大大提高复用性 模板的特点&#xff1a; 1. 模板不可以直接使用&#xff0c;它只是一个框架 2. 模板的通用并不是万能的 2. 函数模板 C另一种编程思想称为泛型编程&#xff0c;主要利用的技术就是模板 C提供两种…

python本地缓存cacheout

cacheout地址&#xff1a; https://github.com/dgilland/cacheout 文档地址&#xff1a;https://cacheout.readthedocs.io 简单使用介绍 安装 pip install cacheout 使用 import timefrom cacheout import Cache# 默认的缓存(maxsize)大小为256&#xff0c;默认存活时间(t…

本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

准备基础镜像 注意一定要拉取和当前 IK 分词插件版本一致的 OpenSearch 镜像: https://github.com/aparo/opensearch-analysis-ik/releases 写这篇文章的时候 IK 最新版本 2.11.0, 而 dockerhub 上 OpenSearch 最新版是 2.11.1 如果版本不匹配的话是不能用的, 小版本号对不上…

11种方法判断​软件的安全可靠性​

软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防止对程序及数据的非授权的故意或意外访问的能力有关的软件属性&#xff0c;可靠性指与在规定的一段时间和条件下&#xff0c;软件 软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防…

通讯录应用程序开发指南

目录 一、前言 二、构建通讯录应用程序 2.1通讯录框架 (1)打印菜单 (2) 联系人信息的声明 (3)创建通讯录 (4)初始化通讯录 2.2功能实现 (1)增加联系人 (2)显示联系人 (3)删除联系人 (4)查找联系人 (5)修改联系人 (6)排序联系人 三、通讯录的优化 3.1 文件存储 …

Python办公自动化 – 语音识别和文本到语音的转换

Python办公自动化 – 对图片处理和文件的加密解密 以下是往期的文章目录&#xff0c;需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自动化 –…

PhysX——源码编译

从git下载源码 git主页 https://github.com/NVIDIA-Omniverse/PhysXclone地址 https://github.com/NVIDIA-Omniverse/PhysX.git源码编译 运行PhysX需要两个编译器的支持&#xff0c;CMake 3.12 或以上版本以及Python 2.7.6 版本 进入工程的 physx 目录&#xff0c;运行generate…

Java将枚举类转为json返回给前端

Java将枚举类转为json返回给前端 1.后端将枚举类直接返回给前端时只会显示枚举名称2.使用 JsonFormat 注解可以将枚举类转为json再返回给前端。2.1添加maven依赖2.2在枚举类上添加JsonFormat(shape JsonFormat.Shape.OBJECT)2.3编写接口返回给前端 1.后端将枚举类直接返回给前…