cefsharp execute Javascript from C#

Question

I'm trying to play an online video in my windows forms application. I can successfully play the video but i'd like to make it fullScreen.

The url is this:

http://www.mitele.es/msplayer/popup/?editorialId=231609

I've been inspecting the site and I found that the code for the expand button is this:

<button ng-if="fullScreenBtIf" class="fullscreen-bt msplayer-icon-fullscreen ng-scope" title="Pantalla completa" ng-click="toggleFullscreen()" ms-skin-button="" style="color: rgb(5, 187, 237); opacity: 1;"><span class="screen-reader-text">Ir a pantalla completa</span>
</button>

CEFsharp is working fine as I have tested it with an alert:

myBrowser.ExecuteScriptAsync("alert('test');");

I've tried to expand the video player by doing:

myBrowser.ExecuteScriptAsync("toggleFullscreen();");

But i get that toggleFullScreen is undefined. Do you have any idea in order to achieve this?

Does the `Video` support any sort of shotcut keys? You can possibly send a key press or mouse click. — amaitland, Apr 07 '16 at 20:55

Reinstate Monica Cellio · Accepted Answer · 2016-04-07T15:10:32.363

2

Your problem is one of scope, but it's not possible to make it full screen without user input anyway. Open the video you linked, open the browser console and run this...

MSPlayer.scopes[Object.keys(MSPlayer.scopes)[0]].toggleFullscreen();

That executes the function in its correct scope, but will also explain to you why it can't run.

In Chrome...

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

However, since this is a Windows forms application you can make the form maximize at runtime and dock the webview to the form in order to make the html page full screen, and then inject the following script to resize the video...

$("div").eq(0).css({
    position: "absolute",
    top:0,
    left:0,
    width:"100%",
    height:"100%"
});

That will make the video fit the already maximized page and form.

edited Apr 07 '16 at 15:10

answered Apr 07 '16 at 14:01

Reinstate Monica Cellio

24,939
6
47
65

Oh thanks..so there's no way to achieve my goal, is it? – Aldridge1991 Apr 07 '16 at 14:09
No, I'm afraid not. Well, I say "afraid not", but it's actually there for our safety. – Reinstate Monica Cellio Apr 07 '16 at 14:14
I've been reading so..thanks a lot. All I wanted was to make a video fullscreen from my bed :D – Aldridge1991 Apr 07 '16 at 14:15
Do you think that this could help me? http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen?lq=1 The post with 3 upvotes. – Aldridge1991 Apr 07 '16 at 14:20
I was just thinking that, actually. With it being a Windows forms application you can maximize the form and make the web control dock to the form, then setting the width and height to 100% *may* do the trick. – Reinstate Monica Cellio Apr 07 '16 at 14:23
The webform is already fullscreen. The issue is that the video has the size you can see in the link provided. – Aldridge1991 Apr 07 '16 at 14:26
In that case, simply add some css into the html, after the video player, that overrides everything. `position: absolute; top: 0; left: 0; width: 100%; height: 100%;` should do it – Reinstate Monica Cellio Apr 07 '16 at 14:32
but that website is not of my own. Is that feasible? – Aldridge1991 Apr 07 '16 at 14:33
1

I'm not sure how you'd do it, but you need to inject a script into the page after it's loaded, that runs this command... `$("div").eq(0).css({ position:"absolute", top:0, left:0, width:"100%", height:"100%" });` If you open the video and paste that into the console you'll see the effect. It should be what you want, but how you go about that I don't know off the top of my head. – Reinstate Monica Cellio Apr 07 '16 at 14:43
thanks mate. Which would be the equivalent in Javascript? – Aldridge1991 Apr 07 '16 at 14:50
That is Javascript ;) – Reinstate Monica Cellio Apr 07 '16 at 14:57
It worked mate! Thanks a lot. Without your help I would have never got it! Perchaps you can edit the answer with the previous comment so I can accept it! – Aldridge1991 Apr 07 '16 at 15:02
1

Okay - I will do. And glad I could help you :) – Reinstate Monica Cellio Apr 07 '16 at 15:08
i've noticed that the screen goes wide, but the video is still small. Is there any other change available? – Aldridge1991 Apr 07 '16 at 16:46
Possibly the script is running before the video player is in the page. Try changing the script to this... `$(function(){ $("div").eq(0).css({ position:"absolute", top:0, left:0, width:"100%", height:"100%" }); });` – Reinstate Monica Cellio Apr 07 '16 at 16:50
I think it's working. Problem must be with my code. Thanks. – Aldridge1991 Apr 08 '16 at 07:30

cefsharp execute Javascript from C#

1 Answers1