音频和视频

容器

  1. 大多数人会认为视频文件就是 .avi、 .mp4 ，但事实上 avi 和 mp4 仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容，有点类似于 .zip ；

  2. 视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据；

    • 视频播放的时候，音频轨道和视频轨道是绑定在一起的；
    • 元数据包含了视频的封面、标题、子标题、字幕等相关信息；

  3. 音视频文件格式

    • 主流的视频文件格式(容器格式)：
      格式 描述
      MPEG-4 通常以 .mp4 为扩展名
      Flash 视频 通常以 .flv 为扩展名
      Ogg 通常以 .ogv 为扩展名
      WebM 通常以 .webm 为扩展名
    • 主流的音频文件格式
      格式 描述
      MPEG-3 .mp3
      Acc 音频 .acc
      Ogg 音频 .ogg
    • 音频视频交错: 通常以 .avi 为扩展名

编解码器

  1. 音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据

  2. 音视频编解码器：

    视频编解码器 音频编解码器
    H.264 AAC
    VP8 MPEG-3
    Ogg Theora Ogg Vorbis

  3. 编码器也分有损和无损，无损视频文件一般太大，在网页中没有优势，所以重点研究有损编解码器；

  4. 有损编解码器中，信息在编码过程中丢失是无法避免的，反复的对视频编码会导致其画面不均匀；

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

    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

处理视频的一个流程

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

  2. 制作另外一个版本，使用 WebM 视频容器（VP8 + Vorbis）；

  3. 再制作一个版本，使用 MP4 视频容器，并使用 H.264 基本配置的视频和 ACC 低配的音频；

  4. 链接上面 3 个文件到同一个 video 元素，并向后兼容基于 Flash 的视频播放器；

音视频标签

video

  1. Html5 提供的播放视频的标签：

    • src：资源地址；
    • controls：该属性定义是显示还是隐藏用户控制界面；

  2. 示例代码

    <body>
  <video src="resource/video/test.mp4" controls="controls" width="500" height="500"></video>
</body>

  3. 效果展示

audio

  1. Html5 提供的播放音频的标签：

    • src：资源地址；
    • controls：该属性定义是显示还是隐藏用户控制界面；

  2. 示例代码

    <body>
  <audio src="resource/audio/test.mp3" controls></audio>
</body>

  3. 效果展示

source

  1. 视频：

    • type='video/webm; codecs="vp8, vorbis"'
    • type='video/ogg; codecs="theora, vorbis"'
    • type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

  2. 音频：

    • type='audio/ogg; codecs="vorbis"'
    • type='audio/aac; codecs="aac"'
    • type='audio/mpeg'

  3. 示例代码：音视频兼容性写法

    <body>
    <video controls width="300" height="300">
        <source src="resource/video/OUTPUT.mp4" type="video/mp4"></source>
        <source src="resource/video/OUTPUT.ogv" type="video/ogg"></source>
        <source src="resource/video/OUTPUT.webm" type="video/webm"></source>
        当前浏览器不支持 video直接播放，点击这里下载视频：
        <a href="resource/video/OUTPUT.mp4">下载视频</a>
    </video>
    <audio controls>
        <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'></source>
        <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'></source>
        <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'></source>
        当前浏览器不支持 video直接播放，点击这里下载视频：
        <a href="resource/audio/OUTPUT.mp3">下载视频</a>
    </audio>
    <audio src="resource/audio/OUTPUT.ogg" controls></audio>
</body>

音视频标签属性

video 标签的属性

  1. width：视频显示区域的宽度，单位是 CSS 像素；

  2. height：视频展示区域的高度，单位是 CSS 像素；

  3. poster：一个海报帧的 URL ，用于在用户播放或者跳帧之前展示；

  4. src：要嵌到页面的视频的 URL ；

  5. controls：显示或隐藏用户控制界面；

  6. autoplay：媒体是否自动播放；

  7. loop：媒体是否循环播放；

  8. muted：是否静音；

  9. preload：

    • none：提示浏览器该视频不需要缓存；
    • metadata：抓取元数据（比如：长度）；
    • auto：如果需要的话，可以下载整个视频，即使用户并不一定会用它；
    • 空字符串：也就代指 auto 值；

audio 标签的属性

  1. src：要嵌到页面的音视的 URL ；

  2. controls：显示或隐藏用户控制界面；

  3. autoplay：媒体是否自动播放；

  4. loop：媒体是否循环播放；

  5. muted：是否静音；

  6. preload：

    • none：提示浏览器该视频不需要缓存；
    • metadata：抓取元数据（比如：长度）；
    • auto：如果需要的话，可以下载整个视频，即使用户并不一定会用它；
    • 空字符串：也就代指 auto 值；

音视频 js 相关属性

  1. 音视频 js 相关属性

    属性名 描述
    duration 媒体总时间(只读)
    currentTime 开始播放到现在所用的时间(可读写)
    muted 是否静音(可读写,相比于 volume 优先级要高)
    volume 0.0-1.0 的音量相对值(可读写)
    paused 媒体是否暂停(只读)
    ended 媒体是否播放完毕(只读)
    error 媒体发生错误的时候，返回错误代码 (只读)
    currentSrc 以字符串的形式返回媒体地址(只读)

  2. 视频多的部分

    属性名 描述
    poster 视频播放前的预览图片(读写)
    width、height 设置视频的尺寸(读写)
    videoWidth、 videoHeight 视频的实际尺寸(只读)

音视频 js 相关函数

  1. 音视频 js 相关函数

    • play()：媒体播放；
    • pause()：媒体暂停；
    • load()：重新加载媒体；

  2. 示例代码

    <body>
    <video src="resource/video/test.mp4" controls width="500" height="500"></video>
    <audio src="resource/audio/test.mp3" controls></audio>
