Watch YouTube videos in full screen

[Thiemo Melhorn]

How to enable this feature in my browser that I can use the fullscreen mode? I tried to do this with the example (see below) but it didn't work.

/*

 * This example lists and plays YouTube videos with

 * optional full screen mode. The videos are taken

 * from the DroidScript YouTube channel.

*/

//Initialise variables.

var isFullscreen = false

var videoIds = [

    "zZTs3bYRyzs", "AK31U2f1nl0",

    "cKzK4oqiDd8", "ZlojAcd9lGc" ]

var videoTitles = [ "Part 1", "Part 2", "Part 3", "Part 4" ]

//Called when application is started.

function OnStart()

{

 app.SetOrientation( "Portrait" )

 lay = app.CreateLayout( "Linear", "FillXY" )

 lay.SetChildMargins( 0.02, 0.02, 0.02, 0.02 )

 lay.SetBackColor( "#333333" )

 web = app.AddWebView( lay, 1, 0.4, "UseBrowser" )

 web.SetOnProgress( web_OnProgress )

 web.SetOnConsole( web_OnConsole )

 web.SetOnError( web_OnError )

 web.SetBackColor( "#000000" )

 title = app.AddText( lay, "Build a Password Vault", 1, -1, "Bold" )

 title.SetTextColor( "#FFFFFF" )

 title.SetTextSize( 22, "sp" )

 title.SetEllipsize( "End" )

 list = app.AddList( lay, videoTitles, 1, -1, "Bold" )

 list.SetHiTextColor1( "#FF0000" )

 list.SetOnTouch( list_OnTouch )

 list.SelectItemByIndex( 0 )

 list.SetEnabled( false )

 //Add layout to app.

 app.AddLayout( lay )

 //rel = If the parameter's value is set to 0, then the player does not show related videos.

 web.LoadUrl( "https://www.youtube.com/embed/" + videoIds[0] + "?&rel=0" )

}

function list_OnTouch( title, body, icon, index )

{

    list.SelectItemByIndex( index )

    //We can change the index of the video played by entering the YouTube player api on the page.

    //https://developers.google.com/youtube/iframe_api_reference

    web.Execute( "document.querySelector('#movie_player').loadVideoById('" + videoIds[index] + "')" )

}

function web_OnProgress( progress )

{

    //We cannot run our code until the page is fully loaded.

    //Wait until it is fully loaded.

    if( progress !== 100 ) return

    //Detect full screen click. In this way,

    //we can turn the screen sideways and enlarge it.

    var inject = 'document.querySelector("button.ytp-fullscreen-button.ytp-button").addEventListener("click", () => console.log("fullscreen"))'

    web.Execute( inject )

    list.SetEnabled( true )

    web.Show()

}

//We printed a message when the button was clicked to understand that the screen went into full screen mode.

//By detecting this, we can learn whether the button has been clicked or not.

function web_OnConsole( msg )

{

    if( msg === "fullscreen" ) goFullscreen()

}

function goFullscreen()

{

    isFullscreen = !isFullscreen

    app.SetOrientation( isFullscreen ? "Landscape" : "Portrait" )

    app.SetScreenMode( isFullscreen ? "Game" : "Normal" )

}

// If the screen is turned sideways,

//make the video full screen and hide the list.

function OnConfig()

{

    if( app.IsPortrait() ) web.SetSize( 1, 0.4 )

    else web.SetSize( 1, 1 )

}

function web_OnError( message, code )

{

 if( code === -2 )

 {

  app.Quit( "No network connection!" )

  }

}

[Right2TheV0id]

Nice sample :)

You have two solutions I guess:

1. Try to mimic this sample behaviour and inject javascript code to the youtube video page in order to detect the click on the "fullscreen" button. You can then inject another javascript code to hide all elements on the page except the video one and alter its size to make it take the whole screen. But this solution is not trivial and each time youtube will change something to the page code (which can happen often as youtube is actively developed) you'll have to re-engieneer the whole thing to try to make it work again.

2. You can accept that the DroidScript webview control can't display youtube video fullscreen from the "main" youtube site.

[Thiemo Melhorn]

