js实现同步服务器目录

最近买了一台16G的Ipad2 想用Ipad看视频但又舍不得把内存都浪费在视频上, 想起一方法,利用自身的优势做一个网页来同步Webapps下的目录, Ipad中用的是Safari浏览器,它支持HTML5的Video 标签 (只支持MP4格式的视频),这样就好办了只要我将Src属性指向我webapps下的mp4文件 就能播放了.
但是我想做的灵活一点,好用一点 我想在页面上显示我webapps下的目录,点击任意mp4文件就能播放,点击文件夹进入文件内部. 这些功能都在同一个页面内实现,这样少不了用大量的Js ,Ajax也要用到. 与其乱写一通倒不如对上述功能封装成几个JS类供自己调用(先声明本人是菜鸟,希望各位看了能提点意见).

下面是我的思路:

需要建立三个类 : Video 主要用来实现播放视频,切换视频以及视频 连续播放 以及一些需要用到的媒体事件等功能

Stroe  用来存储当前目录的视频 以供Video类使用

GpsDirectory 用来同步服务器目录 根据目录中的内容改变stroe中的资源

以下是今天写的代码(不全,等整好会补全的)


测试代码:



[code="html"]
test
your browser does not support this tag!

console.log("start....");
var video = new diqye.html5.Video({
id:'myVideo',
controls:true,
height:'300px',
width:'400px',
autoplay:true,
onPlay:function(){console.log("on play");},
onPause:function(){console.log("on pause");},
url:'http://www.w3school.com.cn/i/movie.ogg'
});
console.log(video.isAutoPlay());
console.log(video.getSource());
//video.addEventOnPause(function(){console.log("on pause");});
//video.addEventOnPlay(function(){console.log("on play");})
function doPause() {
video.pause();
}
function doPlay() {
video.play();
}

var stroe = new diqye.html5.video.Stroe(new Array("111", "222"));
console.log(stroe.getLength());
console.log(stroe.add("333"));
for(var i=0; i<stroe.getLength(); i++) {
console.log("the content that index is  "+ i + " is " + stroe.get(i));
}

  js代码:


[code="js"]//由于本机上面中文编码出了点问题所以注释很少

[code="js"]console.log("entered dqye js file");
[code="js"]//模拟Java 中的包机制
var diqye = function(){}
diqye.html5 = function(){}
diqye.html5.Video = function(configuration) {
   this._context = document.getElementById(configuration.id);
  
if(configuration.autoplay) {
this._autoplay = "autoplay";
this._context.setAttribute("autoplay", this._autoplay);
}
if(configuration.controls) {
this._controls = "controls";
this._context.setAttribute("controls", this._controls);
}
if(configuration.height) {
this._height = configuration.height;
this._context.setAttribute("height", this._height);
}
if(configuration.loop) {
this._loop = "loop";
this._context.setAttribute("loop", this._loop);
}
if(configuration.preload) {
this._preload = "preload";
this._context.setAttribute("preload", this._preload);
}
if(configuration.url) {
this._url = configuration.url;
this._context.setAttribute("src", this._url);
}
if(configuration.width) {
this._width = configuration.width;
this._context.setAttribute("width", this._width);
}
if(configuration.onPause) {
if(configuration.onPause instanceof Object) {
this.addEventOnPause(configuration.onPause);
}else{
throw "the attrubute onPause must specify a method"
}
}
if(configuration.onPlay) {
if(configuration.onPause instanceof Object) {
this.addEventOnPlay(configuration.onPlay);
}else{
throw "the attrubute onPlay must specify a method"
}
}
}

//蛻�謐｢謦ｭ謾ｾ逧�隗�鬚第枚莉ｶ
diqye.html5.Video.prototype.changeSource = function(url) {
console.log("entered change source method , the url is " + url);
this._url = url;
this._context.setAttribute("src", this._url);
}
//闔ｷ蜿匁眺謾ｾ逧�隗�鬚第枚莉ｶ
diqye.html5.Video.prototype.getSource = function() {
return this._url;
}
//譏ｯ蜷ｦ閾ｪ蜉ｨ謦ｭ謾ｾ
diqye.html5.Video.prototype.isAutoPlay = function() {
return this._autoplay == "autoplay";
}

diqye.html5.Video.prototype.addEventOnPause = function( callBack) {
if(this._context.addEventListener){
this._context.addEventListener("pause", callBack);
}else if(this._context.attchEvent) {
this._context.attchEvent("onpause", callBack);
}else if(this._context.onpause) {
this._context.onpause = callBack;
}else{
throw "your browse not support this library";
}
}

diqye.html5.Video.prototype.pause = function() {
this._context.pause();
}

diqye.html5.Video.prototype.addEventOnPlay = function( callBack) {
if(this._context.addEventListener){
this._context.addEventListener("play", callBack);
}else if(this._context.attchEvent) {
this._context.attchEvent("onplay", callBack);
}else if(this._context.onpause) {
this._context.onplay = callBack;
}else{
throw "your browse not support this library";
}
}

diqye.html5.Video.prototype.play = function() {
this._context.play();
}

//define diqye.html5.video.Stroe Object start
diqye.html5.video = function(){}
diqye.html5.video.Stroe = function(sources) {
this._sources = null;
if(sources.constructor==Array) {
this._sources = sources;
}else {
this._sources = new Array();
}
}

diqye.html5.video.Stroe.prototype.getLength = function() {
return this._sources.length;
}

diqye.html5.video.Stroe.prototype.add = function(source) {
return this._sources.push(source);
}

  diqye.html5.video.Stroe.prototype.get = function(index) {
return this._sources[index];
}
diqye.html5.video.Stroe.prototype.sort = function() {
this._sources.sort();
}



上述代码我只做了部分功能,以后会全部实现的

至于GpsDirectory 类 还没来得及写  不过已经构思好了

如图:

实现功能:类似Win7中导航栏

[img]http://dl.iteye.com/upload/picture/pic/113674/e9c95a45-bc1a-315d-b2ed-c98effcdc1aa.jpg" alt="构思图" width="710" height="605[/img]

http://www.diqye.com