HTML5音频,html音频和视频

　　一、video

　　1.1 video支持视频格式

　　常见视频格式

　　视频的组成：图片、音频、编码格式视频编码：H.264、Theora、VP8(google开源)HTML5支持的视频格式：

　　1、Ogg

　　带有Theora视频编码和Vorbis音频编码的Ogg文件

　　支持的浏览器：F，C，O

　　2、MEPG4

　　MPEG4文件采用H.264视频编码AAC音频编码

　　支持的浏览器：S和C

　　3、网络营销

　　带有VP8视频编码和Vorbis音频编码的WebM格式

　　支持的浏览器：I，F，C，O

　　缺点：视频少，几乎没有转码器，转码不好。

　　如果你想让视频自动填充慢速父div的大小，只需在视频标签中添加style= width=100%；身高=100%；适合对象：填充

　　1.2 标签原型

　　指定视频格式，如果不能播放则提示。

　　video id= media src= examp . MP4 width= 500 poster= examp 1 . jpg 您的浏览器不支持video/video给定多种视频格式，浏览器可以根据其支持情况选择播放哪一种。

　　注意：个源标签，浏览器会识别第一个，如果第一个没有被识别，会继续识别第二个；如果第一次识别成功，将直接播放第一格式视频。

　　video controls=" controls " source src=" 1 . mp4 " type=" video/MP4 "//src属性写在source标签中，用来指定视频的类型，例如MP4是type=" video/MP4 " source src=" 2 . ogg " type=" video/ogg "//ogg format source src=" 3 . webm " type=" video/webm "//webm format/video1.3 重要的video标签属性

　　属性(常用)功能描述控制是否显示播放控件autoplay autoplay设置打开浏览器后是否自动播放宽度Pilex(像素)设置播放器高度Pilex(像素)设置播放器循环的高度设置是否循环播放视频(即播放后再次继续播放))preload preload设置加载后是否播放src url，设置待播放视频的url地址， 海报imgurl设置播放器初始默认显示图片，autobuffer autobuffer设置为浏览器缓冲模式，不设置autoply才有效。

　　API属性

　　属性描述audioTracks返回代表可用音轨的AudioTrackList对象buffered，代表音频/视频的TimeRanges对象buffered，控制器返回音频/媒体控制器对象cross当前视频媒体控制器设置或返回音频/视频当前的CORS设置Src返回当前音频/视频的URL currentTime设置或音频/视频中的当前播放位置(以秒为单位),默认静音设置或音频/视频是否默认静音defaultPlaybackRate设置或返回音频/视频的默认播放速度。duration返回当前音频/视频的长度(秒)。ended返回音频/视频播放是否已经结束。error返回指示音频/视频错误状态的MediaError对象mediaGroup设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)静音设置或返回音频/视频是否静音。networkState返回音频/视频的当前网络状态。paused设置或返回音频/视频是否暂停。played返回音频/视频播放部分的TimeRanges对象readyState返回音频/视频的当前就绪状态。seeking返回代表音频/视频的可寻址部分的TimeRanges对象。Seeking返回用户是否正在播放音频/搜索视频startDate返回表示当前时间偏移量的Date对象textTracks返回表示可用文本轨道的TextTrackList对象videoTracks返回表示可用视频轨道的VideoTrackList对象卷集或返回音频/视频音量常用API属性。

　　Duration:返回当前音频/视频的长度(秒)。paused:设置或返回音频/视频是否暂停。currentTime:设置或返回音频/视频的当前播放位置(秒)。ended:返回音频/视频是否播放完毕。1.4 Video API

　　视频方法

　　API描述play video . play()；播放视频暂停video . pause()；暂停视频加载video . load()；将所有属性恢复为默认值，视频将恢复到重启状态：CanplayType var support=video id . CanplayType( video/MP4 )；

　　确定浏览器是否支持当前类型的视频格式。

　　返回值：

　　空字符串：可能不被支持：可能：完全支持。

　　常规方法

　　Play():开始播放音频/视频pause():暂停当前播放的音频/视频1.4.2网络状态

　　获取视频对象

　　media=document . getelementbyid( media )；1.Media.currentSrc

　　返回当前资源的URL

　　2.Media.src=value

　　或者返回设置当前资源的URL。

　　3.Media.canPlayType(类型)；

　　可以播放一定格式的资源吗？

　　4.Media.networkState

　　0.此元素未初始化。

　　1.正常但不使用网络。

　　2.下载数据

　　3.找不到资源。

　　5.media . load()；

　　重新加载src指定的资源

　　6.媒体.缓冲；

　　返回缓冲区，时间范围。

　　7.Media.preload

　　无：无预载

　　元数据：预加载资源信息

　　自动：

　　准备状态

　　1.Media.readyState

　　2.寻求媒体；

　　是求？

　　1.4.4回放状态

　　1.Media.currentTime=value

　　当前播放位置，赋值可以改变位置。

　　2.Media.startTime

　　一般是0，如果是流媒体或者不是从0开始的资源就不是0。

　　3.媒体.持续时间；

　　当前资源长度流返回无穷大。

