HTML5_音视频标签 <audio> 和 <video>

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

HTML5_音视频标签 <audio> 和 <video>

audio 和 video 都是 inline行内元素

如果浏览器支持，则不显示标签文本

IE8 不支持 audio video 标签

http://s8.qhimg.com/share/audio/piano1/a4.mp3

http://pic.ibaotu.com/00/60/75/01J888piCPNw.mp4

http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4

浏览器对于资源的格式，支持不一
做以下兼容，浏览器会选择最优格式运行
<audio controls>
<source src="./audio/IDon'tWannaLiveForever.mp3" type="audio/mpeg"/>
<source src="./audio/IDon'tWannaLiveForever.ogg" type="audio/ogg" codecs="vorbis"/>
<source src="./audio/IDon'tWannaLiveForever.acc" type="audio/acc" codecs="aac"/>
您的浏览器不支持音视频，建议下载<a href="./audio/IDon'tWannaLiveForever.mp3">手动下载</a>
</audio> <video id="my_video" controls>
<source src="./video/CapitalCities-KangarooCourt.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="./video/CapitalCities-KangarooCourt.ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="./video/CapitalCities-KangarooCourt.webm" type='video/webm; codecs="vp8, vorbis"'/>
您的浏览器不支持音视频，建议下载<a href="./video/CapitalCities-KangarooCourt.mp4">手动下载</a>
</video>
video 的属性
width: 320;

单位 px 可写可不写

height: 480px;

音视频即使设置的是正方形，也会按照宽高比例进行显示

poster: "./img/1.jpg";

海报帧，在播放前或者跳帧前显示

autoplay

有些高版本浏览器为了节约内存，已经禁止

loop: "loop";

开启循环播放

muted: "muted";
preload: ;

none; 提示该资源不需要缓存

metadata; 提示用户不需要查看该视频
auto; 不管用户是否需要，都会加载整个视频
""; 等同于 auto;

常用 js 事件

onloadedmetadata 当音频元数据加载完毕时触发。
ontimeupdate 播放过程中实时触发。
onvolumechange 音量改变时触发

视频:

onabort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。

oncanplay 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应 CAN_PLAY的readyState。

oncanplaythrough 在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置 currentTime 会使得 firefox 触发一次 canplaythrough 事件，其他浏览器或许不会如此。

ondurationchange 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。

onemptied 媒体被清空（初始化）时触发。

onended 播放结束时触发。

onerror 在发生错误时触发。元素的error属性会包含更多信息。参阅 Error handling 获得详细信息。

onloadeddata 媒体的第一帧已经加载完毕。

onloadedmetadata 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。

onloadstart 在媒体开始加载时触发。

onmozaudioavailable 当音频数据缓存并交给音频层处理时

onpause 播放暂停时触发。

onplay 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。

onplaying 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。

onprogress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。

onratechange 在回放速率变化时触发。

onseeked 在跳跃操作完成时触发。

onseeking 在跳跃操作开始时触发。

onstalled 在尝试获取媒体数据，但数据不可用时触发。

onsuspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。

ontimeupdate 元素的currentTime属性表示的时间已经改变。

onvolumechange 在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）.。

onwaiting 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

音频:

onabort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。

oncanplay 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应 CAN_PLAY 的 readyState。

oncanplaythrough 在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置 currentTime 会使得firefox触发一次 canplaythrough 事件，其他浏览器或许不会如此。

ondurationchange 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。

onemptied 媒体被清空（初始化）时触发。

onended 播放结束时触发。

onerror 在发生错误时触发。元素的 error 属性会包含更多信息。参阅 Error handling 获得详细信息。

onloadeddata 媒体的第一帧已经加载完毕。

onloadedmetadata 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。

onloadstart 在媒体开始加载时触发。

onmozaudioavailable 当音频数据缓存并交给音频层处理时

onpause 播放暂停时触发。

onplay 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。

onplaying 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。

onprogress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的 buffered 属性中获取到。

ratechange 在回放速率变化时触发。

onseeked 在跳跃操作完成时触发。

onseeking 在跳跃操作开始时触发。

onstalled 在尝试获取媒体数据，但数据不可用时触发。

onsuspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。

ontimeupdate 元素的 currentTime 属性表示的时间已经改变。

onvolumechange 在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）.。

onwaiting 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

常用 js 控制函数

myVideo.play() 媒体播放

myVideo.pause() 媒体暂停

myVideo.load() 重新加载媒体

常用的 js 属性

myVideo.duration;

myVideo.currentTime; 可读可写

myVideo.volume; /* 0-1 的值，静音的时候为 0，音量满格时为 1 */

myVideo.muted; /* 返回当前音量状态，true 表示静音 */

