Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML5 full-screen API is not implemented #1314

Closed
thyrrestrup opened this issue Mar 26, 2015 · 13 comments · Fixed by #1455
Closed

HTML5 full-screen API is not implemented #1314

thyrrestrup opened this issue Mar 26, 2015 · 13 comments · Fixed by #1455

Comments

@thyrrestrup
Copy link

Hi
I have embedded a couple of videos from youtube and vimeo in my app.
But the fullscreen feature does not work - furthermore if the fullscreen button is clicked the scroll functionality of the app stops working until the page is refreshed..

-Tobias
@bwin
Copy link
Contributor

bwin commented Mar 26, 2015

Please provide your Atom-Shell and OS version.

Tobias Thyrrestrup notifications@github.com schrieb am Do., 26. Mär. 2015
17:32:

Hi
I have embedded a couple of videos from youtube and vimeo in my app.
But the fullscreen feature does not work - furthermore if the fullscreen
button is clicked the scroll functionality of the page stops working until
the page is refreshed..

-Tobias

—
Reply to this email directly or view it on GitHub
#1314.

@thyrrestrup
Copy link
Author

Atom.app - v0.22.2
OS X - 10.10.2

Here is my sample index.html:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css" media="screen">
            div {
                width:640px;
                margin:0px auto;
                padding:15px;
            }
        </style>
        <title>Hello World!</title>
    </head>
    <body>
        <div>
            <iframe width="640" height="360" src="https://www.youtube.com/embed/dIkHPxeslHQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://player.vimeo.com/video/106724185?color=ffffff&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://www.youtube.com/embed/dIkHPxeslHQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://player.vimeo.com/video/106724185?color=ffffff&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://www.youtube.com/embed/dIkHPxeslHQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://player.vimeo.com/video/106724185?color=ffffff&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://www.youtube.com/embed/dIkHPxeslHQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <iframe width="640" height="360" src="https://player.vimeo.com/video/106724185?color=ffffff&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </body>
</html>

and here is the app.js:

var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;

require('crash-reporter').start();

app.on('ready', function() {

    mainWindow = new BrowserWindow({
        'width': 800,
        'height': 600,
        'node-integration': false,
        'web-preferences': {
            'web-security': false,
            'overlay-fullscreen-video': true,
        }
    });

    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

@zcbenz zcbenz changed the title Fullscreen video does not work. HTML5 full-screen API is not implemented Mar 27, 2015
@zcbenz zcbenz added the bug label Mar 27, 2015
@zcbenz
Copy link
Member

zcbenz commented Mar 27, 2015

Currently we don't have HTML5 full-screen API implemented, so the HTML5 version of YouTube player can not enter fullscreen.

@gliurn
Copy link

gliurn commented Mar 27, 2015

will you do it soon? it interest me too

@zcbenz
Copy link
Member

zcbenz commented Mar 28, 2015

will you do it soon? it interest me too

No, it is quite low priority.

@jameslk
Copy link

jameslk commented Mar 31, 2015

I ran into this issue as well. Devs- it seems this has been fixed on nwjs, so if it's any help in getting the problem resolved, here's the relevant commit and ticket:
nwjs/nw.js@a3a537b
nwjs/nw.js#55

For the time being, I'm guessing I will have to monkey patch the html5 fullscreen API, reimplementing it via calls to the equivalent features in the BrowserWindow API. If anyone else has any other ideas, I'd be interested to know.

@jameslk
Copy link

jameslk commented Apr 2, 2015

Here's my fullscreen monkey patch script if anyone needs it (note: its using ES6):
https://gist.github.com/jameslk/f59714b04d6c199ecd2b

I didin't go through the additional steps of figuring out how to mock trigger the :full-screen pseudo classes and centering on content. My guess is the easiest way to handle that will be to use z-index with a maximum value on the content and set it to 100% width/height.

@deepak1556 deepak1556 mentioned this issue Apr 7, 2015
Closed
@thyrrestrup
Copy link
Author

Hi
I'm curious how to use the fullscreen patch?
Could you please give an example?

-Tobias

@deepak1556 deepak1556 mentioned this issue Apr 21, 2015
Merged
@jameslk
Copy link

jameslk commented Apr 22, 2015

@thyrrestrup The monkey patch should fix the HTML5 API without having to do anything else. For example, if requestFullscreen is called on an element, the app will go into fullscreen. This is how to load it:

var fullscreen = new Fullscreen();
fullscreen.implementHtml5FullscreenApi();

@thyrrestrup
Copy link
Author

@jameslk - thanks I'm unsure how I should require or import the atom-shell-fullscreen.js file and if this is done in the renderer or in the browser? - If this is done in the renderer could this be done through the preload script?

@jameslk
Copy link

jameslk commented Apr 22, 2015

@thyrrestrup You will need to run it through an ES6 to 5 transpiler if you haven't done that already (like this one). Then require it in on the browser side (where things are displayed, like HTML and CSS--not on the side that creates the browser frames).

@steelbrain
Copy link
Contributor

@jameslk in case you don't wanna go through the transpilation process #1328 (comment)

@jameslk
Copy link

jameslk commented Apr 22, 2015

@steelbrain Ah nice, thanks for the tip. I'll try that out.

@thyrrestrup thyrrestrup mentioned this issue May 7, 2015
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

window: supports HTML5 fullscreen api deepak1556/atom-shell
6 participants
@thyrrestrup @zcbenz @jameslk @bwin @steelbrain @gliurn