javascript html5视频播放器

款很棒的 HTML5 视频播放器作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加一样简单的方式添加视频。1、VideoJSVideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。2、SublimeVideoSublimeVideo 是一个独特的基于云概念的 HTML5 视频播放器，功能强大，可惜不是免费的。3、Open Standard Media (OSM) Player由 Alethia Inc 开发，是集全功能于一体的网络播放器，非常不错。4、Video for EverybodyVideo for Everybody 让你在网页中嵌入一小段代码就能支持 HTML5 视频，在不支持的浏览器中自动切换为 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 视频解决方案 – 兼容所有主流浏览器，采用独特的 fallback 机制。6、FlareVideoFlareVideo 由 Alex MacCaw 开发，他是一位Ruby/JS开发者，FlareVideo主要特色：在不支持 HTML5 视频的情况，用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文

这么多要求。又不要这又不要那的。本来我有很多代码。但是怕不符合你要求，还是不提供给你为好。

因学习网页前端制作，所以需要一些源码。1可以只有html+css的小项目（或者是简单的案例，含js也可以），例如只有几个简单的页面也可以。2或者是一些小游戏，不要太复杂的。3也可以是有关这方面的书籍（pdf格式的）。4相关手册文档也可以。5相关视频（html+css不需要视频了，html5跟css3的除外）。注意：1如果是提供下载链接的，请先附上预览图，不要给那些已经失效的链接。2如果是提供源码，请不要给那些没有良好书写习惯的代码（代码没有缩进，书写不规范，不便于阅读）。3给下载链接的，请不要给那些乱七八糟的网站（广告满天飞，下载链接很隐蔽）。4不要发表个人看法，提供素材便可。

createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。

首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。

接下来开始分析代码：

首先引入js文件

<script src="easeljs-071minjs"></script>

<script src="preloadjs-041minjs"></script>

然后进行舞台初始化操作：

function init(){

stage = new createjsStage("cas");

C_W = stagecanvaswidth;

C_H = stagecanvasheight;

var manifest = [

{src:"image/manpng" , id:"man"},

{src:"image/groundpng" , id:"ground"},

{src:"image/bgpng" , id:"bg"},

{src:"image/highjpg" , id:"high"},

{src:"image/coinspng" , id:"coin"}

]

loader = new createjsLoadQueue(false);

loaderaddEventListener("complete" , handleComplete);

loaderloadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：

function handleComplete(){ //当素材load完后执行该方法

var manImage = loadergetResult("man"),

lowground = loadergetResult("ground"),

highground = loadergetResult("high"),

bgImage = loadergetResult("bg"),

coins = loadergetResult("coin");

sky = new createjsShape();

skygraphicsbf(bgImage)drawRect(0,0,C_W,C_H);

skysetTransform(0, 0, 1 , C_H/bgImageheight);

stageaddChild(sky);

man = createMan(200,326,manImage);

//该框为判定角色的判定区域

kuang = new createjsShape();

kuanggraphicsbeginStroke("rgba(255,0,0,05)")drawRect(0 , 0 , mansize()w , manpicsize()h15);

// stageaddChild(kuang);

mapHandle(lowground , highground , coins);

createjsTickertimingMode = createjsTickerRAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout

createjsTickersetFPS(30);//舞台帧率控制

createjsTickeraddEventListener("tick", tick);//绑定舞台每一帧的逻辑发生函数

windowaddEventListener("keydown" , function(event){

event = event||windowevent;

if(eventkeyCode===32&&manjumpNum<manjumpMax){

manjump();

}

})

}

获得加载完成后端的数据就直接用loadergetResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。

然后进行舞台循环设置，上面有注释了，就不说了。