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" onclick="captureVideo();">拍摄视频</button>