And how is that supposed to work?

[Right2TheV0id]

I don't know much.

I personally chose option 2.

[Thiemo Melhorn]

And how does option 2 work?

[Right2TheV0id]

Option 2 is "You can accept that the DroidScript webview control can't display youtube video fullscreen from the "main" youtube site".

Nothing special to do (maybe just informing the user that fullscreen is not possible "the normal way").

[Thiemo Melhorn]

But according to the example above, it is possible. Since I can not implement this, I asked you.

[Alan Hendry]

HI,

There is an icon that will open the URL in the default browser 

(touch icon of three horizontal lines, then Chrome logo)

which should play videos.

There have been attempts to control the viewport and

detect touch of the full-size icon inside a YouTube.

Not sure if it's worth the effort to get YouTube's working inside a DS webview.

Regards, ah

[Thiemo Melhorn]

Ok! Is it possible to have the YouTube URL open in the YouTube app instead of the web browser with the URL or how could you adapt the code "var brow = newButton( use, "[fa-chrome]")
    brow.SetOnTouch( function () { app.OpenUrl(qwebs[qcurrent].GetUrl()); }" adapt for this purpose?

[Alan Hendry]

HI,

The icon currently opens the current URL in your default browser,

so it should be good for YouTube and remembering your inputs in cookies (like user IDs and passwords etc), full screen, ...

So I would not advise replacing the existing icon.

To open in the YouTube app, first check that the user has got the app installed,

 then extract the video ID from the URL,

 then issue an intent with the video ID (that will need research into YouTube app intents).

Regards, ah

[Thiemo Melhorn]

I can't do that from the code.

[Right2TheV0id]

For completion (and for fun) I made a proof of concept on how to open youtube videos in the youtube app from clicking on the fullscreen button on a youtube video displayed in a webview (from youtube's main site, not using the embeded player).

The spk works in mobile and desktop version of the site, but it doesn't check if the youtube app is present on the device.

Here are my observations/conclusions:

1. It was difficult to implement

2. This is an ugly solution

3. Some "clicks" are ignored from time to time

4. If youtube change a single letter on its button class names, it will be broken

5. It will work only for youtube, all other videos will still refuse to open in full screen (e.g: https://www.w3schools.com/html/mov_bbb.mp4)

I made it by adapting the sample Thiemo gave, so it would be nice to credit the person who wrote it.

As I don't know who it is I joined the original sample in the spk.

[Thiemo Melhorn]

Should I not use the example you gave?

 

[Right2TheV0id]

I personally won't recommend releasing something publicly using this hack if I believe that my users will critically need this feature.

I think it's better to warn them about the limitations of the app (preferably before they install it) instead of giving vulnerable solutions that I'll probably won't maintain in the future.

But if this is just for your personal use and if you want to explore things and challenge yourself, it could be fun to keep trying to find a solution.

This is two very different approaches with very different goals.

And this is just my personal opinion.

So in the end, it's up to you.

[Thiemo Melhorn]

Then best not after all.

[Alan Hendry]

HI,

The alternative would be to detect "YouTube" in the URL, extract the video ID,

and show a button for the user to open in the YouTube app (if installed)

or even open it automatically.

There are interfaces for the app, but documentation is hard to find.

This opens a DS tutorial video in the YouTube app

Regards, ah

 function OnStart() {

    var list =app.GetActivities();
   
    for(var i in list) {
        var a = list[i];
           l = a.label ;
           p = a.packageName ;
           c = a.className ;
          if (p.indexOf("youtube") > -1) {break;}
       }
//    app.SendIntent(p,c, "android.intent.android.settings.VIEW");
action="android.intent.android.settings.VIEW"
uri="vnd.youtube:Y5WU8d4NKNo"
app.SendIntent( p,c,action,null,uri )

}

[Thiemo Melhorn]

That you can do that with the full screen, unfortunately does not work on my Android 10 and also not on my Android 13 device. There is no error message or anything else.

[Alan Hendry]

Hi,

It appears that just opening a URL that is YouTube will automatically open the YouTube app (if installed), and otherwise open Chrome.

Regards, ah