HTML5 Audio/Video 标签、属性、方法、事件汇总(详细)

文章目录

  • HTML 音频/视频 方法
  • HTML 音频/视频属性
  • HTML 音频/视频事件
  • 代码展示如下
    • 事件代码:

HTML 音频/视频 方法

方法描述
addTextTrack()向音频/视频添加新的文本轨道。
canPlayType()检测浏览器是否能播放指定的音频/视频类型。
load()重新加载音频/视频元素。
play()开始播放音频/视频。
pause()暂停当前播放的音频/视频。

HTML 音频/视频属性

属性描述
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay设置或返回是否在加载完成后随即播放音频/视频。
buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象。
controller返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls设置或返回音频/视频是否显示控件(比如播放/暂停等)。
crossOrigin设置或返回音频/视频的 CORS 设置。
currentSrc返回当前音频/视频的 URL。
currentTime设置或返回音频/视频中的当前播放位置(以秒计)。
defaultMuted设置或返回音频/视频默认是否静音。
defaultPlaybackRate设置或返回音频/视频的默认播放速度。
duration返回当前音频/视频的长度(以秒计)。
ended返回音频/视频的播放是否已结束。
error返回表示音频/视频错误状态的 MediaError 对象。
loop设置或返回音频/视频是否应在结束时重新播放。
mediaGroup设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)。
muted设置或返回音频/视频是否静音。
networkState返回音频/视频的当前网络状态。
paused设置或返回音频/视频是否暂停。
playbackRate设置或返回音频/视频播放的速度。
played返回表示音频/视频已播放部分的 TimeRanges 对象。
preload设置或返回音频/视频是否应该在页面加载后进行加载。
readyState返回音频/视频当前的就绪状态。
seekable返回表示音频/视频可寻址部分的 TimeRanges 对象。
seeking返回用户是否正在音频/视频中进行查找。
src设置或返回音频/视频元素的当前来源。
startDate返回表示当前时间偏移的 Date 对象。
textTracks返回表示可用文本轨道的 TextTrackList 对象。
videoTracks返回表示可用视频轨道的 VideoTrackList 对象。
volume设置或返回音频/视频的音量。

HTML 音频/视频事件

事件描述
abort当音频/视频的加载已放弃时触发。
canplay当浏览器可以开始播放音频/视频时触发。
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
durationchange当音频/视频的时长已更改时触发。
emptied当目前的播放列表为空时触发。
ended当目前的播放列表已结束时触发。
error当在音频/视频加载期间发生错误时触发。
loadeddata当浏览器已加载音频/视频的当前帧时触发。
loadedmetadata当浏览器已加载音频/视频的元数据时触发。
loadstart当浏览器开始查找音频/视频时触发。
pause当音频/视频已暂停时触发。
play当音频/视频已开始或不再暂停时触发。
playing当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress当浏览器正在下载音频/视频时触发。
ratechange当音频/视频的播放速度已更改时触发。
seeked当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking当用户开始移动/跳跃到音频/视频中的新位置时触发。
stalled当浏览器尝试获取媒体数据,但数据不可用时触发。
suspend当浏览器刻意不获取媒体数据时触发。
timeupdate当目前的播放位置已更改时触发。
volumechange当音量已更改时触发。
waiting当视频由于需要缓冲下一帧而停止时触发。

代码展示如下

添加音频

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><audio controls autoplay loop muted><source src="./media/music.mp3"><source src="./media/music.ogg"></audio>
</body>
</html>

添加视频

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- controls:控制播放暂停的按钮 autoplay:自动播放loop:无限循环muted:静音poster:视频封面--><video width="500" height="300" controls loop autoplay muted poster="./media/rt.jpg"><source src="./media/explore_promo.mp4"><source src="./media/video.mp4"></video>
</body>
</html>

Js代码

 //错误状态  Media.error; //null:正常  Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  //网络状态  Media.currentSrc; //返回当前资源的URL  Media.src = value; //返回或设置当前资源的URL  Media.canPlayType(type); //是否能播放某种格式的资源  Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  Media.load(); //重新加载src指定的资源  Media.buffered; //返回已缓冲区域,TimeRanges  Media.preload; //none:不预载 metadata:预载资源信息 auto:  //准备状态  Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  Media.seeking; //是否正在seeking  //回放状态  Media.currentTime = value; //当前播放的位置,赋值可改变位置  Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0  Media.duration; //当前资源长度 流返回无限  Media.paused; //是否暂停  Media.defaultPlaybackRate = value;//默认的回放速度,可以设置  Media.playbackRate = value;//当前播放速度,设置后马上改变  Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文  Media.seekable; //返回可以seek的区域 TimeRanges  Media.ended; //是否结束  Media.autoPlay;  //是否自动播放  Media.loop;  //是否循环播放  Media.play();    //播放  Media.pause();   //暂停  //控制  Media.controls;//是否有默认控制条  Media.volume = value; //音量  Media.muted = value; //静音  //TimeRanges(区域)对象  TimeRanges.length; //区域段数  TimeRanges.start(index) //第index段区域的开始位置  TimeRanges.end(index) //第index段区域的结束位置  

