Unit02： HTML5 视频处理、音频处理

时间 2019-11-21

标签 unit02 unit html5 html 视频处理音频栏目 HTML5 繁體版

原文原文链接

1.视频处理：html

1.<video src="一种格式" autoplay></video>标签不影响HTML页面，耗显卡和cpu前端

若是当前浏览器不支持video元素，能够在video元素内编写提示信息；<video>浏览器不支持</video> *****web

<video>支持的视频格式编程

MP4格式 - 目前比较主流浏览器

OGG格式 - 多用于移动端缓存

WebM格式 - 目前惟一支持超高清格式ide

* 在HTML页面中支持超高清格式(HTML5)oop

* 由Google公司推出的post

属性：spa

- src 引入路径

支持的视频格式：

.mp4(主流)

.ogv(OGG格式的一种，用于移动端)

.webm(在HTML5页面中，目前惟一支持超高清格式 1080p，由Google退出)

- autoplay 自动播放;只定义属性名，没有属性值

- controls 视频播放的控制面板;只定义属性名，没有属性值

- loop 视频循环播放;只定义属性名，没有属性值

- poster="img" 播放以前先引入一张图片

- width,height

- preload 预加载

auto 自动加载，尽快加载完毕，默认

none 不加载（不能被缓存，版权保护）

metadata只加载视频基本信息（视频名称，宽高等，不包含视频）

2.在video元素中能够包含多个<source>元素,能够放不一样格式的相同视频，兼容各个浏览器；

浏览器不支持

</video>

高级内容：

方法：

- play() 视频播放

- pause() 视频暂停

- load() 视频加载

- canPlayType() 判断浏览器是否支持指定视频格式；

事件：

- play 视频播放时触发

- pause 视频暂停时触发

- ended 视频结束时触发第一集播完指向第二集改变src

- error 视频播放“错误”时触发

- canplay 不考虑总体状况下，只要能播放就播放

- canplaythrough考虑总体

- progress 视频加载的进度

属性：表示判断的返回布尔值 true/false

- paused 判断当前是否暂停

- ended 判断当前是否播放完毕

- duration 表示当前视频的时长

- currentTime 表示当前视频播放的位置

例子:自定义控制面板

问题：video元素与其余元素是相对定位时，当video视频全屏时，默认在浏览器最前端，广告被覆盖；因此不能全屏；

解决：利用video元素提供的高级编程本身实现；

使用目前封装好的video的js库；

【video-js库】

<!DOCTYPE html>
<html>
 <head>
  <title>video</title>
  <meta charset="utf-8" />
 </head>

 <body>

<video controls style="width:640px;height:400px;background:#000;" poster="DATA/oceans-clip.png">
    你的浏览器不支持视频
    <source src="DATA/oceans-clip.mp4" />
    <source src="DATA/oceans-clip.ogv" />
    <source src="DATA/oceans-clip.webm" />
</video>

 <video src="DATA/oceans-clip.mp4" autoplay loop poster="DATA/oceans-clip.png" style="width:1000px;">你的浏览器不支持视频</video>
 </body>
</html>

2.音频处理：

<audio>元素

audio支持的音频格式：

MP3格式 - 目前比较主流

OGG格式

WAV格式

1.<audio src controls></audio> 设置controls才能看见；

<audio>

浏览器不支持

</audio>

用法同video

Unit02： HTML5 视频处理 、 音频处理

Unit02： HTML5 视频处理、音频处理