Added fullscreen functionality addressing issue #6. I made it so that it will utilize the same video controls (note the styling may need to be tweaked on these) and it also blows up the captions to make them bigger. I didn't have a fullscreen icon to add so I simply reused the captions icon in place of it. If someone could add a new icon to the spritesheet and then update the styles, that would be great :)

I made it so that you can also press Enter to go into fullscreen mode (this you can probably remove if you wish). Also I was required to set a keyup event on the Esc because for some reason the Fullscreen API doesn't let you e.preventDefault() so it wouldn't let me revert styles when hitting Esc unless I did that.

More information on Fullscreen API can be found here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Please note the Fullscreen API is not supported in IE 10 and lower.

This hasn't been fully tested in all browsers. Let me know if there's anything else I can help with! Thanks a lot for the awesome video player!

This player as-is is not responsive. Javascript writes a fixed width in px to the wrapper div, and also to the video element when escaping from full-screen. Ideally width should be 100% and height auto. Maximum width could be handled by CSS and/or wrapper elements.

it seems that docs/css/ and docs/js/ are duplicates of css/ and js/.

Does it make sense to symlink one of them so we have 1 copy? Happy to submit a PR for this

On the element which holds the captions, add the following attributes:

• aria-live="polite"
• aria-atomic="true"

I'd be happy to help test this with both Jaws and NVDA.

Merged all of the code changes from https://source.ind.ie/project/video-player back into this original project (except for the license changes and branding which remain the same.)

Let me know if you have any issues or changes that you need prior to merging, happy to help!

When I'm trying to use the seek bar, the progress is being applied 20s (approximately an inch to the right) of where I'm clicking.

Upon inspection, it looks like this.offsetLeft is always producing 0, not the offset from the side of the screen.

@hozefaj wondering if y'all would be open to moving the css to https://sass-lang.com

Would be happy to send a PR with this if it would be welcome. Definitely not looking to override library/design decisions, so no biggie if this really isn't wanted. I do think it could be a nice addition and cut down on some of the repeated boilerplate in the .css though.

When CC are disabled by the user, and the user enters full screen mode, and exits it again, the CCs are shown again, even the CC button is clearly in the disabled state. Can this be fixed? :)

As of right now the way the progress bar has been implemented is if a user wishes to seek, the library will determine where the user wishes to seek based on where the user has clicked relative to the page.

// Skip when clicking progress bar
obj.progressBar.addEventListener('click', function(e) {
    obj.pos = (e.pageX - this.offsetLeft)/ this.offsetWidth;
    obj.movie.currentTime = obj.pos * obj.movie.duration;

    // Special handling for "manual" captions
    if (!obj.isTextTracks) {
        adjustManualCaptions(obj);
    }
});

If a user wants to move the video-player to a different location on the screen, I have found issues with seeking.

To be honest, I actually feel a slider (input[type="range"]) might be more appropriate for showing the progress of the video?

Pros:

• you can change the value similar to how you change the <progress> element to show progress while the video is playing
• you can easily retrieve the value the user seeks to.

Cons:

• trouble adding color before slider thumb -- might have to use JS? currently solution I have only works in webkit and not Firefox
• it seems that input[type="range"] doesn't interpret floats so the progress of the video looks jumpy

Was hoping to get thoughts on this? I might submit a pull request when I have more done. I started a branch on my repository here and got some partial functionality going.

Under "React Version" heading: A demo could be reached at: View Demo

The link is: http://paypal.github.io/accessible-html5-video-player/index.react.html

The video player does'nt work well in IE11 Full screen view. The view size of the video doesnt change but stick to the right.

On IE inspect, the screen flickers a lot.

The windows screen reader reads timestamps as a time of day rather than a time since the start of the video.

This should be updated to not confuse users who use screen readers.

When I opened the demo for the first time and scrolled down, I started the video. I toggled CC on an off, not seeing an effect, realizing later that the captions were turning on and off, out of viewport.

1. Captions not in the 'expected' location
2. Captions were not near the control, so the action was not evident.

I think the main issue is just the full-width setting of the demo, allows the top player to go offscreen, so the full video and controls are not contained in the viewport.

To reproduce, view the demo in FF responsive design mode, 1440x900 display.

Wanted to ask a few questions about feature support:

• what types of streams are supported? HLS? DASH?
• is there in-built tracking?
• native mobile support?
• is there a test runner like karma?
• what audio types are supported?
• are there thumbnail previews?
• mirroring/ over the air support?
• external video support?
• i18n?
• VR?
• what's the build system?
• is it extendable?

Very good, but I think it would be even better if you add the VR button function. Just separate the screen from the middle, there is no 360° gyroscope function. This way I can watch VR on my phone.

When I tried to install the react module, unable to find the corresponding module

npm i PXvideo × Install fail! Error: GET http://registry.npm.taobao.org/PXvideo response 404 status