TML多媒体 ， 主要分为Audio 音频和 Video 视频。

1：Audio

基本语法

src 指定当前播放的音频文件，controls播放控制器，loop歌曲循环，autoplay自动播放 (chrome66之后被禁止)主流浏览器已经关闭了自动播放，需要js触发才行，preload 预加载，如果使用了autoplay这个属性preload就失效了。

<audio
 src="xxxx.mp3"
 controls="controls"
 loop="loop"
 autoplay="autoplay"
>
 您的浏览器不支持html5的audio标签
</audio>

Audio支持格式有：

Firefox：支持 Ogg Vorbis和WAV

Opera ：支持Ogg Vorbis和WAV

Safari ：支持MP3，AAC格式 ，和MP4

Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4

Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4

IOS ：支持MP3，AAC格式 ，和MP4

Android ：支持AAC和MP3

Audio 不光是一个HTML标签，它还是一个window对象。既然是对象，那就有方法和属性。

对象的常用属性和方法

• currentTime，获取当前播放时间
• duration，获取歌曲的总时间
• play，播放

audio.addEventListener("play",() => {});
audio.onplay = () => {}

• pause，暂停
• loadstart，开始加载
• durationchange，时长数据变化
• loadedmetadata，元数据已加载
• progress，加载中
• canplay，可以播放
• canplaythrough，边缓冲边播放
• play()，播放歌曲
• pause()，暂停歌曲
• load()，重新加载歌曲

Audio.js

以前的Audio浏览器是不能直接播放的，如果需要播放一个音频需要借助一个flash插件。后来有了Audio.js的出现后，播放音频不用依赖flash插件了。flash是使用as来编写的，它和JavaScript有点相像，但是有一些门槛，在此基础上，出现了很多的Audio插件，audio插件做了两件事情，一件是旧版的浏览器兼容（http://kolber.github.io/audiojs/），第二件是美化自定义了浏览器的外观。

// 加载audio.js
<script src="/audiojs/audio.min.js"></script>
// 静态加载
<script>
 audiojs.events.ready(function() {
 const as = audiojs.createAll();
 });
</script>
// 动态加载
<audio style="display:none" src="./music.mp3" preload="auto" />

2：Video

基本语法

src源，controls播放控制器，loop 循环播放，autoplay 自动播放，height，width，宽度和高度，在Audio里面不能指定，但是在Video里面是可以的，muted 静音，poster 预览图（当视频没有播放或者正在加载时展示给用户的一张图片，为了交互的友好性），preload 预加载，和autoplay一块时失效。

<video
 src="xxxx.mp4"
 controls="controls"
 loop="loop"
 autoplay="autoplay"
>
 您的浏览器不支持html5的video标签
</video>

Video 对象

常用的属性和方法：

• currentTime，获取当前播放时间
• duration，获取歌曲的总时间
• play，播放

video.addEventListener("play",() => {});
video.onplay = () => {}

• pause，暂停
• loadstart，开始加载
• durationchange，时长数据变化
• loadedmetadata，元数据已加载
• loadeddata，当前帧的数据已加载，无法播放下一帧
• progress，加载中
• canplay，可以播放
• canplaythrough ，边缓冲边播放
• play()，播放视频 返回一个promise
• pause() ，暂停视频
• load() ，重新加载视频

视频格式与流媒体

video支持的视频的格式主要有三种：MP4、ogg、webm。

Firefox ：支持Ogg Theora格式和WEBM
Opera ：支持Ogg Theora格式和WEBM
Safari ：支持MP4
Chrome ：支持Ogg Theora格式，MP4和WEBM
Internet Explorer 9 ：支持MP4和WEBM(需要安装插件)
IOS ：支持MP4
Android ：支持MP4和WEBM(Android 2.3版本以上)

流媒体是指采用流式传输的方式在Internet播放的媒体格式(流媒体格式video标签是不支持的)。

流媒体又叫流式媒体，它是指商家用一个视频传送服务器把节目当成数据包发出，传送到网络上。

用户通过解压设备对这些数据进行解压后，节目就会像发送前那样显示出来。

典型的流媒体格式：rtmp、rtsp、flv都是流媒体的传输协议。

rtmp 是Adobe公司提供的一个流媒体协议，使用的是TCP协议，稳定性好

rtsp 是Netscape网景公司提供的一种协议，使用的是UDP协议，实时性好

flv 是苹果公司提出的一个流媒体的一个协议，也是使用的TCP协议，把整个视频流切割成一段一段的m3u8文件

Video.js

ideo的基本使用方法

1）<video src="url">您的浏览器不支持video标签，请使用google浏览器浏览</video>

2）加入要添加预加载图片，添加属性poster="图片URL"

<video poster="图片的url">

<source src="视频URL"></source>

您的浏览器不支持video标签，请使用google浏览器浏览

</video>

注意：视频的格式不同，支持的浏览不同

