音频和视频

简介: 文档p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.

文档

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'; min-height: 17.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}span.s1 {font: 12.0px Helvetica}span.s2 {font: 12.0px 'PingFang SC'}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: square}ul.ul2 {list-style-type: check}

音频和视频

1、概述
a.容器(container)和编解码器(coder)
》视频容器
音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为:avi、flv、MP4、mkv、ogg、webm。
》编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间。如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:AAC,MPEG-3,0gg Voribs,视频编解码器:H.264,VP8,ogg Theora。
》浏览器的支持情况

2、video视频元素
src:视频资源的url,必需
width:视频宽度
heitgh:视频高度
autoplay:设置后,表示立刻开始播放视频
preload:设置后,表示预先载入视频
controls:设置后,表示显示播放控件
loop:设置后,表示反复播放视频
muted:设置后,表示视频处于静音状态
poster:置顶视频数据载入时显示的图片

<video src="loginmovie.mp4" width="500" height="300"  controls></video>
谷歌浏览器显示

![CA834F4F-382F-4FFE-BF28-175B43D3A466.png](http://upload-images.jianshu.io/upload_images/1293851-100140f2bb07fdfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Safari显示


![B4BF0365-FB1E-47DB-9680-9711871D472F.png](http://upload-images.jianshu.io/upload_images/1293851-3ce909198c3aee56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


如果是从服务器获取的视频的话,会有缓存。第一次缓存之后,以后就会直接播放了。

预加载设置preload

          preload属性有三个值:
none表示播放器什么都不加载
metadata表示播放之前只能加载元数据(宽高、第一帧画面等信息)
auto表示请求浏览器尽快下载整个视频

浏览器支持

     浏览器不支持的时候可以多准备集中类型的视频,写法如下
  
![688B8F8E-DD64-4C7A-91AE-1B1686310821.png](http://upload-images.jianshu.io/upload_images/1293851-2e630ba4b4283be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 <video width="640" height="480" controls>
            <source src="test.webm">
           <source src=test.mp4>
           <source src=test.ogg>
  </video>
这样不同的浏览器会选择自己支持的类型进行播放。

3、audio音频元素

》属性:
src:音频资源url
autoplay:设置后,表示立刻开始播放音频
preload:设置后,表示预先载入音频
controls:设置后,表示显示播放控件

》嵌入音频
<audio src="刘珂矣-风筝误.mp3" controls></audio>

![688B8F8E-DD64-4C7A-91AE-1B1686310821.png](http://upload-images.jianshu.io/upload_images/1293851-ab6be35792559add.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


如果不加controls,什么都不会显示,类似背景音乐的效果。
<audio src="刘珂矣-风筝误.mp3" autoplay></audio>

万一出现不支持的情况,就需要类似视频一样做兼容处理。
             <audio>
   <source src="刘珂矣-风筝误.mp3">
   <source src="刘珂矣-风筝误.m4a">
   <source src="刘珂矣-风筝误.wav">
  </audio>
浏览器会自动选择支持的格式。

源码

html01:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>音频和视频</title>        
    </head>
    <body>
        <br><br>
        音频和视频
        <hr><br>
        
        <!-- <video src="loginmovie.mp4" width="500" height="300"  controls loop muted></video> -->
        <video src="loginmovie.mp4" width="500" height="300" controls poster="../img/img.jpg"></video>
        <br><br>
        从网址上获取视频
        <br><br>
        <video src="http://video.myhaowai.cn/2016/11/29/2b2146d2cb3a9c7f56266e8ecd6be676.mp4" width="500" height="300" controls preload="auto"></video>
        <br><br>
        
        <video width="640" height="480" controls>
            <source src="test.webm">
            <source src=test.mp4>
            <object>实现flash插件的播放,如果屏蔽IE9以下则不需要</object>
        </video>
        
        
    </body>
</html>

html02:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>音频和视频</title>        
    </head>
    <body>
        <br><br>
        音频和视频
        <hr><br>
        <audio src="刘珂矣-风筝误.mp3" controls></audio>
        
        <br>不兼容处理
        <audio>
            <source src="刘珂矣-风筝误.mp3">
            <source src="刘珂矣-风筝误.m4a">
            <source src="刘珂矣-风筝误.wav">
        </audio>
        
    </body>
</html>
目录
相关文章
|
6月前
|
存储 编解码 自然语言处理
常见的音频与视频格式
常见的音频格式有 WAV、MP3、FLAC、APE、AAC、OGG 等,常见的视频格式有 MP4、AVI、MOV、WMV、MKV、FLV、3GP、MPEG 等,它们在兼容性、文件大小、画质等方面各有特点。
|
编解码 监控 Linux
采集音频和摄像头视频并实时H264编码及AAC编码
采集音频和摄像头视频并实时H264编码及AAC编码
124 0
|
缓存 内存技术
FFmpeg连载6-音频重采样
ffmpeg连载系列
189 0
|
API 内存技术
FFmpeg连载4-音频解码
ffmpeg连载系列
170 0
|
算法 开发者
MPEG 音频 | 学习笔记
快速学习 MPEG 音频,介绍了 MPEG 音频系统机制, 以及在实际应用过程中如何使用。
MPEG 音频 | 学习笔记
|
内存技术
【音视频连载-008】基础学习篇-SDL 播放 PCM 音频文件(下)
接上篇 SDL 播放 PCM 音频文件,已经实现了 推 的模式去播放,接下来看看 拉 的模式如何实现。
215 0
【音视频连载-008】基础学习篇-SDL 播放 PCM 音频文件(下)
|
消息中间件 vr&ar 数据格式
【音视频连载-007】基础学习篇-SDL 播放 PCM 音频文件(上)
在前面的文章中已经能够利用 SDL 去播放 YUV 视频文件了,接下来要通过 SDL 去播放 PCM 音频文件。
582 0
【音视频连载-007】基础学习篇-SDL 播放 PCM 音频文件(上)
|
缓存 C++ 内存技术
C++ 采集音频流(PCM裸流)实现录音功能
与上一篇的“C++ 播放音频流(PCM裸流)” 点击打开链接 相对应,本篇是关于用C++实现录音功能的。同样是直接建一个win32控制台程序然后将代码拷过去改个文件名就可以用,也可以下载本人上传的相关工程,这个工程是用VS2013写的,如果是较低的版本就呵呵了。
2576 0