事件代码:

     eventTester = function(e){  Media.addEventListener(e,function(){  console.log((new Date()).getTime(),e);  });  
}  eventTester(“loadstart”);   //客户端开始请求数据  
eventTester(“progress”);    //客户端正在请求数据  
eventTester(“suspend”);     //延迟下载  
eventTester(“abort”);       //客户端主动终止下载(不是因为错误引起),  
eventTester(“error”);       //请求数据时遇到错误  
eventTester(“stalled”);     //网速失速  
eventTester(“play”);        //play()和autoplay开始播放时触发  
eventTester(“pause”);       //pause()触发  
eventTester(“loadedmetadata”);  //成功获取资源长度  
eventTester(“loadeddata”);  //  
eventTester(“waiting”);     //等待数据,并非错误  
eventTester(“playing”);     //开始回放  
eventTester(“canplay”);     //可以播放,但中途可能因为加载而暂停  
eventTester(“canplaythrough”); //可以播放,歌曲全部加载完毕  
eventTester(“seeking”);     //寻找中  
eventTester(“seeked”);      //寻找完毕  
eventTester(“timeupdate”);  //播放时间改变  
eventTester(“ended”);       //播放结束  
eventTester(“ratechange”);  //播放速率改变  
eventTester(“durationchange”);  //资源长度改变  
eventTester(“volumechange”);    //音量改变  

各浏览器目前对html5视频格式的支持:

浏览器 影音格式 🌈🌈 🌈🌈 Ogg Theora 🌈🌈 MP4(H.264) 🌈🌈 WebM
Microsoft Internet Explorer9 🌈 ×🌈🌈🌈🌈 🌈🌈 √🌈🌈 🌈🌈🌈 ×
Mozilla Firefox5+ 🌈🌈 🌈🌈 √ 🌈🌈 🌈🌈 🌈🌈 × 🌈🌈 🌈🌈 🌈√
Google Chrome13+ 🌈🌈 🌈√🌈🌈 🌈🌈 🌈🌈 √🌈🌈 🌈🌈 🌈🌈 √
Apple Safari5+ 🌈🌈 🌈🌈 × 🌈🌈 🌈🌈 🌈🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×
Opera11+ 🌈🌈 🌈🌈 🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×🌈🌈 🌈🌈 🌈🌈 √

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

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

相关文章

如何将腾讯混元大模型AI接入自己的项目里(中国版本ChatGPT)

如何将腾讯混元大模型AI接入自己的项目里 一、腾讯混元大模型API二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 四、重要说明 一、腾讯混元大模型API 基于腾讯混元大模型AI的智能文本对话AI机器人…

【1day】泛微e-office OA系统UserSelect接口SQL 注入漏洞学习

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

TypeScript 的修饰符(modifier)和装饰器(decorator)

装饰器是一种特殊类型的声明&#xff0c;它能够被附加到类声明....上。 装饰器使用 expression这种形式

使用消息队列遇到的问题—kafka

目录 1 分区2 消费者3 Kafka 如何保证消息的消费顺序&#xff1f;3.1 方案一3.2 方案二 4 消息积压 在项目中使用kafka作为消息队列&#xff0c;核心工作是创建生产者—包装数据&#xff1b;创建消费者----包装数据。 欠缺一些思考&#xff0c;特此梳理项目中使用kafka遇到的一…

浅析以太网接口及串口转以太网技术

浅析以太网接口 以太网相关接口主要包括&#xff1a;MII/RMII/SMII以及GMII/RGMII/SGMII接口。 一、MII接口 MII&#xff08;Media Independent Interface&#xff09;介质无关接口或称为媒体独立接口&#xff0c;它是IEEE-802.3定义的以太网行业标准。它包括一个数据接口和…

卷积详解和并行卷积

ps&#xff1a;在 TensorFlow Keras 中&#xff0c;构建 Sequential 模型的正确方式是将层作为列表传递&#xff0c;而不是作为一系列单独的参数。 modelmodels.Sequential([layers&#xff0c;layers]) 而不是modelmodels.Sequential(layers&#xff0c;layers) 文章目录 卷积…

Redis 基础—Redis Desktop Manager(Redis可视化工具)安装及使用教程

Redis Desktop Manager 是一个可视化的 Redis 数据库管理工具&#xff0c;可以方便地查看和操作 Redis 数据库。使用 Redis Desktop Manager 可以大大提高 Redis 数据库的管理效率。 RDM的安装和配置 首先&#xff0c;您需要下载和安装Redis Desktop Manager。 安装完成后&am…

