音视频

音视频历史

大家都有在网页中浏览视频的经历，但在HTML5之前，对视频乃至音频都还没有一个标准 因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在

音视频格式

  • 大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip
  • 不管是音频文件或视频文件，实际上都只是一个容器文件。这点类似于压缩了一组文件的ZIP文件，视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。
  • 视频播放的时候，音频轨道和视频轨道是绑定在一起的。
  • 元数据包含了视频的封面、标题、子标题、字幕、时间等相关信息

编解码器

  • 音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。

  • 原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；

  • 如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据

不同浏览器对音视频的兼容性

目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！！  

音视频格式的转换

使用ffmpeg工具

1.安装，并找到bin目录 2.在计算机图标上右键 3.选择属性 4.更改设置 5.高级 6.环境变量 7.找到系统变量的 path 8.把ffmpeg 的 bin的路径添到后边 9.一直点确定完成

测试是否安装成功

1.window+r 2.输入CMD 3.打开命令行窗口 输入ffmpeg 检测是否安装成功

ffmpeg的使用

用 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 tt.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3

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

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

音视频旧格式

  • <object> 标签的作用是在 HTML 页面中嵌入多媒体元素

    <object data="1.swf" width="400"></object>

  • <embed> 标签的作用是在 HTML 页面中嵌入多媒体元素

    <embed src="1.swf" width="400">

为什么淘汰：

  • 需要flash，效率低
  • 如果浏览器不支持 Flash，那么视频将无法播放
  • iPad 和 iPhone 不能显示 Flash 视频
  • 将视频转换为其他格式，仍然不能在所有浏览器中播放
  • 目前安卓4.4也抛弃了flash......

html5的新音视频标签

  • 视频基本标签用法 ：

    • <video width=" " height="" src=""> </video>

    • src 属性：指定播放文件的URL。

    • width、height属性：

      • 设置媒体元素的大小，单位为像素；
      • 省略该属性，则使用播放源文件的大小；
      • 仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。

  • 音频基本格式 ：

    • <audio src="" controls> </audio>

    • src 属性：指定播放文件的URL。

    • 其他和视频一样。

  • 指定一种视频格式，不能播就提示： <video src="examp.mp4" >您的浏览器不支持</video>

  • 给定多个source标签，给定多种视频格式，浏览器根据自身支持程度选择播放哪一种 <source src="1.mp4" type="video/mp4" />

音视频标签的属性

 

  • preload：

    该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么

    • none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
    • metadata: 提示尽管我们认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
    • auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
    • 空字符串：也就代指 auto 值。
posted @ 2023-01-10 22:39  z_bky  阅读(272)  评论(0)    收藏  举报