Audio 和 Video 的介绍

1:Audio

基本语法

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

audiosrc=""controls="controls"loop="loop"autoplay="autoplay"您的浏览器不支持html5的audio标签/audio

Audio支持格式有:

Firefox:支持OggVorbis和WAV

Opera:支持OggVorbis和WAV

Safari:支持MP3,AAC格式,和MP4

Chrome:支持OggVorbis,MP3,WAV,AAC和MP4

InternetExplorer9+:支持MP3,AAC格式,和MP4

IOS:支持MP3,AAC格式,和MP4

Android:支持AAC和MP3

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

对象的常用属性和方法

currentTime,获取当前播放时间

duration,获取歌曲的总时间

play,播放

("play",()={});=()={}

pause,暂停

loadstart,开始加载

durationchange,时长数据变化

loadedmetadata,元数据已加载

progress,加载中

canplay,可以播放

canplaythrough,边缓冲边播放

play(),播放歌曲

pause(),暂停歌曲

load(),重新加载歌曲

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

//加载="/audiojs/"/script//静态加载(function(){constas=();});/script//动态加载audiostyle="display:none"src="./"preload="auto"/
2:Video

基本语法

videosrc=""controls="controls"loop="loop"autoplay="autoplay"您的浏览器不支持html5的video标签/video

Video对象

常用的属性和方法:

currentTime,获取当前播放时间

duration,获取歌曲的总时间

play,播放

("play",()={});=()={}

pause,暂停

loadstart,开始加载

durationchange,时长数据变化

loadedmetadata,元数据已加载

loadeddata,当前帧的数据已加载,无法播放下一帧

progress,加载中

canplay,可以播放

canplaythrough,边缓冲边播放

pause(),暂停视频

load(),重新加载视频

Firefox:支持OggTheora格式和WEBMOpera:支持OggTheora格式和WEBMSafari:支持MP4Chrome:支持OggTheora格式,MP4和WEBMInternetExplorer9:支持MP4和WEBM(需要安装插件)IOS:支持MP4Android:支持MP4和WEBM(版本以上)

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

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

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

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

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

linkhref=""rel="stylesheet"scriptsrc=""/scriptconstplayer=videojs('video',options,functiononPlayerReady(){();('ed',function(){('播放结束');});});

免责声明:本文章如果文章侵权,请联系我们处理,本站仅提供信息存储空间服务如因作品内容、版权和其他问题请于本站联系