phonegap實現視頻上傳後顯示播放

原創

2020-02-21 17:24

用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>