PhoneGap display playback after video upload

After successful video uploading with PhoneGap, I need to display the uploaded video in the JSP page and be able to click play.

At first, I was going to call the Android player directly with Phonega, which would require the implementation of JS and its corresponding Java class for playing video. If this is achieved, it is estimated that phonegap plug-in development is generally familiar. Looking at the JS code in PhoneGap, we find that the object-oriented idea is similar to that in ExtJS, there are classes, constructors and so on.

Find a related post at the URL see about phonegap video plugin. This I have not done a good job, the post is 2012, so far phonegap should have changed, after the completion of a blog to explain.

The above method is a bit of a hassle, and HTML5 itself has the ability to support video playback of the tag: videos, currently, video elements support three video formats, as follows:

format	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 = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG4 = MPEG 4 file with H + video encoding and AAC audio encoding

WebM = WebM files with VP8 video encoding and Vorbis audio encoding are used as follows:

<video src= "Movie.ogg" width= "" "height=" controls= "Controls" > Your browser does not support the
video Ta G.
</video>

Because I use the mobile phone upload video format is 3GP, tried under the above browser does not support, it is still troubled by this problem how to solve, it is also to implement the PHONEGAP video plug-in, and then call the Android own player. Holding a try attitude, found in the mobile phone run the page when the video can play 3GP format, I will do so for the time being, encountered problems to solve.

Here I upload the video to the server, and then get its address on the server side, that is, the URL, into the video src will be. Because the display page is server-side, by the Web application of the same-origin policy, the video can not be in the phone's path to SRC, otherwise it cannot be displayed. However, I think it should be possible to get a video file of the phone through phonegap to show it, for this has not been practiced, dare not jump to conclusions.

The JavaScript code is as follows:

    /* Capture Video and upload */function Capturevideo () {Navigator.device.capture.captureVideo (capturesuccess, Captureerror, {L
	Imit:1}); The//capturevideo method fails after the callback 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) {//corresponding logical contents PATH = Mediafiles[i].fullpath; Uploadvideo (Mediafiles[i]);//upload video file}}//Display the video function Displayvideo () {var beforevideo = Document.geteleme
	     Ntbyid (' 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 ("", "Current upload progress");  
	    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 ();//Display video navigator.notification.progressStop ();
							 
						Alert ("Video upload succeeded");
							}, 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); }

The HTML corresponding section code is as follows:

<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 ();" > Shooting Videos </button>