HTML Video Audio
关于视频和音频
增加了 Video && Audio 这两个标签
- <audio controls="">
- <source src="demo-audio.ogg">
- <source src="demo-audio.mp3">
- </audio>
- <video id="example" height="256" width="592" controls="true" autobuffer="true">
- <source src="demo2.mp4" type="video/mp4">
- <source src="demo2.ogv" type="video/ogg">
- <p>Your browser doesn’t support video</p>
- </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 支持就比较麻烦了，可以参考这个网址
| 浏览器 | 影音格式 | Ogg Theora | MP4(H.264) | WebM |
|---|---|---|---|
| Microsoft Internet Explorer9 | ╳ | ○ | ╳ |
| Mozilla Firefox5+ | ○ | ╳ | ○ |
| Google Chrome13+ | ○ | ○ | ○ |
| Apple Safari5+ | ╳ | ○ | ╳ |
| Opera11+ | ○ | ╳ | ○ |
支持问题其实很蛋疼的,比如我希望支持HTML5的浏览器都能看我的视屏
就必须
- <video id="example" height="256" width="592" controls="true" autobuffer="true">
- <source src="demo2.mp4" type="video/mp4">
- <source src="demo2.ogv" type="video/ogg">
- <p>Your browser doesn’t support video</p>
- </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个浏览器的跳站.. 这是很忧桑的
