HTML5_音视频标签 和

时间  2019-11-08
标签 html5 html 音视频 标签 栏目 HTML5 繁體版
原文   原文链接

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

audio 和 video 都是 inline行内元素html5

 

若是浏览器支持，则不显示标签文本web

IE8 不支持 audio video 标签算法

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

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 可写可不写iphone

  • height: 480px;

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

  • 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;
    };
};
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程