QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Playing Videos in Intel XDK APP

Playing Videos in Intel XDK APP

video-player

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.

Screen Shot 2014-12-12 at 11.42.45 am

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);

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>

IMG_0566IMG_0567

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.

Dec 22, 2014Narayan Prusty
Storing Binary Files in RedisFacebook Style Chat Bubbles using CSS
Comments: 6
  1. ali
    4 years ago

    hi,, I just want to ask you Narayan that i have built an intel xdk app in i used iframe for embed youtube videos. it is playing cool in emulator but when i instal it to my device it just give me thumbnails and on clicking on video it dosent load or play. even i give CSP , help me brother.

    ReplyCancel
  2. Mauro
    5 years ago

    can you help me? i’m looking for how to retrive the local path of a video on android device?

    ReplyCancel
  3. Jose
    5 years ago

    Great tutorial, but doesn’t work for me. I think is a problem importing pluging since in js console if I write
    intel.xdk.player.playPodcast
    it return me:

    function () {
    console.log("appMobi.player.playPodcast is not implemented");
    return;
    // throw "not implemented";
    }

    Do you have any idea?? I have added Player plugin as in your img… thank you

    ReplyCancel
  4. Paolo
    6 years ago

    I thought I’d found exactly what I was after. But I’ve copied and pasted this code into my app as well as working through it line by line but when I press the Play Video button nothing happens but the button being pressed. Is there any reason for this?

    ReplyCancel
    • Narayan Prusty
      6 years ago

      Change the video file url. Its removed from my servers

      ReplyCancel
      • carlo
        5 years ago

        Here I have the same issue like Paolo. The URL plays fine in Chrome, so it should be ok. I would really like to make it work, as it is exactly what I needed. Could you help me please?

        ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 6 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Including Intel XDK Player Plugin
  • Video File Format
  • Playing Videos
  • Complete Source Code
  • HTML5 Video
Related Articles
  • Create a Music Player App using Intel XDK
  • Testing Intel XDK App on iOS Device using Ad Hoc
  • Record Video using Intel XDK
  • Playing Beep Sound using Intel XDK
  • Record Microphone Audio using Intel XDK
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license