　　4.媒体暂停；

　　暂停？

　　5.media . defaultplaybackrate=value；

　　可以设置默认播放速度。

　　6.Media.playbackRate=value

　　当前播放速度，设置后立即更改。

　　7.Media.played

　　返回到已经播放的区域，时间范围。该对象见下文。

　　8.Media.seekable

　　返回可以查找的范围时间范围。

　　9.媒体. ended；

　　结束？

　　10.Media.autoPlay

　　自动播放？

　　11.媒体循环；

　　循环播放？

　　12.Media.play()。

　　广播

　　13.media . pause()；

　　中止

　　视频控制

　　媒体控制；//有没有默认的控制条Media.volume=value//volume media . muted=value；//静音TimeRanges (area)对象TimeRanges.length//区域段TimeRanges.start(index) //索引段区域TimeRanges.end(index) //索引段区域结束位置1.4.6相关事件

　　1.首先可以通过js中的addEventListener方法绑定事件。

　　事件加载启动客户端开始请求数据进度客户端正在请求数据暂停延迟下载中止客户端主动终止下载(不是由错误导致)加载启动客户端开始请求数据进度客户端正在请求数据错误请求数据时遇到错误网络速度停滞。play()和autoplay开始播放时，pause pause()触发loadedmetadata成功获取资源长度loadeddata-waiting等待数据，这不是错误。播放开始回放。canplay可以玩。但是，它可能会因为加载而暂停。canplaythrough可以玩。所有歌曲都已载入。寻求就是寻找。求完了。时间更新播放时间已更改。结束播放结束。播放速率被改变。durationchange资源长度已更改。volumechange已更改。

　　2.常见事件

　　Oncanplay:当文件准备好开始播放时(缓冲区足够启动时)运行的脚本。Ontimeupdate:当播放位置改变时运行的脚本(例如当用户快进到媒体中的不同位置时)。Onended:当媒体到达结尾时运行的脚本(可以发送类似“感谢观看”的消息)。其他

　　1.全屏：

　　element . webkitrequestfullscreen()；(WebKit)element . mozrequestfullscreen()；(Firefox)element . request full screen()；(W3C )2。退出全屏：

　　document . webkitcancelfullscreen()；(WebKit)document . mozcancelfullscreen()；(Firefox)document . exit full screen()；(W3C)二、audio

　　2.1 audio格式

　　1.常见音频格式

　　音频编码：ACC、MP3、Vorbis

　　2.2支持的音频格式。HTML5:

　　g OG免费支持的浏览器：C、F、O MP3支持的浏览器；I、C、S Wav支持的浏览器；F，O和S2.2 audio标签中的一些常用属性支持的浏览器

　　属性值评论src url播放的音乐的url地址(Firefox只支持ogg音乐，IE9只支持MP3音乐。Chrome似乎完全支持)preload preload(加载页面时加载或缓冲音频)。如果使用自动播放，该属性将无效。循环循环回放控制控制显示默认控制条(控制按钮)自动播放自动播放自动播放。

　　支持音乐格式

　　音频格式Chrome Firefox IE9 Opera Safari OGG支持支持不支持不支持不支持MP3支持不支持WAV不支持不支持不支持不支持不支持不支持不支持

　　音频可以由新的。也可以通过使用document来获取。

　　//通过new关键字创建音频对象var Music=new Audio( test . MP3 )；//通过document获取已有的音频对象var music=document . getelementbyid( Audio )；//当然，这里也可以使用document . getelementsbyclassname( class name )等其他方法来获取。2.3 api所提供的对audio标签操作的一些属性和方法

　　注释持续时间：获取媒体文件的总持续时间，单位为秒；如果不能获取，则返回NaN暂停；如果媒体文件被暂停，则paused属性返回true否则，它返回false ended如果媒体文件播放完毕，返回true muted以获取或设置静音状态。布尔音量的音量控制属性值为0-1；0是最小音量，1是最大音量。startTime返回开始播放时间。error返回错误代码，为uull时正常。否则可以通过Music.error.code获取currentTime获取或控制当前广播所用的时间，单位为S.CurrentSrc以字符串形式返回正在播放或已加载的文件。

　　2.4 常用的控制用的函数

　　函数load()加载音频，视频软件play()加载并播放音频和视频文件或重放暂停的音频和视频文件。pause()在播放状态下暂停音频和视频文件。canPlayType(obj)测试给定的迷你类型文件是否受支持。

　　2.5 audio标签API中的常用事件

　　首先可以通过js中的addEventListener方法绑定事件。

　　名称事件操作loadstart客户端开始请求数据进度客户端正在请求数据(或缓冲)播放暂停暂停()方法被触发时play()和autoplay结束当前播放结束时间当前播放时间更改时更新。时间处理canplaythrough播放中常用的歌曲已经被加载到完全完成的canplay缓冲区中到当前的可播放状态。

　　其实视频的api和音频的API差不多。有点不一样。所以基本上，我会开一个会，然后开所有其他的会。

　　总结

　　这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助。有问题可以留言交流。谢谢你的支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。