常见的视频格式：ogg(ogv)/MPEG4(mp4)/WEBM(webm)

加入非要在不支持的浏览器上看效果，那么你得准备swf格式的视频

<video width="800" height="">

<source src="myvideo.mp4" type="video/mp4"></source>

<source src="myvideo.ogv" type="video/ogg"></source>

<source src="myvideo.webm" type="video/webm"></source>

<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">

<param name="movie" value="myvideo.swf" />

<param name="flashvars" value="autostart=true&file=myvideo.swf" />

</object>

当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>

</video>

2、常见固有属性

autoPlay（加载完成自动播放）

controls（使用的时浏览器默认的控件）

loop(循环播放)

width（video的宽度）

height（video的高度）

src(视频的地址)

video.currentTime（当前视频的播放事件）

video.duration（视频播放的总时长）

3、常见的事件（方法）

video.play()---播放视频

video.pause()---暂停视频播放

4、全屏设置：(注意设置全屏的时候，element的选取，不要加到video上面，否则全屏时会出现默认的控件，也有可能导致视频全屏时不可以看到画面，这里注意element一般时所有控制器与video标签最近的共同的父元素)

全屏：element.webkitRequestFullScreen();

element.mozRequestFullScreen();

element.requestFullScreen();

取消全屏：document.webkitCancelFullScreen();

document.mozCancelFullScreen();

document.cancelFullScreen();

5、设置音量

video.volume 取值范围为0-1

如果使用input[type='range']时，可以设置range的min=0，max=10,在onchange事件时取得range的值除以10表示音量大小

eg:video.volume = $("input[type='range']").val()/10;

注：如果需要设置静音模式，直接将音量设置为0

video.volume = 0;

6、播放进度

video.currentTime的改变是通过video的timeupdate事件而改变，所以在设置的时候，我们需要在值改变的时候，添加事件video.addEventListener("timeupdate",playTime,true);

eg1:

$("#playRange").on("change",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

}

天小编将分享前端开发中必学的知识点，HTML5中关于音视频处理

视频处理

基本内容：目前国内的视频网站 - Flash技术，HTML5的视频处理首先替换Flash技术，支持的视频格式有：

1.MP4 - .mp4 目前比较主流的视频格式。

2.OGG - .ogv 手机端的视频格式。

3.WebM - 目前唯一一个支持超高清视频格式，该视频格式出自Goggle公司。

问： 如何处理视频？

答：<video>元素 - 引入单个格式视频文件，它由自己的属性组成。 src属性 - 指定视频文件的地址， width属性 - 设置视频宽度， height属性 - 设置视频高度。语法规范：<video src="视频文件路径" width=“100px”>

！！需要注意的是：视频的宽高比不会改变， 在video元素内定义不支持的提示内容。

如果要想在<video>元素引入多个格式视频文件，那么就使用<source/>，使用这种方式能够实现各个浏览器的兼容性，语法规范：

<video>

<source src="视频文件路径1"/>

<source src="视频文件路径2"/>

<source src="视频文件路径3"/>

</video>

• <video>元素的属性

autoplay属性 - 自动播放

controls属性 - 提供控制面板

loop属性 - 循环播放

poster属性 - 播放之前显示一张图片

preload属性 - 预加载(视频)

none - 不加载

auto - (默认值)自动(尽快加载完毕)

metadata - 只加载除视频之外的信息(宽和高)

• video的高级用法 方法

play() - 播放视频

pause() - 暂停视频

load() - 加载视频

canPlayType() - 判断是否支持该格式

• 事件

play - 播放视频时触发

pause - 暂停视频时触发

ended - 结束播放时触发

error - 播放错误时触发

canplay - 可播放时触发(不考虑整体)

canplaythrough - 整体播放顺利时触发

progress - 下载进度

• 属性

paused - 判断视频当前是否暂停，如果暂停状态,返回true

ended - 判断视频当前是否结束播放，如果结束播放,返回true

duration - 当前视频的总时长

currentTime - 获取或设置当前视频播放的位置

音频处理

基本内容：目前HTML页面实现音频处理，将Windows Media Player播放器,内置页面中，使用Flash技术实现音频处理，HTML5实现音频处理支持的音频格式有：

1.mp3 - 感谢百度(MP3)

2.ogg

3.wav

问： 如何使用音频？

答： audio元素 - 引入一种音频格式。

• <audio>元素的属性

src属性 - 引入音频文件，作用 - 实现页面背景音乐播放

audio元素 - 引入多种音频格式

source元素

autoplay - 自动播放

controls - 提供控制面板

loop - 循环播放

preload - 预加载

audio的高级用法

• 事件

play - 播放音频时触发

• 方法

play() - 播放音频

pause() - 暂停音频

• 属性

paused - true,表示暂停状态

！！ 需要特别注意，IE 8及之前的版本都不支持