HTML Video Audio

关于视频和音频

 

增加了 Video && Audio 这两个标签

 

1. <audio controls="">
2.             <source src="demo-audio.ogg">
3.             <source src="demo-audio.mp3">
4. </audio>

 

1. <video id="example" height="256" width="592" controls="true" autobuffer="true">
2.                     <source src="demo2.mp4" type="video/mp4">
3.                     <source src="demo2.ogv" type="video/ogg">
4.                     <p>Your browser doesn’t support video</p>
5. </video>

 

这个其实没有什么好说的 无非增加了 可以直接播放视频和音频 不需要通过第三方插件

 

下面是一些属性

 

<video> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

 

<audio> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

属性都没有什么好大书特书的,就是一些简单的控制

 

然后是脚本

 

浏览器最开始 是没有控制条的.

也就是说用户必须在视频是右键来操作，或者右键勾选"显示控制按钮"

如果你需要更多的功能支持肿么办。

所以就需要脚本来做点儿什么

 

<video>的脚本

查过W3CSchool 但是他的事件一点儿都不全. 仅仅有播放和暂停之类的

名称	值	描述
currentSrc	只读属性	得到当前正在播放的Url
src	写入	可以更改当前正在播放的Url,读取的话会得到空值
canPlayType	方法	是否能播放某种类型的视频
networkState	只读	得到当前的错误状态 0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
load()	方法	重新加载src指定的资源,会完全重新加载. 缓存也木有了
buffered	对象	其中有start end,调用会返回到缓存的开始和结束为止
preload	读写	none:不预载 metadata:预载资源信息 在视频没有播放的时候就使用
readyState	读	视频状态 1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
currentTime	读写	当前进度,可以写入当前进度位置.
startTime	读写	开始位置
duration	读	返回当前视频流 长度
paused	读	是否暂停
defaultPlaybackRate	读写	当前回放速度,可以修改
playbackRate	读写	当前播放速度，可以修改
played	读取	是否已经在播放
ended	读取	是否已经结束
loop	读写	循环播放
play()	方法	播放
pause()	方法	暂停
volume	读写	设置音量 0 - 1
muted	读写	静音 true false
TimeRanges.length	读写	这个没有使用过,应该是视频网站 分割视频后 分段读取加载
TimeRanges.start(index)
TimeRanges.end(index)

 

我知道的大概就这么多. 如果只是简单放播放视频应该已经够用了.

 

<Audio>标签的事件和<Video>其实差不多.. 参照着看就行了

 

 

问题

 

1. 格式问题

<Audio>

Ogg Vorbis

MP3

Wav

W3CSchool中 的支持表格 比较老了

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

 

 

<Video>

Ogg

MPEG 4

WebM

Video 支持就比较麻烦了，可以参考这个网址

 

http://www.ruanyifeng.com/blog/2010/05/html5_codec_fight.html

 

浏览器 | 影音格式	Ogg Theora	MP4(H.264)	WebM
Microsoft Internet Explorer9	╳	○	╳
Mozilla Firefox5+	○	╳	○
Google Chrome13+	○	○	○
Apple Safari5+	╳	○	╳
Opera11+	○	╳	○

支持问题其实很蛋疼的,比如我希望支持HTML5的浏览器都能看我的视屏

就必须

1. <video id="example" height="256" width="592" controls="true" autobuffer="true">
2.                     <source src="demo2.mp4" type="video/mp4">
3.                     <source src="demo2.ogv" type="video/ogg">
4.                     <p>Your browser doesn’t support video</p>
5. </video>

这样写,比如我是一个视频网站 使用HTML5 就一个视频上传就必须转码多次,明显是不好的

 

所以至少目前,不会有那种纯HTML5的视频播放站，大部分程序员都会选择FLash player.

而苹果呢，则做一个嗅探器, 使用外部软件播放或者你的视频是H.265格式

 

2. 样式问题

每个浏览器都自带有他的播放器样式. 统一也是一个问题。 

比如之前通过事件 自己控制 Video 播放

http://media.chikuyonok.ru/ambilight/ 这是结合canvas做出超炫效果的播放器

 

 

3.老生常谈 IE 7,8,9

有不少跨平台的解决方案 但是始终不如直接用Flash Player来的畅快.

 就算苹果那一端不兼容  也只用单独对苹果进行设置就OK了

如果用JS + HTML5来解决。 就可能面对N个浏览器的跳站.. 这是很忧桑的

 

 

 

转载于:https://www.cnblogs.com/CallMeTommy/archive/2013/02/19/2917629.html