</body>
<script type="text/javascript">
    window.onload = function () {
        var video = document.querySelector("video");
        var audio = document.querySelector("audio");

        video.play();
        audio.play();

        setTimeout(function () {
            video.pause();
            audio.pause();
        }, 5000)
    }
</script>

音视频 js 相关事件

  1. 视频

    • abort：在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件；
    • canplay：在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发，这个事件对应 CAN_PLAY 的 readyState ；
    • canplaythrough：在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕，注意：手动设置 currentTime 会使得 - firefox 触发一次 canplaythrough 事件，其他浏览器或许不会如此；
    • durationchange：元信息已载入或已改变，表明媒体的长度发生了改变，例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件；
    • emptied：媒体被清空（初始化）时触发；
    • ended：播放结束时触发；
    • error：在发生错误时触发，元素的 error 属性会包含更多信息；
    • loadeddata：媒体的第一帧已经加载完毕；
    • loadedmetadata：媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息；
    • loadstart：在媒体开始加载时触发；
    • mozaudioavailable：当音频数据缓存并交给音频层处理时；
    • pause： 播放暂停时触发；
    • play：在媒体回放被暂停后再次开始时触发，即，在一次暂停事件后恢复媒体回放；
    • playing：在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）；
    • progress：告知媒体相关部分的下载进度时周期性地触发，有关媒体当前已下载总计的信息可以在元素的 buffered 属性中获取到；
    • ratechange：在回放速率变化时触发；
    • seeked：在跳跃操作完成时触发；
    • seeking：在跳跃操作开始时触发；
    • stalled：在尝试获取媒体数据，但数据不可用时触发；
    • suspend：在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停；
    • timeupdate：元素的 currentTime 属性表示的时间已经改变；
    • volumechange：在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）；
    • waiting：在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发；

  2. 音频

    • abort：在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件；
    • canplay：在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应 CAN_PLAY 的readyState；
    • canplaythrough：在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕，注意：手动设置 currentTime 会使得 - firefox 触发一次 canplaythrough 事件，其他浏览器或许不会如此；
    • durationchange：元信息已载入或已改变，表明媒体的长度发生了改变，例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件；
    • emptied：媒体被清空（初始化）时触发；
    • ended：播放结束时触发；
    • error：在发生错误时触发，元素的error属性会包含更多信息；
    • loadeddata：媒体的第一帧已经加载完毕；
    • loadedmetadata：媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息；
    • loadstart：在媒体开始加载时触发；
    • mozaudioavailable：当音频数据缓存并交给音频层处理时；
    • pause：播放暂停时触发；
    • play：在媒体回放被暂停后再次开始时触发，即，在一次暂停事件后恢复媒体回放；
    • playing：在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）；
    • progress：告知媒体相关部分的下载进度时周期性地触发，有关媒体当前已下载总计的信息可以在元素的 buffered 属性中获取到；
    • ratechange：在回放速率变化时触发；
    • seeked：在跳跃操作完成时触发；
    • seeking：在跳跃操作开始时触发；
    • stalled：在尝试获取媒体数据，但数据不可用时触发；
    • suspend：在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停；
    • timeupdate：元素的 currentTime 属性表示的时间已经改变；
    • volumechange：在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）；
    • waiting：在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发；

案例-音节导航

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        body {
            background: pink;
        }
        a {
            text-decoration: none;
            display: block;
            color: black;
        }
        ul {
            list-style: none;
            margin: 200px auto;
            width: 908px;
            height: 38px;
            border: 1px solid;
            overflow: hidden;
        }
        ul>li {
            float: left;
            height: 100%;
            width: 100px;
            text-align: center;
            line-height: 38px;
        }
        ul>li:not(:last-child) {
            border-right: 1px solid;
        }
        ul>li>div.down {
            height: 100%;
            background: yellow;
            transition: .5s;
        }
        ul>li:hover .down {
            transform: translateY(-38px);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <audio></audio>
        <ul class="nav">
            <li data-flag="a">
                <a href="javascript:;">我的主页</a>
                <div class="down"></div>
            </li>
            <li data-flag="b">
                <a href="javascript:;">电视剧</a>
                <div class="down"></div>
            </li>
            <li data-flag="c">
                <a href="javascript:;">腿长1米8</a>
                <div class="down"></div>
            </li>
            <li data-flag="d">
                <a href="javascript:;">旅游度假</a>
                <div class="down"></div>
            </li>
            <li data-flag="e">
                <a href="javascript:;">今日团购</a>
                <div class="down"></div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var liNodes = document.querySelectorAll(".nav>li");
    var audio = document.querySelector("audio");
    for (var i = 0; i < liNodes.length; i++) {
        liNodes[i].addEventListener("mouseenter", function () {
            var flag = this.dataset.flag == undefined ? this.dataset.flag 
                                                          : this.getAttribute("data-flag");
            if (flag) {
                audio.src = "http://s8.qhimg.com/share/audio/piano1/" + flag + "4.mp3";
                audio.play();
            }
        })
    }
</script>
</html>
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 音频和视频
    1. 1.1. 容器
    2. 1.2. 编解码器
    3. 1.3. 处理视频的一个流程
  2. 2. 音视频标签
    1. 2.1. video
    2. 2.2. audio
    3. 2.3. source
  3. 3. 音视频标签属性
    1. 3.1. video 标签的属性
    2. 3.2. audio 标签的属性
  4. 4. 音视频 js 相关属性
  5. 5. 音视频 js 相关函数
  6. 6. 音视频 js 相关事件
  7. 7. 案例-音节导航