myVideo.paused; /* true 表示视频暂停了 */

myVideo.ended; /* true 表示视频播放到最后了 */

myVideo.error 媒体发生错误的时候，返回错误代码 (只读)

myVideo.currentSrc 以字符串的形式返回媒体地址(只读)

视频多的部分:

myVideo.poster : 视频播放前的预览图片(读写)

myVideo.width、myVideo.height : 设置视频的尺寸(读写)

myVideo.videoWidth、 videoHeight : 视频的实际尺寸(只读)

主流视频格式文件格式 (容器格式)

MPEG-4 通常以 .mp4 为扩展名
Flash视频通常以 .flv 为扩展名
Ogg 通常以 .ogv 为扩展名
WebM 通常以 .webm 为扩展名

频视频交错通常以 .avi 为扩展名

主流音频格式文件格式 (容器格式)

MPEG-3 .mp3
Acc 音频 .acc
Ogg 音频 .ogg

.avi 和 .mp4

仅仅是容器的格式
只是决定怎么将视频存储起来，
而不关心存储的内容
包含了音频轨道，视频轨道和其他一些元数据

元数据

包含了视频的封面，标题，子标题，字幕等相关信息

编解码器
一组算法，用来对一段特定的音频/视频进行编码和解码
原始媒体文件体积巨大，
如果不进行编码，那么数据量非常惊人
如果不进行解码，就无法将编码后的数据重组为原始的媒体数据

视频编解码器

H.264
VP8
Ogg Theora

音频编解码器

AAC
MPEG-3
Ogg Vorbis

浏览器对于容器和编解码器支持的情况

Browser MP4(H.264 + AAC) WebM(VP8 + Vorbis ) Ogg(Theora + Vorbis)
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES

http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/
目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！！

H.264：别名 MPEG-4 的第十部分,由 MPEG 研发并于 2003 年标准化

它的目的支持一切设备，无论是低带宽低 cpu ，还是高带宽高 cpu 或者是两者之间。
要做到这一点，H.264 标准被分成不同的几种配置。高配置使用了更多特性，
这会导致在解码过程中更加消耗 CPU ，但视频文件本身会更小，视频效果也更好

苹果 iphone 手机基本配置 (BaseLine)
正常的电视机支持基本配置 (BaseLine) 和主配置 (Main) 两种
正常的电脑支持基本配置 (BaseLine) 和主配置 (Main) 高级配置 (high) 三种

处理视频的一个流程: (tools_resource)

把压缩文件 ffmpeg.zip 放到 software 文件夹中，解压到当前文件夹，进入 bin，逐次双击运行
将 bin 加入系统环境变量
在命令行中进入 .mp4 文件所在的文件夹

格式转化

用 FFmpeg 制作MP4 视频
ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4

用 FFmpeg 制作 WebM 视频
ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm

FFmpeg 制作 Ogg 视频
ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv

FFmpeg 制作Mp3音频
ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3

FFmpeg 制作Ogg音频
ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
ffmpeg -i IDon'tWannaLiveForever.mp3 -c:a libvorbis -ac 2 -b:a 160k IDon'tWannaLiveForever.ogg

FFmpeg 制作ACC音频
ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

1. 制作一个 Ogg 容器中使用 Theora 视频和 Vorbis 音频的版本

2. 制作另外一个版本，使用 WebM 视频容器（VP8 + Vorbis）
3. 再制作一个版本，使用 MP4 视频容器，并使用 H.264 基本配置的视频和 ACC 低配的音频
4. 链接上面 3 个文件到同一个 video 元素，并向后兼容基于 Flash 的视频播放器

自定义播放器
行内元素底部缝隙
调整基线 vertical-align: ;

元素的 width、height，随着屏幕窗口大小改变
window.onresize = function(){};

元素设置宽高

1. 设置 width、height

2. 定位

#process_box {
position: absolute;
top: 0px;
bottom: 0px;
left: 55px;
right: 230px;
}

3. 浮动，让子元素撑开

功能函数 ----addClass()，removeClass()
addClass()
function addClass(ele, className){
var reg = new RegExp("\\b"+className+"\\b");
if(!reg.test(ele.className)){
/* 如果元素 ele 不包含 className */
ele.className += " "+className;
};
};
removeClass()
function removeClass(ele, className){
if(ele.className){
var reg = new RegExp("\\b"+className+"\\b");
var classes = ele.className;
ele.className = classes.replace(reg, "");
if(/^\s*$/g.test(ele.className)){
ele.removeAttribute("class");
};
}else{
ele.removeAttribute("class");
}
};
toggleClass()
function toggleClass(ele, className){
if(ele.className){
var reg = new RegExp("\\b"+className+"\\b");
if(!reg.test(ele.className)){
/* 如果元素 ele 不包含 className */
ele.className += " "+className;
}else{
var classes = ele.className;
ele.className = classes.replace(reg, ""); if(/^\s*$/g.test(ele.className)){
/* 如果元素的 class 为空, 则清除 class 属性 */
ele.removeAttribute("class");
};
};
}else{
/* 如果元素的 className 属性不存在, 则清除 class 属性 */
ele.removeAttribute("class");
};
};

