This post is a part 38 of Intel XDK Complete Tutorial post series.
In this tutorial we will look at Intel XDK’s Video player APIs. Most apps require video to be played therefore exploring this API is very important. In this tutorial we will first learn how to include Intel XDK video plugin in our app, then explore various video apis and then we will finish the tutorial by creating a video player app.
Including Intel XDK Player Plugin
Before we start coding you need to make sure you have included Intel XDK player plugin which exposes all the video APIs.
Video File Format
iOS supports the following video formats: H.264, MPEG-4 in .mp4, .m4v and .mov.
Android supports the following video formats: WMV, MPEG4, H.263, H.264.
Playing Videos
Intel XDK does provides APIs to play video like a video player app. Here is the code to play a video file using device’s default video player. Video player is launched inside the app and video is played.
function playVideo()
{
//this function launches default video player and plays the video.mp4 file.
intel.xdk.player.playPodcast("http://labs.qnimate.com/video.mp4");
}
document.addEventListener("intel.xdk.player.podcast.start", function(){
//started playing video
alert("start");
}, false);
document.addEventListener("intel.xdk.player.podcast.stop", function(){
//video finished or player closed
alert("stop");
}, false);
document.addEventListener("intel.xdk.player.podcast.error", function(){
//error occured therefore video cannot be played
alert("error");
}, false);
document.addEventListener("intel.xdk.player.podcast.busy", function(){
//another video is already being played
alert("busy");
}, false);
{
//this function launches default video player and plays the video.mp4 file.
intel.xdk.player.playPodcast("http://labs.qnimate.com/video.mp4");
}
document.addEventListener("intel.xdk.player.podcast.start", function(){
//started playing video
alert("start");
}, false);
document.addEventListener("intel.xdk.player.podcast.stop", function(){
//video finished or player closed
alert("stop");
}, false);
document.addEventListener("intel.xdk.player.podcast.error", function(){
//error occured therefore video cannot be played
alert("error");
}, false);
document.addEventListener("intel.xdk.player.podcast.busy", function(){
//another video is already being played
alert("busy");
}, false);
The video file must be there is local or remote web server because intel.xdk.player.playPodcast takes a complete URL to a video file for playing it. Some video apps allow users to download video files, in that case you need to download the file into WWW directory and then provide the localhost URL to the file.
When you move the app to background state or lock the screen the video pauses. The player changes its orientation if you rotate the mobile.
Complete Source Code
Here is the complete source of the app.
<!DOCTYPE html>
<html>
<head>
<title>Video Player</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="playVideo();">Play Video</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function playVideo()
{
//this function launches default video player and plays the video.mp4 file.
intel.xdk.player.playPodcast("http://labs.qnimate.com/video.mp4");
}
document.addEventListener("intel.xdk.player.podcast.start", function(){
//started playing video
alert("start");
}, false);
document.addEventListener("intel.xdk.player.podcast.stop", function(){
//video finished or player closed
alert("stop");
}, false);
document.addEventListener("intel.xdk.player.podcast.error", function(){
//error occured therefore video cannot be played
alert("error");
}, false);
document.addEventListener("intel.xdk.player.podcast.busy", function(){
//another video is already being played
alert("busy");
}, false);
</script>
</body>
</html>
<html>
<head>
<title>Video Player</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="playVideo();">Play Video</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function playVideo()
{
//this function launches default video player and plays the video.mp4 file.
intel.xdk.player.playPodcast("http://labs.qnimate.com/video.mp4");
}
document.addEventListener("intel.xdk.player.podcast.start", function(){
//started playing video
alert("start");
}, false);
document.addEventListener("intel.xdk.player.podcast.stop", function(){
//video finished or player closed
alert("stop");
}, false);
document.addEventListener("intel.xdk.player.podcast.error", function(){
//error occured therefore video cannot be played
alert("error");
}, false);
document.addEventListener("intel.xdk.player.podcast.busy", function(){
//another video is already being played
alert("busy");
}, false);
</script>
</body>
</html>
HTML5 Video
You can also play videos using HTML5 Video. The advantage of using HTML5 video is that you will be able to design your own interface as the above method provides a common interface.
@narayanprusty
