您的位置：首页 > Web前端 > HTML5

【HTML5】——音视频处理

2017-10-09 14:44 113 查看

1.视频处理

1.1 video元素

1.2 video元素的属性

1.3 video的高级用法（方法）

1.4 video的高级用法（事件）

1.5 video的高级用法（属性）

2.音频处理

2.1.audio的高级用法

3.video.js类库

1.视频处理

h5支持的视频格式：

mp4：目前比价主流的视频格式

ogg：视频扩展名是.ogv，手机端的视频格式

WebM：目前唯一一个支持超高清的视频格式，该视频格式出自Google

video元素

引入视频元素

属性：

1. src：视频地址

2. autoplay：自动播放

3. width：设置视频宽度

4.height：设置视频高度

注意：

1. 视频的宽高比不会改变

2.在video元素内定义不支持的提示内容

source元素可以引入多个格式的视频文件

作用：实现各个浏览器的兼容性

注意：视频的宽高比不会改变；在video元素内定义不支持的提示内容

video元素的属性

autoplay属性：自动播放

controls属性：提供控制面板

loop属性：循环播放

poster属性：播放之前显示一张图片

preload属性：预加载(视频)

none - 不加载

auto - (默认值)自动(尽快加载完毕)

metadata - 只加载除视频之外的信息(宽和高)

<video src="video/oceans-clip.mp4" poster="video/oceans-clip.png" controls>
视频无法播放！
</video>

video的高级用法（方法）

play()：播放视频

pause()：暂停播放

load()：加载媒体文件

canPlayType(type)：查看浏览器是否支持该格式

video的高级用法（事件）

progress：下载进度

canp
4000
laythrough：整体播放顺利时触发

canplay：可播放时触发（不考虑整体）

ended：结束视频时触发

pause：暂停视频时触发

play：播放视频时触发

error：播放错误时触发

实例：页面中插入广告：

<!doctype html>
<html lang="lang">
<head>
<meta charset="UTF-8">
<title>video元素</title>
<style>
#ad {
position: relative;
top: -225px;
left: 170px;
display: none;
}
</style>
</head>
<body>
<video src="video/oceans-clip.mp4" id="media" controls>
视频无法播放！
</video>
<div id="ad"><img src="video/3602.png" style="width: 280px"></div>
<script type="text/javascript">
var media = document.getElementById("media");
media.addEventListener("play", myPlay);
media.addEventListener("pause", myPause);

var oDiv = document.getElementById("ad");

function myPlay() {
console.log("视频已播放");
oDiv.style.display = "none";
}
function myPause() {
console.log("视频已暂停");
oDiv.style.display = "block";
}
// 全屏播放时，图片无法显示
// 全屏播放时，会自动设置为页面中最顶端的元素
</script>
</body>
</html>

video的高级用法（属性）

paused：判断视频当前是否暂停，暂停返回true

ended：判断视频当前是否结束播放，结束返回true

duration：当前视频的总时长

currentTime：表示当前视频播放的位置，还可以设置

自制播放暂停按钮：

<!doctype html>
<html lang="lang">
<head>
<meta charset="UTF-8">
<title>video元素</title>
</head>
<body>
<video src="video/oceans-clip.mp4" id="media">
视频无法播放！
</video>
<br/>
<input type="button" value="播放" id="btn"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener("click", myclick);
var media = document.getElementById("media");
function myclick() {
if (media.paused) {
//播放视频 play()
media.play();
btn.value = "暂停";
} else {
media.pause();
btn.value = "播放";
}
}
</script>
</body>
</html>

2.音频处理

目前HTML页面实现音频处理：

1.将Window Media Player播放器，内置在页面中

2.使用flash技术实现

3.HTML5实现

支持的音频格式：

1. mp3

2. ogg

3. wav

如何使用音频：

1. audio元素：引入一种音频格式

2. audio元素+source元素：引入多种音频格式

音频的属性：

1. autoplay：自动播放

2. controls：提供控制面板

3. loop：循环播放

4. preload：缓存设置，预加载

audio的高级用法

事件：

1. play：播放音频时触发

2. pause：暂停音频时触发

方法：

1. play()：播放音频

2. pause()：暂停音频

属性：

pause：true表示暂停

注意：无论音频还是视频，IE8及以下都不支持。

视频或者音频不同浏览器支持格式可能不相同。

3.video.js类库

http://www.videojs.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航