H5新特性（一）——音视频标签
H5新特性——音视频标签
大家都有在网页中浏览音频和视频的经历，在HTML5之前，对视频和音频没有一个标准，因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是 RealPlayer 或者 Flash。但并不是所有的浏览器都拥有相同的插件，为了能让视频和音频在网页内播放成功，HTML5规定了一种通过video，audio来包含视频播放的标准。
1.音频
HTML5提供了audio标签, 实现网页中音频的播放:
简写方式:
<audio src="音频路径" controls></audio>
标准方式:
<audio controls><source src="xxx.mp3" type="audio/mpeg"/><source src="xxx.ogg" type="audio/ogg"/><source src="xxx.wav" type="audio/wav"/>
</audio>
常用属性:
<audio src="音频路径" controls 是否显示音乐播放面板autoplay 是否自动播放loop 是否单曲循环muted 是否默认静音preload="auto | metadata | none" 音频的预加载模式>
</audio>
preload=none 不进行音频预加载
preload=metadata 仅加载音频的基本信息
preload=auto 尽可能加载音频信息
2.视频标签
video标签用于在网页中播放视频(支持:mp4/ogg/webm):
<video src="视频路径" controls></video>
常用属性:
<video src="视频路径" controls 是否显示音乐播放面板autoplay 是否自动播放loop 是否单曲循环muted 是否默认静音preload="auto | metadata | none" 音频的预加载模式width=""height=""poster="./assets/logo.jpg" 视频海报帧>
</video>
3.音视频的DOM操作
<audio id="au" src="" ....></audio>
let au = document.getElementById('au')
au.play()
Audio以及Video对象的常用方法
| 方法 | 描述 |
|---|---|
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
Audio以及Video对象的常用属性
| 属性 | 描述 |
|---|---|
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
| controls | 设置或返回音频/视频是否显示控件（比如播放/暂停等） |
| currentSrc | 返回当前音频/视频的 URL |
| currentTime | 设置或返回音频/视频中的当前播放位置（以秒计） |
| duration | 返回当前音频/视频的长度（以秒计） |
| ended | 返回音频/视频的播放是否已结束 |
| error | 返回表示音频/视频错误状态的 MediaError 对象 |
| loop | 设置或返回音频/视频是否应在结束时重新播放 |
| muted | 设置或返回音频/视频是否静音 |
| networkState | 返回音频/视频的当前网络状态 |
| paused | 设置或返回音频/视频是否暂停 |
| playbackRate | 设置或返回音频/视频播放的速度 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
| volume | 设置或返回音频/视频的音量 |
Audio以及Video对象的常用事件
// 更新播放进度信息
player.addEventListener("waiting", function () {})
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时 |
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| timeupdate | 当目前的播放位置已更改时 |
| volumechange | 当音量已更改时 |
| waiting | 当视频由于需要缓冲下一帧而停止 |
| HTML 音频/视频参考手册 |
H5新特性（一）——音视频标签相关推荐
- html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
- 前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
- 前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录 一.ES6/7/8新特性 二.性能优化 三.数据交互 四.H5新特性 一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
- 【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
- HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
- h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
- Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
目录 一.画布标签 二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签 结语 一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- 【HTML】音视频标签（audio、video、embed）
音视频标签(audio.video.embed) 音频 audio标签 属性 controls autoplay loop 使用方式 提示用户升级浏览器 浏览器不支持MP3格式 兼容低版本浏览器(em ...
最新文章
- 在Windows上搭建Git Server
- Linux Systemcall Int0x80方式、Sysenter/Sysexit Difference Comparation
- mysql2已经存在数据数据导入,在MYSQL中导入已存在的数据库
- 退出命令_Vim命令报错问题：无法用:wq命令保存并退出只读文件
- Win32 串口编程（三）
- Tensorflow Serving 介绍
- 关于《详解》第12.1节按键驱动的进一步阐述
- java创建图片文件怎么打开_java 程序怎么打开一张图片?
- 拓端tecdat：R语言RStan MCMC：NUTS采样算法用LASSO 构建贝叶斯线性回归模型分析职业声望数据
- mdk 加static会被优化吗_网站关键词排名优化你会吗？深圳龙岗网络外包公司讲解...
- python编程知识大全_python编程入门之二：必备基础知识
- 网易云 音乐 url 引入步骤
- 图论 —— 染色法判断二分图
- 诺兰回归，方舟渡劫——短信登录京东青龙
- 【数据分析】黑色星期五（代码2）销售额分析1、2
- Window提高效率的软件
- css中按钮变色,CSS控制按钮变色（有图有真相）
- 文件上传中关于MultipartResolver的配置
- 聘用人员职务犯罪要如何处理
- 计算机网络符号意思,浅析网络语言中的符号网语_计算机网络论文.doc