Html5 Tutorial - Future Technology

Friday, 28 December 2012

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

<meta name="viewport" content="width=320; user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<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">
"deviceready", console.log('ready'), true);

playVideo(vidUrl) {;

<body onload="init();">
<a href="#" onclick="playVideo('')">Play HTTP</a><p/>
<a href="#" onclick="playVideo('')">Play File</a><p/>
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.
  1. 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>
  2. Create a directory within your project called "src/com/phonegap/plugins/video" and move into it.
  3. In your res/xml/plugins.xml file add the following line:
    <plugin name="VideoPlayer" value=""/>

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
Sample use:"");"file:///path/to/my/video.mp4");;

No comments:

Post a Comment