PhoneGap Tutorial: Html5 PhoneGap app - how to play video example and tutorial




Title : Html5 PhoneGap app - how to play video example and tutorial



Hi , i am going to explain how to use html5 new video tag in phonegap particularly on android device.



here is the screen shots of playing a video in android mobile from a url.













Here is the code for the app.



create html file with name index.html with the following code






<!

DOCTYPE HTML>

<
html>




<head>




<meta name="viewport" content="width=320; user-scalable=yes" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>PhoneGap</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>

<script type="text/javascript" charset="utf-8" src="video.js"></script>


<
script type="text/javascript">






function

 init(){ 


document.addEventListener(
"deviceready", console.log('ready'), true);


}





function

 playVideo(vidUrl) {


window.plugins.videoPlayer.play(vidUrl);

}



</

script> 





</head>




<body onload="init();">




<a href="#" onclick="playVideo('http://www.youtube.com/embed/9HDeEbJyNK8')">Play HTTP</a><p/>

<a href="#" onclick="playVideo('http://broken-links.com/tests/media/BigBuck.m4v')">Play File</a><p/>





</body></

html>

Next add cordova video plugin for your app for adding plugin see the following steps.



for adding videoplayer plugin visit the following link Cordova VideoPlayer Plugin



VideoPlayer plugin for Phonegap

The video player allows you to display videos from your PhoneGap application.

This command fires an Intent to have your devices video player show the video.


Adding the Plugin to your project
Using this plugin requires Android PhoneGap.


To install the plugin, move www/video to your project's www folder and include a reference to it in your html file after phonegap.js.

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="video.js"></script>
Create a directory within your project called "src/com/phonegap/plugins/video" and move VideoPlayer.java into it.
In your res/xml/plugins.xml file add the following line:

<plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>


Using the plugin
The plugin creates the object window.plugins.videoPlayer. To use, call the play() method:

  /**
    * Display an intent to play the video.
    *
    * @param url           The url to play
    */
  play(url)

Sample use:

window.plugins.videoPlayer.play("http://path.to.my/video.mp4");
window.plugins.videoPlayer.play("file:///path/to/my/video.mp4");
window.plugins.videoPlayer.play(file:///android_asset/www/path/to/my/video.mp4);
Html5 Tutorial - Future Technology

Friday 28 December 2012

Html5 PhoneGap app - how to play video example and tutorial

Adding the Plugin to your project

Using the plugin

No comments:

Post a Comment
