最近在做H5的播放器video,随带着查查资料研究下flash工具和H5技术标准现在的情况。相比较于flash,H5在越来越明朗的移动市场上更具有光明的前景,youtube、apple的无flash产品线似乎已经引领了某种趋势,即使在pc上随着现代浏览器厂商的对H5的支持越来越全面,H5也能占据一席之地。原生的api video audio canvas等普及,H5这个新技术标准会把web动画视频游戏领域带入另一个高潮。

Adobe太封闭了,产品100%私有。
Flash影片大多遵循H.264格式,这种格式苹果是支持的;至于没有Flash游戏,不足以错过APP Store里精彩的游戏人生。
一旦支持Flash,苹果移动设备的稳定性、安全性会大大降低。
Flash非常耗电。
想让Flash适应触控设计,你得重写代码,还不如用更先进的HTML5。
最后也是最重要的,完全依赖第三方软件开发,会延误我们所有人使用其他产品的新功能。

乔布斯 《Flash之我见》

上面整理了乔帮主怼flash的文章的截取,这里就知道为什么flash会衰落,HTML5会兴起的原因了,后来谷歌帝国、脸书帝国、油管帝国都在慢慢的嫌弃flash的道路上越走越远,移动端的flash的停更说明连Adobe自己也看不下去这个产品了,这个现象就像多米诺骨牌,让我们这些当年的吃瓜群众纷纷侧目,怀疑某个兴盛的时代是不是说变就变了。我感觉到国际巨头互联网企业想推一个产品而且是正确的时代产品,这个产品就是这个领域的未来。
那到底啥是flash,Flash是一种交互式矢量图与Web动画标准,因为体积小、易于传输、不失真等优点,契合2000年前后小带宽的互联网环境,迅速在全球崛起,简直就是时代骄子,横跨影视、游戏、广告领域,说是霸主简直都是在污蔑他的影响力,市场占有率几乎100%,然而一个朝代故步自封,不思进取也会被新的王朝替代,所以flash最终被H5还是其他的产品挤下神坛都是迟早的事,就看谁能在flash的棺材班上钉上最后一颗钉子。
那么废话结束了,唉,还是要学点东西才能赶上他们眼里的旧时代,这日子没法过了。
先列个video的基础api梳理,毕竟是最近做的事,以后专门再开个canvas专题、websocket专题把踩坑记录心得拿上来记一记。

Video 对象属性

src 设置或返回视频的 src 属性的值。

height 设置或返回视频的 height 属性的值。

width 设置或返回视频的 width 属性的值。

controls 设置或返回视频是否应该显示控件(比如播放/暂停等)。

loop 设置或返回视频是否应在结束时再次播放。

autoplay 设置或返回是否在就绪(加载完成)后随即播放视频。

poster 设置或返回视频的 poster 属性的值,不播放视频时显示的图片。

muted 设置或返回是否关闭声音。

defaultMuted 设置或返回视频默认是否静音。

ended 返回视频的播放是否已结束。

volume 设置或返回视频的音量。

defaultPlaybackRate 设置或返回视频的默认播放速度。

playbackRate 设置或返回视频播放的速度。

preload 设置或返回视频的 preload 属性的值,提前加载视频 none auto metadata。

duration 返回视频的长度(以秒计)。

currentTime 设置或返回视频中的当前播放位置(以秒计)。

currentSrc 返回当前视频的 URL。

readyState 返回视频当前的就绪状态。

networkState 返回视频的当前网络状态。

paused 设置或返回视频是否暂停。

error 返回表示视频错误状态的 MediaError 对象 只读。

seeking 返回用户当前是否正在视频中进行查找。

played 返回表示视频已播放部分的 TimeRanges 对象。

audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。

buffered 返回表示视频已缓冲部分的 TimeRanges 对象。

controller 返回表示视频当前媒体控制器的 MediaController 对象。

crossOrigin 设置或返回视频的 CORS 设置。

mediaGroup 设置或返回视频所属媒介组合的名称。

seekable 返回表示视频可寻址部分的 TimeRanges 对象。

startDate 返回表示当前时间偏移的 Date 对象。

textTracks 返回表示可用文本轨道的 TextTrackList 对象。

videoTracks 返回表示可用视频轨道的 VideoTrackList 对象。

Video 对象方法

方法 描述

play() 开始播放视频。

pause() 暂停当前播放的视频。

addTextTrack() 向视频添加新的文本轨道。

canPlayType() 检查浏览器是否能够播放指定的视频类型。返回空串或 “maybe” “probably”

load() 重新加载视频元素。

Video 事件

play
即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性

abort
浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的

pause
播放暂停,当执行了pause方式时触发

waiting
播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧

progress
浏览器正在获取媒体数据

loadeddata
事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发。

error
获取媒体数据过程中出错

loadedmetadata
浏览器获取完毕媒体的时间长和字节数

timeupdate
由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变

ended
播放结束后停止播放

canplay
浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲

canplaythrough
浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲

volumechange
volume属性(音量)被改变或muted属性(静音状态)被改变

欢迎交流转载请注明出处