phonegap实现视频上传后显示播放

    用phonegap成功实现视频上传之后，我需要在jsp页面中显示上传好的视频，并且能够点击播放。

    一开始，我打算用phonega直接调用安卓的播放器，这就需要实现播放视频的js及其对应的java类。如果把这个实现了，估计phonegap的插件开发大体也就熟悉了。看了下phonegap中的js代码，发现用的是面向对象思想，和ExtJs中的相似，有类、构造函数等。

    找到一个相关的帖子，网址见关于PhoneGap视频插件。这个我还没有实践做好，那个帖子是2012年，至今phonegap应该有所变化，完成之后再发个博客说明下。

    上述方法有点麻烦，而HTML5本身就有能支持视频播放的标签：video，当前，video 元素支持三种视频格式，如下：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

  使用方法为：

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

    由于我用手机上传的视频格式是3gp的，试了下在上述浏览器中不支持，本来还在困扰这个问题该怎么解决，难道还要自己去实现phonegap的视频插件，然后调用安卓自身的播放器？抱着试试看的态度，发现在手机端运行页面的时候是可以播放3gp格式的视频的，我就暂且这么做，遇到问题再解决。

    这里我将视频上传至服务器之后，然后获取其在服务器端的地址，即url，放入video的src便可。因为显示页面是服务器端的，由web应用的同源策略可知，不能将视频在手机中的路径给src，否则不能显示。不过，我想应该可以通过phonegap获取手机的视频文件来显示吧，对于这点还未实践，不敢妄下结论。

    javascript代码如下：

    /*捕获视频并上传*/
    function captureVideo() {
		navigator.device.capture.captureVideo(captureSuccess, captureError, {
			limit : 1
		});
	}

  //captureVideo方法执行失败后回调函数  
	function captureError(error) {
		var msg = 'An error occurred during capture: ' + error.code;
		navigator.notification.alert(msg, null, 'Uh oh!');
	}
	function captureSuccess(mediaFiles) {
		var i, path, len;
	//	alert(mediaFiles.length);
		for (i = 0, len = mediaFiles.length; i < len; i += 1) {
			//对应的逻辑内容       
			path = mediaFiles[i].fullPath;
			uploadVideo(mediaFiles[i]);//上传视频文件
		}
	}
	//将视频显示出来  
	 function displayVideo() {
		 var beforeVideo = document.getElementById('beforeVideo');
	     beforeVideo.style.display = 'block';
	     var videoPath="<%=session.getAttribute("uploadVideoPath")%>";
	     beforeVideo.src = "http://<%=request.getAttribute("ip")%>:<%=request.getAttribute("port")%>/fire"+videoPath; 
	 }
	 
	function uploadVideo(mediaFile) {
		var path = mediaFile.fullPath,  name = mediaFile.name;
	     
		var ft = new FileTransfer();
	  	ft.onprogress = showUploadingProgress;
		navigator.notification.progressStart("", "当前上传进度");
		var options = new FileUploadOptions();  
	    options.fileKey = "indexFile";  
	   	options.fileName = name;  
	    options.mimeType = "multipart/form-data";  
	    options.chunkedMode = false;  
	    var params = {};
		params.value1 = "test";
		params.value2 = "param";
		options.params = params;

		ft
				.upload(
						path,
						encodeURI("http://<%=request.getAttribute("ip")%>:<%=request.getAttribute("port")%>/fire/VideoUploadForIndex.action"),
						function(result) {
							console
									.log('Upload success:'
											+ result.responseCode);
							console.log(result.bytesSent + 'bytes sent');
							 displayVideo();//显示视频
							 navigator.notification.progressStop(); 
							 alert("视频上传成功");
							 
						}, function(error) {
							alert("An error has occurred: Code = " + error.code);
							console.log("upload error source " + error.source);
							console.log("upload error target " + error.target);
						}, options);
	}

html对应部分代码如下：

<video
								src=""
								id="beforeVideo"
								style="margin-left:30px;width:240px;height:240px;border:1px solid black; display:none;text-align:center"
								controls="controls"> Your browser does not support the
							video tag. </video>
							<button type="button" οnclick="captureVideo();">拍摄视频</button>