本文共 2230 字，大约阅读时间需要 7 分钟。

1：Audio

基本语法

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

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插件做了两件事情，一件是旧版的浏览器兼容（

// 加载audio.js  // 静态加载  // 动态加载 
   

2：Video

基本语法

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

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

               const player = videojs('video', options, function onPlayerReady() {        this.play();        this.on('ended', function() {            videojs.log('播放结束');        });    });

转载地址：http://gncv.baihongyu.com/