Installation of the plugin is pretty simple:
1. To install the plugin, move www/video.js to your project's www folder and include a reference to it in your html file after phonegap.{ver}.js.
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="video.js"></script>
2. Create a directory within your project called "src/com/phonegap/plugins/video" and copy "src/com/phonegap/plugins/video/VideoPlayer.java" into it.
3. In your res/xml/plugins.xml file add the following line:
<plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>
Once installed you will be able to play a video by calling:
window.plugins.videoPlayer.play(url);The url parameter can be one of three types:
1. The file:// protocol to play something native to the device such as:
window.plugins.videoPlayer.play("file:///sdcard/MyMovie.mp4");2. The http:// protocol to play something on the internet such as:window.plugins.videoPlayer.play("http://path.to.my/file.mp4");3. The http:// protocol pointing to a video on YouTube such as:window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=E0UV5i5jY50");As long as your url has "youtube.com" and contains the video ID (i.e. the v parameter) the VideoPlayer should be able to start the YouTube app on your phone to play the video without any additional user interaction. However, if the phone does not have the YouTube app you are out of luck. In the future I may add a check for this that will ask the user to install the YouTube app first.Sadly at this point in time the VideoPlayer does not support playing videos from your android asset directory. That is an enhancement for a later date.
So, there you go a pretty simple and easy to use plugin which can get you unstuck if you really need to play a video in your Android PhoneGap application. Lemme know you feedback.
297 comments:
«Oldest ‹Older 201 – 297 of 297Hi Simon,
at first thanks for you plugin, it works very well on my android device.
One question, is there any output if the video is ended?
In HTML5 I use the following
Thanks in advance.
Best regards,
Daniel
@Daniel Schmidt
I think you forgot to escape the html you posted so it didn't come across in the comment. But to answer your question the activity is launched without looking for a result so there is no indication the video is ended.
Excellent plug in. Thanks for making it. Works like a charm.
You might want to update your instructions to refer to the new res/xml/config.xml instead of res/xml/plugins.xml for where to add the entry (Using cordova 2.1.0).
hello Mr. Simon
I've done all step what you said. but i want to paly video file from like sdcard/file.mp4 . i try that way
"file:///sdcard/MyMovie.mp4". and https://gist.github.com/1507162 according to your example.but it doesn't happened anything when i click it.wrong path? please help me..
@Charles
You should be able to play the file off the sdcard without any problems. Your path looks correct, are you sure the location/name is correct?
What do you see in "adb logcat" when you try to play the file?
@Brent Watson
That is a good idea. I may do a separate post on the change to config.xml and reference it from this one.
Hello Mr. Simon. Thank you so much for your reply. adb logcat shows like this..
"Unexpected token ILLEGAL at file:///android_asset/www/js/cordova-1.9.0.js:1012" when i click the link.
Please help me.
@Charles
What is at line 1012 of cordova-1.9.0.js? It seems like your file got corrupted somehow.
Hi Simon,
Great plugin. I have two short questions please.
1) I see a sign advertising from admob when I play a video. I assume its because we are using generic player so Google sets it automatically. I would like to remove it.
2) When I open the video I see on the upper left corner the name of the video. This name is extracted from the URI so is not well formatted. Can I push a title to the intent in oder to show the real Tittle?.
Thanks very much in advance.
Jose
@Jose Vigil
What native video player are you using? Mine doesn't have any of those "features".
Oh I see your answer now, thanks.
Ah I see now what my problem is. The application was linked to open video with the MX Video player. This is the result of a prompt that asks you to pick the player.
How can I allways run the video with the generic video player?.
Thanks very much,
Jose
@Jose Vigil
The short answer is you can't. Multiple apps can register for the intent that is fired to play video's. If the user has selected the default be ABC app then the video player will just use that app. If they haven't selected a default then a list of the available apps that can play video's are displayed.
If you go to Settings --> Applications --> Manager Applications --> MX Video player--> "Clear Defaults" button. It will stop the MX Video player from being the default choice.
Hi Mr Simon
Here is my error code
I/Web Console(306): Error: SyntaxError: Unable to parse JSON string at file:///android_asset/www/js/cordova-1.9.0.js:1012
Please Help Me Thought this
With best regards
@Charles
Again, what is at line 1012 of cordova-1.9.0.js?
HI,
I am new to this android development we am trying to show video in webview using html5, i am getting only video controls with media player symbol.
we used external javascript to call the video, i tried to use phonegap plugin but i am fail to use it..
we tested in android 4.0.4 version can any one please help me..
If possible plz send me the source code to the below mail id
andrew.paragonandro@gmail.com
Thanks..
@Andrew paragon
If you are using Android 4.x and want to use the video tag you must make sure that hardware acceleration is enabled in your AndroidManifest.xml. More details in my follow up blog post:
http://simonmacdonald.blogspot.ca/2012/10/partial-support-for-video-tag-in.html
Hi,
I am upgrading to PG 2.2, and there for also updating to the VideoPlugin 2.0..
But I get a error saying that :
import org.apache.cordova.api.Plugin;
The type Plugin is depriciated..
I will move to your new MonkeyPatching on the Video Tag.. But would like to do it one step of the time.
What am I doing wrong?
Thanks
Kim
@Kim Rasmussen
You aren't doing anything wrong. That's just a warning not an error and the project should still build. The Plugin class is deprecated but not going away for 6 months. You can still use the VideoPlayer plugin as is and someday soon I will update it to use the newer CordovaPlugin class instead.
Hi Simon,
Thanks for this plugin. And being so helpful with support. I have followed the installation process but it seems that its calling the default android player and it won't play 3gp from a server (i.e: http://my.vid.com/vid.3gp). I use the "window.plugins.videoPlayer" in javascript and it calls it fine but I dont think its your player because If I cancel it says error on "com.wise.movie_player". How can I make it play from your plugin? Im running the latest cordova and your 2.0 update. Thanks!!!
Hello sir,
When i am using this plugin, it plays only audio not video if i plays it from /sdcard and if i plays from http, there is streaming for a very short time and then message "this video cant be play", i am testing on emulator
1.is it emulator problem?
2.can we play http video on phone?
regards
vipin
@Vipin Garg
Sounds like the video encoding format is not supported.
@Michael W
My code just starts whatever the program for playing the video is on your phone. If the default video player can't play the file then you'll need to install another video playing app.
hello sir,
The plugin is working fine for /sdcard and http videos, but i am able to run only mp4 files, it is not supporting any other format, i want to know the formats supported by this plugin and if this plugin can not support other formats, what should i do to support them?
Hi,
I do not know what your requirements are for your app.. I have a app that runs on Android and iPhone, and I had a lot of issues sharing Videos between devices (Android 2.1 -> + iPhone 3s and up)
I finally found a format that can be played on all devices. .MP4 file - H.264 – Baseline Profile (BP)...
This will play on all devices.. Especially Android 2.1 and 2.2 is not the easy to get stuff to work on.
Here is the definitions from Android and iPhone
Android: http://developer.android.com/guide/appendix/media-formats.html#recommendations
iPhone: http://www.apple.com/iphone/specs.html (Scroll to Video Playback)
There is allot of products that can convert to this format I use good old Handbreak ( http://handbrake.fr/) and use the Android Mid. profile.
Regards
Hi Simon,
it is a great plugin. I need to display pdf files in my Phonegap project. After a lot of test i realized that pdf.js don't work with Phonegap/Cordova. Is there any plugin or alternative way to display pdf?
@Vipin Garg see @Kim Rasmussen's comment.
I don't actually create a video player I rely on what is installed on the phone. Android has a wonderful Intent system that makes leveraging other apps to do work for you.
@veselin vachev
Well there is one for iOS:
https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer
Thanks for the answer Simon,
i found 1 more alternative for pdf files - google docs viewer (but you must be online).
One more question - can i interrupt the plugin before the end of the video? Something like:
var t= setTimeout("alert("end")",3000);
window.plugins.videoPlayer.play("myfile"]);
I want to see the alert if the video is longer then 3 sec.
Is there way to stop it and go back to the app, or to know when i'm back to my app?
Hi Simon, I'm a fan of your work and you helped a lot, I tried to install the VideoPlayer plugin, I follow the procedures but when I try to execute I get the Error: Status=2 Message=Class not found at file:///android_asset/www/cordova-2.1.0.js
I figured out what my problem was, I have the cordova-2.1.0 so I have to add the plugin to the config.xml not plugins.xml
@veselin vachev
No there is nothing in the plugin to be able to cancel the video play before it's time. You'd need to click the back button.
Hello Simon,
I've done everything you mentioned in your post, but I get the following problem when I click on your link:
Applicatin Error
The requested file was not found. www/window.plugins.videoPlayer.play("(file:///android_asset/www/window.plugins.videoPlayer.play(%22http://www.youtube.com/watch?v=Uz1tcFOrm28))
Dreamweaver said there was a syntax error in line 4 (in the video.js file), but it made no sense, it still allowed me to use the plugin.
My full html code (not the entire, but relating to this one) looks like this:
"< p > < a href=window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=Uz1tcFOrm28")>Watch< /a >< /p >"
(I have inserted some spaces, because this comment post where I am writing doesn't let me post html tags)
Thanks for your help in advance
@Barni
Your url src is wrong. It should be:
javascript:window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=Uz1tcFOrm28")
Hi Simon,
thanks for great work you have done.
I want to ask how I can implement Ustream player through this video. (live streaming) ?
@Firas khalifeh
No, you'd have to write your own plugin to launch ustream.
https://groups.google.com/forum/?fromgroups=#!topic/appinventor/d7SkNa_5hgo
Hi,
i have a problem with your plugin.
Videoplayer play correctly but i've a problem with back button and player history.
I've a lot of video in nested list and use device back button to return to previuos menu item and browse the list.
When i play a video in this nested list , it play correctly. I click back button, browser again my list, and play second video without problem.
But when i click backbutton again , videoplayer go to previous video not to nested list ! Then if a play a 3th video, when i try to come back to nested list a must click back 3times skipping all videos that i saw ./
So, my question is: there is a way to clear or control VideoPlayer history ?
I test the app in LG5 Optimus
@Simon greetings from india thanks a lot for this article :)
@Luigi Montella Velluti
Sorry once in the video player application the back button handling is ceded to the whatever app handles the playback of videos.
I am new to phonegap and I am buiding a project using eclipse, I did not understand where to place the videoplayer.java file, as in the project structure we already have an src folder which contains the MainActivity.java file.I did not understand how to create the src/com/phonegap/plugins/video folder structure.
pls help me out on this..
thanks in advance...
@kiran
http://help.eclipse.org/galileo/index.jsp?topic=/org.eclipse.platform.doc.user/tasks/tasks-43.htm
Hi Simon! I follow your job and it helps me hard.
But now I can not plays video using your plugin. I followed every steps, I used these folders: assets, libs, res and src, put all on zip file and builded them in Phonegap build, but the movie doesn't played. Therefor when I used youtube file or local file, nothing happened. After this, I put alert(window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=E0UV5i5jY50")); and return undefined.
Could you help me?
@TIC.World
To the best of my knowledge PhoneGap Build does not support the VideoPlayer plugin. Although, I don't use the build service nor do I have anything to do with it.
Hi,
Youe I really would like that as well.. I have looked at the Plugin definitions on the Build service, and since the Video Plugin is fairly simple I do believe that you should be able to build a plugin definition fro it, I have just not tried it.. But looking in the childbrowser plugin.xml: https://github.com/alunny/ChildBrowser
I would say it is doable.
Let eme know if you start looking at it, it would be a nice add on..
Thanks
Kim
Hi. Plugin works great so THANKS A LOT. Right now I've discovered the strange problem solution: some kind of videos work and other don't (both MP4 format and playables directly by mediaplayer instead of by phonegap app by VideoPlayer plugin) so I couldn't understand what the problem was. Times when video play failed the message was "This video cannot be played". The problem was different video names between phonegap project and device file system (video play failed only when names were different obviously). So guys pay attention file names.
Regards.
any hope in playing video from inside the www folder ???? [ thanks for plugin works like charm ]
Hi Simon! THANKS ALOT for your answer. Finally I can play videos on my app. But I have a new question. How can I play videos from Vimeo? I tried using your plugin but I had no results.
@robo
Yes, the ability to play videos from the www folder was added to the plugin. What actually happens is the plugin copies the file from the www folder to the internal storage of the device in order to play.
@TIC.World
Sorry no support for Vimeo right now. Anyone want to add a patch?
Hi Simon,
I struggled all afternoon trying to get your plugin working and eventually in despair rewrote the js file to mirror the emailComposer plugin that did work so I now have this:
VideoPlayer = function () {};
VideoPlayer.prototype.play = function(url) {
cordova.exec(null, null, "VideoPlayer", "playVideo", [url]);
};
cordova.addConstructor(function(){
console.log("********asc********************");
if(!window.plugins) {
window.plugins = {};
}
// shim to work in 1.5 and 1.6
if (!window.Cordova) {
window.Cordova = cordova;
};
window.plugins.videoPlayer = new VideoPlayer();
});
For reasons I cannot fathom this now works! Previously the plugin wasn't being installed and I was getting the can't execute the play method of undefined error that several posters have commented on.
I'd be interested if you can see why this should have made things work - I'm running v2.2
Thanks for all your efforts.
Andrew Cooney
HI,
When video is playing.. Is the app paused?, Can I detect end video event?.
Thanks
@Pep
The app is paused. The way the plugin is coded it doesn't detect you've gotten to the end of the video.
@Andrew Cooney
Well the reason you needed to add the shim is that windows.plugins was deprecated out in Cordova 2.0.0. There is new cordova.require/define methods that we are headed towards. Check out my latest update to the VideoPlayer which is for 2.2.0 and greater.
However, what you've done is perfectly fine.
I just made a code change to the VideoPlayer which should make it backward compatible with the old window.plugins.videoPlayer way of doing things. If you are using the 2.2.0 version of the plugin go get the new JS file.
https://github.com/macdonst/VideoPlayer/blob/master/2.2.0/www/video.js
Hi Simon,
what about how to play a "rtsp" for streaming video? Do you think it's possible to modify this plugin to do this?
Because just givin a "rtsp://...file.sdp" it doesn't work.
I can't figure out why.
@Dex
The plugin does not support rtsp. You'd have to add some Java code to handle this using a MediaPlayer class.
I'm developing an application using phonegap android for palying youtube videos and I have a problem with the Android video Player Phonegap plugin
I have already done the 3 steps defined in the README to install the plugin but it doesn't work on my phone and on the emulator. I just load the Javascript (video.js) after (phonegap.js) . But when I am trying trying to run my project I have this error:
02-01 13:10:36.742: E/Web Console(8848): Uncaught TypeError: Cannot call method 'play' of undefined at file:///android_asset/www/index.html:100
@Nikhil Agrawal
It sounds like window.plugins is not defined. What version of PhoneGap are you using and what version of my plugin are you using?
Hi Simon,
Thanks for the great plugin. I am able to play Youtube videos without any issues but can't play an RTSP stream. I looked at the code and it appears that an ACTION_VIEW intent is launched with data type set to "video/*". Here is the RTSP stream that I am trying to play:rtsp://media2.tripsmarter.com/LiveTV/BTV/
I can play this with a native app using VideoView and MediaController. I am using Cordova 2.4
Thanks
@Ravi
Try installing a 3rd party program like MoboPlayer to handle the rtsp stream.
Hi Simon,
I am tried all the options to play the video - but nothing seems to work.
Since phonegap-1.1.0.js is not available now, I downloaded cordova-2.3.0.js and implemented as suggested in the link below.
https://gist.github.com/macdonst/1507162
But when I click the link - nothing is happening...
It will be kind enough if u could provide the details:
1. Pls mention the (which [available] version)to use.
2. What steps to follow.
3. The sample code
I have 100s of trials & it will be kind enough if you could extend your help...
Thanks,
Tom
@Tom seb
As long as you are referring to the cordova-2.3.0.js file correctly in place of phonegap-1.1.0.js then you should be okay to use my example. What do you see in "adb logcat"?
Hi Simon,
Plugin works great, but I'd like to use it inside a div-box in a page instead of full-screen. Is there a way?
Thak you,
M
@emme
Not with the plugin. You may have some success with the video tag in the latest versions of PhoneGap though.
http://simonmacdonald.blogspot.ca/2012/10/partial-support-for-video-tag-in.html
Hi Simon,
Thanks for your plugin! It's very useful! It helps me a lot!
Do you have any idea how I could add subtitles to a movie in your video player?
Regards from Romania
@mihai costea
I'd install VLC for Android
http://www.videolan.org/vlc/download-android.html
which can handle subtitles. When the video player plugin starts you should be able to start it from the list of available programs to play the video.
Hi,
I'm developing an android app using cordova 2.4.0 and jquery mobile 1.3.0. I set the screen orientation in portrait mode but I would like to force it in landscape if I'm watching a youtube video in fullscreen mode. I embedded a video with iframe tag. With my configuration I try to watch a video in portrait only. Can you help me?
@domenico maiuri
If you are opening the YouTube video in an iframe then you can't force the activity to be in landscape. You'd need to have the main activity in portrait and start a new activity in landscape mode to view the video.
heya simon,
i have setup the file correctly but i am getting this error please do help me
Uncaught TypeError: Cannot read property 'videoPlayer' of undefined at file:///android_asset/www/index.html:18
@arpit choudhary
Are you sure you are using the right version for the version of PhoneGap you are using?
Hi, I have followed your tutorial exactly, but the page with the video on won't load at all?
Can you think of a reason why this might be the case?
Thanks
@Wayneio
What do you see in "adb logcat"?
Would appreciate any help on this.
This plugin works fine with most of the videos except the https:// videos. When playing an https:// video I get the following error:
'No Activity found to handle Intent {act=android.intent.action.VIEW dat=https://...'
This is the code that's failing:
Uri uri = Uri.parse(url);
intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(uri, "video/*");
this.cordova.getActivity().startActivity(intent);
Thanks
@Raj
It's not the code it's Android. You don't have an app installed on your device that can handle playing a video over https. You should probably just use http instead.
@Simon
Thanks for the quick reply. As per Android docs HTTPS is supported in 3.1 and above. However, I am unable to play videos on 3.1 and above too. Is there anything I need to change in the plugin to make it work in 3.1 and above?
Regards,
Raj
@Raj
The operating system supports https just fine. What I am saying is there is no app installed in order to handle a view intent of type video with a https url. You'll need to find one that does or switch to http.
Hi simon, I am big fan of yours every time when i search about phonegap i came on your blog.
I am new to phonegap i need your guidance. I am currently working on a project which is play youtube video but it use default player of device. Please provide me reference of your sample code of a full project (phonegap) which is useful for me.
@Navjot Singh
I don't have time to pull together a full project but this post and this link should get you what you need:
https://dl.dropboxusercontent.com/u/887989/video.html
I used your plugins(2.2) on Andriod 4.1 and my phonegap is version 2.2.
I follow your steps but it still didn't work.
LogCat show this message:
Cannot call method 'play' of undefined at file
It means I didn't define the Plugin?
Any idea why I can't make it works?
Hi Simon,
I want to ask that can videos from different websites like metacafe,dailymotion,yahoo video etc. can be played using the urls just like youtube in phonegap.
Thanx
Ankit Rawat
@Jean Yan
Doesn't seem like you are including the JS file correctly.
@Ankit Rawat
Certainly it is possible but there is no code in the VideoPlayer to handle it right now. If you have a player that can play video's on those sites it could be possible to add that functionality to the VideoPlayer.
Any chance this will be updated for PhoneGap 3.0? Or is this no longer needed? An initial test on Android with PhoneGap 3.0 did show my standard HTML5 tag still fails so I'm guessing (dreading) that there is still an issue that makes this plugin necessary?
@Chris
Yup, still needed in many cases. I will get around to upgrading all my plugins as soon as I have a bit of time.
Hi Simon.
First of all, thanks for your great blog and your development efforts!!!
I've developed an app for iOS that needs to know whether the video has ended in order to display a message.
Is there a way of doing this???
@MagicWences
Sorry, I haven't worked with Video on iOS. Are you using a video tag?
Hi Simon -
Is this video plugin compatible with PG v3.x?
Thanks -
Dough
@Doug Millasich
Not yet. I haven't had time to go back an update all my plugins to 3.0.0 compatibility. Busy at work and doing my speech rec plugins first.
I have modified this plugin to use the new phonegap 3.0 structure.
See: https://github.com/justinobney/PhoneGap-Video.git
Install via:
phonegap local plugin add https://github.com/justinobney/PhoneGap-Video.git
@Jay3917
That's great but why didn't you just submit a pull request to my repo?
@jay3917 - THANKS!
I seem to be missing the org.apache.cordova.api package. Any idea how to acquire this?
@Josh Bjelovuk
If you are using 3.0.0 or higher the package is now org.apache.cordova.
Thanks Simon. So I've got a new problem. When I play larger videos (say 100MB) over http(s), it waits a while and then eventually gives me "Sorry, this video cannot be played". On the server I get a ClientAbortException. Any idea what's going on here, and how I can get it working?
Here's what I i get in LogCat:
12-18 19:21:32.270: W/PluginManager(4849): THREAD WARNING: exec() call to VideoPlayer.playVideo blocked the main thread for 33ms. Plugin should use CordovaInterface.getThreadPool().
12-18 19:21:32.360: W/InputManagerService(145): Starting input on non-focused client com.android.internal.view.IInputMethodClient$Stub$Proxy@41271260 (uid=10017 pid=4849)
12-18 19:21:34.210: E/NuCachedSource2(84): source returned error -32, 10 retries left
12-18 19:21:34.210: E/MediaPlayer(8594): error (1, -2147483648)
12-18 19:21:34.210: E/MediaPlayer(8594): Error (1,-2147483648)
@Josh Bjelovuk
Hmm...I think that there is a bug in the WebView when dealing with large files being downloaded from Tomcat. Seems like the client, i.e. device gave up.
This appears to be an old post. I wonder if support for rtmp is now available in this.
Thanks
@Anjum Raheel
Nope and I have no plans to add support for it at this time. Anyone who wants to can always submit a pull request to repo with a fix.
Post a Comment