Python 小红书评论区采集 小红薯xhs精准用户获客

成品图 评论接口https://edith.xiaohongshu.com/api/sns/web/v2/comment/page?note_id笔记id&cursor光标 初次使用cursor为空,该接口为GET&#xff0c;需要x-s,x-t签名验证 子评论接口https://edith.xiaohongshu.com/api/sns/web/v2/comment/sub/page?note_id%s&r…

python爬取robomaster论坛文章数据,携带登录信息

一. 内容简介 python爬取robomaster论坛文章数据。 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3代码 三.主要流程 3.1 接口分析&#xff0c;以及网页结构分析 # 这是文章链接,其实id就是文章的id # https://bbs.robomaster.com/forum.php?modview…

win系统一台电脑安装两个不同版本的mysql教程

文章目录 1.mysql下载zip包&#xff08;地址&#xff09;2.解压在你的电脑上&#xff08;不要再C盘和带中文的路径&#xff09;3.创建my.ini文件4.更改环境变量&#xff08;方便使用, 可选&#xff09;5.打包mysql服务6.初始化mysql的data7.启动刚刚打包的服务8.更改密码 1.mys…

CentOS常用基础命令大全(linux命令)2

CentOS常用基础命令大全&#xff08;linux命令&#xff09; 1.关机 (系统的关机、重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours:minutes & 按预定时间关闭系统 shutdown -c 取消按预定时间关闭系统 sh…

【无标将列表中的多组参数依次带入指定的函数将每次调用函数返回结果组成列表itertools.starmap()题】

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将列表中的多组参数 依次带入指定的函数 将每次调用函数 返回结果组成列表 itertools.starmap() [太阳]选择题 请问以下代码输出的结果是&#xff1f; import itertools a [(1, 2), (3, 4)] p…

基于JAVA+SpringBoot+Vue的前后端分离的医院信息智能化HIS系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着科技的不断发展&a…

解决Ubuntu16.04没声音

第一步&#xff1a;安装 PulseAudio Volum Control Ubuntu没有声音&#xff08;听不到声音&#xff09;的解决方法 第二步&#xff1a;No cards available for configuration 【解决Ubuntu18.04没声音&#xff1a;No cards available for configuration】 完美解决&#xf…

【WPF.NET开发】WPF中的对话框

目录 1、消息框 2、通用对话框 3、自定义对话框 实现对话框 4、打开对话框的 UI 元素 4.1 菜单项 4.2 按钮 5、返回结果 5.1 模式对话框 5.2 处理响应 5.3 非模式对话框 Windows Presentation Foundation (WPF) 为你提供了自行设计对话框的方法。 对话框是窗口&…

浙政钉SDK安装

专有订单SDK&#xff08;jar包&#xff09;下载 专有钉钉门户 (dg-work.cn) Maven依赖 浙政钉 <!-- 浙政钉 --> <dependency><groupId>com.oracel</groupId><artifactId>zwdd-sdk-java</artifactId><version>1.2.0</version…

概率密度函数(PDF)正态分布

概率密度函数&#xff08;PDF&#xff09;是一个描述连续随机变量取特定值的相对可能性的函数。对于正态分布的情况&#xff0c;其PDF有一个特定的形式&#xff0c;这个形式中包括了一个常数乘以一个指数函数&#xff0c;它假设误差项服从均值为0的正态分布&#xff1a; p ( …

外汇天眼:新西兰监管机构永久性停止对David McEwen及与其相关的实体的命令

新西兰金融市场管理局&#xff08;FMA&#xff09;已对David Elgar McEwen及与其相关的实体&#xff08;McEwen and Associates&#xff09;发布了永久性停止令。 与McEwen先生相关的实体包括Stockfox Limited、Cosmopolitan Holdings Limited、Strategy Services Limited、Fun…

Ubuntu系统使用快速入门实践(七)——软件安装与使用(3)

Ubuntu系统使用快速入门实践系列文章 下面是Ubuntu系统使用系列文章的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 Ubuntu系统使用快速入门实践系列文章总链接 下面是专栏地址&#xff1a; Ubuntu系统使用快速入门实践系列文章专栏 文章目录 Ubuntu系统使用快速…

在uniapp中,可以使用那些预定义的样式类

u-flex&#xff1a;设置元素为弹性布局。u-flex-v&#xff1a;设置元素为纵向弹性布局。u-flex-h&#xff1a;设置元素为横向弹性布局。u-p-10&#xff1a;设置元素的上下左右边距为10rpx。u-p-t-10&#xff1a;设置元素的上边距为10rpx。u-p-b-10&#xff1a;设置元素的下边距…