Results 1 to 7 of 7

Thread: How to include Youtube? Is the API the answer? Is it compatible to Cordova/Phonegap?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default Answered: How to include Youtube? Is the API the answer? Is it compatible to Cordova/Phonegap?

    Hi there,

    like many others here in the forum I have issues with including Youtube into my app, because of the scrolling problem. I tried a lot of workarounds, but none did the job (at least with ST 2.4.2). Some just did nothing, others fixed the scrolling problem, but removed the play button to start the video.

    Now I'm thinking about using the Youtube API. But I guess it's a lot of work to get into it and I don't even know if that will fix my problem at all? And if it will work with Cordova/Phonegap later on?

    I'm using the Facebook API + Cordova plugin and it's a mess. I wouldn't want to include another mess.

    How do you include Youtube into your apps? What's the proper way? Does the API help?

    Thanks for all suggestions,
    Marco

  2. Just got a hint today which worked well for iOS & Android

    Include 2 Cordova players:
    - cordova plugin add https://github.com/Glitchbone/Cordov...ideoPlayer.git
    - cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git

    Then open videos with:
    Code:
    if (Ext.os.is.ios) { 
    YoutubeVideoPlayer.openVideo(videoId); 
    } 
    else { 
    VideoPlayer.play('https://www.youtube.com/watch?v=' + videoId); 
    }
    That's it. Videos will then play in fullscreen mode.

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default

    See here, there are numerous ways of doing it however some of the examples use the old API so links won't work and you'll have to adapt them to the new API: https://www.sencha.com/forum/showthread.php?302495-Load-external-content-in-to-panel-(sencha-touch-2-cordova)

    The search function of the forum seems to be broken to find the relevant links, so try google searching the sencha site instead

    :-)
    I got tired of my stupid username :-)

  4. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Apologies for the search being down. It seems to be working for me now. Please post back if you are still seeing problems. Thanks.

  5. #4
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default

    Sorry, I may not have been specific enough: I can embed Youtube iFrames in my app, which works fine on desktops and Android devices. But it's not working correctly on iOS (after compiling with Cordova), because the video iFrame catches the the focus from the app and has issues on starting and stopping. It's just not working right.

    Including the Youtube API works as long I stay on desktops and don't compile with Cordova.

    Couldn't find out how your script does actually PLAY the videos. Ok, I can browse Youtube and display videos in a list. What then? How to PLAY the videos? That's where my problem starts (at least on iOS).

    Any hint is highly appreciated.

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Have you tried this?

    I've not played with Youtube and Sencha since the new Youtube API, but have you seen if something like this solves the issue? It uses a bit of Jquery though which seems odd, but maybe it will give you some inspiration. What it essentially does is grabs the thumbnail from the JSON feed and on tap adds the iFrame to the DOM, thereby avoiding the scrolling behaviour you are experiencing:

    https://github.com/alexkravets/sencha-youtube-videos


    :-)
    I got tired of my stupid username :-)

  7. #6
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default

    I tried it but after starting the video playback I'm not able to stop it (even on desktops). And scrolling the page down isn't possible. I see that there's more videos, but when trying to scroll the page just snaps back.

  8. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default Youtube working

    Just got a hint today which worked well for iOS & Android

    Include 2 Cordova players:
    - cordova plugin add https://github.com/Glitchbone/Cordov...ideoPlayer.git
    - cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git

    Then open videos with:
    Code:
    if (Ext.os.is.ios) { 
    YoutubeVideoPlayer.openVideo(videoId); 
    } 
    else { 
    VideoPlayer.play('https://www.youtube.com/watch?v=' + videoId); 
    }
    That's it. Videos will then play in fullscreen mode.

Similar Threads

  1. Cordova |PhoneGap - Build > "cordova is not defined"
    By lstolz in forum Sencha Touch 2.x: Q&A
    Replies: 6
    Last Post: 23 Jun 2014, 11:09 PM
  2. Integrating phonegap.js in sencha touch 2.1.0 > not compatible ?
    By gamani in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 30 Jan 2013, 4:21 AM
  3. Vimeo/Youtube scroll whole app in Phonegap + Sencha iframe
    By QMG in forum Sencha Touch 2.x: Discussion
    Replies: 5
    Last Post: 8 Jan 2013, 5:59 PM
  4. Is Sencha Touch 2.0 compatible with Phonegap 1.6
    By serdemwigi in forum Sencha Touch 2.x: Q&A
    Replies: 7
    Last Post: 19 Apr 2012, 4:42 AM
  5. Displaying YouTube video in Android via PhoneGap
    By mobitinker in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 28 May 2011, 10:14 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •