Clever Geek Handbook

Youtube video in iphone phonegap app

I'm sorry to come back to this topic again, but I'm really upset !! I have read every resource I have found googling on the internet, but I have not been able to find a definitive answer to my problem.

Problem Description
I am creating an iphone application with Telephony 1.0. In this app, one tab is for the rss feed from my YouTube channel and I want my users to be able to play these videos by clicking on a specific entry. Question: is it possible? A better solution would be to play the video inside the app, but displaying a thumbnail and redirecting the user to the native YouTube app is also acceptable (although in this case, I want the control to return to the original app when youtube finishes playing the video).

Trial Solutions
Searching the internet I found several solutions and people say these solutions work for them, but none of them work for me!

  • use the "object" tag, i end up with a white screen

    <object id="video" width="296" height="100%" data="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash">
    <param name="allowfullscreen" value="true" />
    <param name="src" value="http://www.youtube.com/v/gDjb9RVMF4c" />
</object>

  • using the "embed" tag i end up with a white screen

    <embed src="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="100%"></embed>

  • I have also tried the "video" tag, but as far as I understood it is still not possible.

I'm sorry if I missed a solution already written somewhere, but trust me ... I did my homework before asking :-) thanks !!

+2


source to share


4 answers


Here is a good tutorial that saved my day

http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/

Also I am sending some codes For quick access.

<html>
    <head>
        <title>YouTube video</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script src="phonegap-1.2.0.js"></script>
    </head>
    <body>

        <iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>

    </body>
</html>


Then make the following changes to Phonegap.plist

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com

The video will also play on your simulator.

+5


source


Besides usage, <iframe> ... </iframe>

you also need to set the property OpenAllWhitelistURLsInWebView

to YES

in PhoneGap.plist

. This will show and play the video in the PhoneGap app itself. It is tested and verified.



+4


source


You can try including YouTube video as an iframe, I believe this is the recommended way to do it now:

http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html

<iframe src="http://www.youtube.com/embed/VIDEO_ID" class="youtube-player" type="text/html" width="640" height="385"  frameborder="0">
</iframe>
+3


source


Here is the component I used in my application. Made with YouTube's iFrame API .

0


source






More articles:


All Articles