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>