Intel XDK: Controls 5: Using the You Tube widget
This post is about the You Tube widget in Intel XDK. A new version has been released:
Release date: May 19 2016
Version: v3357
Intel XDK Cloud services is undergoing significant changes and it is a recommendation from Intel XDK to use this latest version. A few new features have been added to the DEVELOP tab in the user interface and the rest about bug fixes.
Start a new project using Standard HTML5 choose App Designer 3. The project is named
TestYouTube.
The project is just a bare bones HTML project with the main page, index.html.
However, it has references to these script files and no other content in the body of the index.html:
-------------
cordova.js js/app.js js/init-app.js xdk/init-dev.js--------------------------
Add a header (optional) to keep track of your project.
YouTubeDemo_00
Click on YOUTUBE in the MEDIA folder.
YouTubeDemo_01
Drag it and and drop it on the page in DESIGN view.
It actually drops a iFrame widget (uib_w_2) and provides a default source shown below:
YouTubeDemo_011
What you would see in index.html will be the following:
YouTubeDemo_03
Click on the YouTube widget in MEDIA and click Contextual tab on the bottom pane. You get the complete referencce to the YouTube JavaScript API Reference as shown.
YouTubeDemo_04
YouTubeDemo_05
The JavaScript API details:
"The JavaScript API allows users to control the YouTube chrome-less or embedded video players via JavaScript. Calls can be made to play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions."
The player requires Flash Player 10.1 higher. Read the JavaScript API Reference for more details.
Actually this is all that is needed to launch the app.
Click on emulate to bring up an emulator of your choice.
YouTubeDemo_06
Intel App Preview which is supposed to bring the app to the device over the Internet is working neither in the Apple Phone iPhone 6 or the Microsoft Lumia 950. It is either broken or has not been updated.
You can add the You Tube video of your choice to the app by substituting your video in the src of the iFrame.
TAB BAR Control in App Framework 7 here:
Comments