html5多媒体Video/Audio

video：

1、常见的视频格式视频的组成部分：画面、音频、编码格式视频编码：H.264、theora、VP8(google开源)

2、常见的音频格式编码：AAC、MP3、Vorbis

3、HTML5虽然能在完全脱离插件的情况下播放音视频，但不是支持所有的格式支持的视频格式：

OGG = 带有Theora视频编码+Vorbis音频编码的ogg文件浏览器支持：F,C,O
MPEG4 = 带有H.264视频编码+AAC音频编码的MPEG4文件浏览器支持:S,C
WebM = 带有VP8视频格式编码+Vorbis音频编码的WebM格式浏览器支持:I、F、C、O

4、视频Video的使用方法

		<video src="http://www.bigaody.com" controls="controls"></video>
		
		<video src="文件地址" controls="controls">
			您的浏览器暂不支持video标签。播放视频
		</video>
		
		<video controls="controls" width="300">
			<source src="move.ogg" type='video/ogg; codecs="theora, vorbis"'>
			<source src="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
			<source src="move.webm" type='video/webm; codecs="vp8, vorbis"'> 您的浏览器暂不支持video标签。播放视频
		</video>

注：一般仅使用MP4格式

5、Video 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autobuffer	设置为浏览器缓冲方式，不设置autoplay才有效
autoplay	设置或返回是否在就绪（加载完成）后随即播放视频。
buffered	返回表示视频已缓冲部分的 TimeRanges 对象。
controller	返回表示视频当前媒体控制器的 MediaController 对象。
controls	设置或返回视频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回视频的 CORS 设置。
currentSrc	返回当前视频的 URL。
currentTime	设置或返回视频中的当前播放位置（以秒计）。
defaultMuted	设置或返回视频默认是否静音。
defaultPlaybackRate	设置或返回视频的默认播放速度。
duration	返回视频的长度（以秒计）。
ended	返回视频的播放是否已结束。
error	返回表示视频错误状态的 MediaError 对象。
height	设置或返回视频的 height 属性的值。
loop	设置或返回视频是否应在结束时再次播放。
mediaGroup	设置或返回视频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回视频的当前网络状态。
paused	设置或返回视频是否暂停。
playbackRate	设置或返回视频播放的速度。
played	返回表示视频已播放部分的 TimeRanges 对象。
poster	设置或返回视频的 poster 属性的值。
preload	设置或返回视频的 preload 属性的值。
readyState	返回视频当前的就绪状态。
seekable	返回表示视频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在视频中进行查找。
src	设置或返回视频的 src 属性的值。
startDate	返回表示当前时间偏移的 Date 对象。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象。
volume	设置或返回视频的音量。
width	设置或返回视频的 width 属性的值。

6、Video 对象方法

方法	描述
addTextTrack()	向视频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的视频类型。
load()	重新加载视频元素。
play()	开始播放视频。
pause()	暂停当前播放的视频。

audio

8、audio支持的格式 HTML5支持的音频格式：
当前，audio 元素支持三种音频格式：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis (免费）		√	√	√
MP3 （收费）	√			√	√
Wav（收费）		√	√		√

10、Audio 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。Boolean类型
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。Boolean类型
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。Boolean类型
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。音频在页面加载时预加载，并预备播放
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。（目前主流浏览器都不支持）
volume	设置或返回音频的音量。

autoplay 当歌曲加载后自动播放，但是只有pc端可以实现移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性当然也可以作为对象属性来调取控制auido.*

语法

在 HTML 中：

 
    <audio src="文件地址" controls="controls"></audio> 
    < audio src="文件地址" controls="controls"> 
     您的浏览器暂不支持audio标签。播放视频 
    </ audio>

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

    < audio controls="controls" > 
     <source src="happy.MP3" type="video/mpeg" > 
     <source src="happy.ogg" type="video/ogg" > 
     您的浏览器暂不支持audio标签。播放视频 
    </ audio>

注：controls为Boolean类型，controls="controls"表示true，因为Boolean("controls") = true，字符串不为空都为true

在JavaScript中

var myAudio = document.getElementById("myAudio");
myAudio.setAttribute("loop",true);
myAudio.play();

audio不单单是个标签他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢
11.Audio 对象方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

详情： http://www.w3school.com.cn/jsref/dom_obj_audio.asp

音频/视频 DOM 事件

当音频/视频处于加载过程中时，会依次发生以下事件：
loadstart 当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。

durationchange 当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。
当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

loadedmetadata 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道

loadeddata   当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。
progress   当浏览器正在下载指定的音频/视频时，会发生 progress 事件。
canplay   当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件。
canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

注意：所有主流浏览器都支持 progress 事件。但Internet Explorer 8 及之前的版本不支持该事件。

语法
在 HTML 中：

<audio|video onprogress="SomeJavaScriptCode">

在 JavaScript 中：

audio|video.onprogress=SomeJavaScriptCode;

使用 addEventListener()：

audio|video.addEventListener("progress", function()
  {
  //SomeJavaScriptCode
  }
);

posted @ 2017-10-27 08:46 fanlinqiang 阅读(549) 评论(0) 编辑收藏举报

刷新页面返回顶部

FAN

html5多媒体Video/Audio

video：

audio

公告