将视频的 currentTime 设置为 0

封装功能函数
模仿 jQuery 源码
(function(w){
w.$ = {};

// callBack 将内部组件的 move 状态暴露在了外部的业务逻辑
w.$.drag = function(ele, callBack){
ele.onmousedown = function(e){
e = e || window.event;
};
};
})(window);

对象.属性()
var callBack = {
move:function(){
console.log("Runing!");
}
};callBack.move();
callBack["move"](); // 调用，推荐使用callBack.stop = "Stop Now!"; // 动态添加属性，推荐使用
callBack["stop"] = "Stop Now!";

功能函数 ----将秒转为时:分:秒
funtion str2HMS(seconds){
seconds = parseInt(seconds); var s = toZero( Math.floor(seconds%60) );
var m = toZero( Math.floor(seconds%3600/60) );
var h = toZero( Math.floor(seconds/3600) ); return h+":"+m+":"+s;
};function toZero(num){
if(num<10){
num = "0"+num;
}else{
num = ""+num;
};
};

HTML5_音视频标签 <audio> 和 <video>的更多相关文章

HTML5笔记2——HTML5音/视频标签详解
音视频的发展史早期:<embed>+<object>+文件问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
HTML5音/视频标签详解
一.发展历: 早期:<embed>+<object>+文件问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Qu ...
html5 音频和视频（audio And video）
1.音频和视频 Web 上的视频直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...
HTML插入音频和视频：audio和video标签及其属性
一.上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码 <iframe height=498 width=510 src='http://player.youku.com/embed/ ...
html音视频标签
音视频标签是html5标签,分别为<audio></audio>和<video></video>,这两个标签用法大致相同,且都仅在IE9及以上版本和其他 ...
HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
HTML5&lowbar;布局and音视频
HTML5_布局and音视频 I.HTML5标签的改变1.文档声明HTML语法是不区分大小写的HTML5的DTD声明为:<!doctype html>确保浏览器能在HTML5的标准模式下进 ...
HTML5 audio与video标签实现视频播放，音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
HTML video 视频标签全属性详解
HTML 5 video 视频标签全属性详解现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

随机推荐

[No00003B]string格式的日期时间字符串转为DateTime类型
新建console程序,复制粘贴直接运行: /**/ //using System.Globalization;//代码测试大致时间2015/11/3 15:09:05 //方法一:Convert.T ...
第一个Sprint冲刺第十天
讨论成员:邵家文.李新.朱浩龙.陈俊金工作:第一个计时功能完成,还有一些复杂的公式已完成. 关于github其实我们团队,还没有搞清楚github的真正用途,我们尚要花时间去学习如 ...
js 判断字符是否以汉字开头
javascript代码如下: var re = new RegExp("^[\u4e00-\u9fa5]"); if (re.test("aaa好")) { ...
svn&colon; E230001&colon; Server SSL certificate verification failed
TortoiseSvn是好的命令行svn 的时候有问题 ,也加了--no-auth-cache --non-interactive参数 svn list 地址选下p 就好. http://sta ...
css3属性整理
浏览器内核:主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(Opera浏览器).Trident(讨厌 ...
H5页面请求跨域问题
1. <meta http-equiv="Access-Control-Allow-Origin" content="*"> 说明一下什么情况下我 ...
linux虚拟机安装演示
做为一名linux初学者来说,在本机上安装linux虚拟机做为平时练习工具极为重要,此方式在充分体验linux操作乐趣的同时,又能保证不破坏已经配置好的服务器.所以虚拟机是一种很好的学习工具了.下面总 ...
Shell一个文件并等待完成
Option Explicit Private Declare Function OpenProcess Lib "kernel32" _ (ByVal dwDesiredAcce ...
如何删除github上的某个文件夹
在github上只能删除仓库,却无法删除文件夹或文件, 所以只能通过命令来解决首先进入你的master文件夹下, Git Bash Here ,打开命令窗口 $ git –help 帮助命令 $ g ...
图片完全填充CardView区域
在Android开发中,使用CardView来显示我们需要展示的图片,但是有时候显示出来的图片并没有填充整个CardView区域,为了让需要展示的图片填充整个CardView区域,只需要在ImageV ...