js兑现同步服务器目录
日期：2014-05-16 浏览次数：20402 次
js实现同步服务器目录
最近买了一台16G的Ipad2 想用Ipad看视频但又舍不得把内存都浪费在视频上, 想起一方法,利用自身的优势做一个网页来同步Webapps下的目录, Ipad中用的是Safari浏览器,它支持HTML5的Video 标签 (只支持MP4格式的视频),这样就好办了只要我将Src属性指向我webapps下的mp4文件 就能播放了.
但是我想做的灵活一点,好用一点 我想在页面上显示我webapps下的目录,点击任意mp4文件就能播放,点击文件夹进入文件内部. 这些功能都在同一个页面内实现,这样少不了用大量的Js ,Ajax也要用到. 与其乱写一通倒不如对上述功能封装成几个JS类供自己调用(先声明本人是菜鸟,希望各位看了能提点意见).
下面是我的思路:
需要建立三个类 : Video 主要用来实现播放视频,切换视频以及视频 连续播放 以及一些需要用到的媒体事件等功能
Stroe? 用来存储当前目录的视频 以供Video类使用
GpsDirectory 用来同步服务器目录 根据目录中的内容改变stroe中的资源
以下是今天写的代码(不全,等整好会补全的)
?
?测试代码:
<html>
<head>
<title>test</title>
<script type="text/javascript" src="diqye_video_1_0.js" ></script>
</head>
<body>
<video id="myVideo">
your browser does not support this tag!
</video>
<input type="button" value="pause" onclick="doPause()"/>
<input type="button" value="play" onclick="doPlay()"/>
</body>
<script >
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));
}
</script>
</html>
? js代码:
?
//由于本机上面中文编码出了点问题所以注释很少
console.log("entered dqye js file");
//模拟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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
