-
Notifications
You must be signed in to change notification settings - Fork 7.5k
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.
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
feat: Add breakpoints option to support toggling classes based on player width. #5471
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
f3d7558
feat: Add breakpoints option to support toggling classes based on pla…
misteroneill 4050444
Update responsive.html.example with latest
misteroneill fa01715
Updates based on CR
misteroneill 2af5767
Tests
misteroneill 0f9fa4f
CR
misteroneill 57f53c1
CR
misteroneill 53d0785
CR
misteroneill File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <title>Video.js Sandbox - Responsive</title> | ||
| <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> | ||
| <script src="../dist/video.js"></script> | ||
| <style type="text/css"> | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .breakpoints, .video-js, table { | ||
| margin: 1em 0; | ||
| } | ||
|
|
||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| th, td { | ||
| border: 1px solid #ccc; | ||
| padding: 0.5em 1em; | ||
| } | ||
|
|
||
| tbody tr { | ||
| color: #999; | ||
| } | ||
|
|
||
| tbody tr:first-child { | ||
| color: #000; | ||
| } | ||
|
|
||
| .breakpoints div { | ||
| background-color: red; | ||
| color: white; | ||
| padding: 0.5em 1em; | ||
| } | ||
|
|
||
| @media (max-width: 210px) { | ||
| .breakpoints .tiny { | ||
| background-color: green; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 211px) and (max-width: 320px) { | ||
| .breakpoints .x-small { | ||
| background-color: green; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 321px) and (max-width: 425px) { | ||
| .breakpoints .small { | ||
| background-color: green; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 426px) and (max-width: 768px) { | ||
| .breakpoints .medium { | ||
| background-color: green; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 769px) and (max-width: 1440px) { | ||
| .breakpoints .large { | ||
| background-color: green; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1441px) and (max-width: 2560px) { | ||
| .breakpoints .x-large { | ||
| background-color: green; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 2561px) { | ||
| .breakpoints .huge { | ||
| background-color: green; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p> | ||
| The following boxes indicate which breakpoint should be applied to the | ||
| player when it fills the width of its containing viewport. | ||
| </p> | ||
| <p> | ||
| Use these to validate that the default breakpoints match up with how | ||
| CSS media queries work. | ||
| </p> | ||
| <p> | ||
| <b>Because these bars are updated by CSS, they will change before the <code>playerresize</code> event occurs!</b> | ||
| </p> | ||
| <div class="breakpoints"> | ||
| <div class="tiny">vjs-layout-tiny (0px-210px)</div> | ||
| <div class="x-small">vjs-layout-x-small (211px-320px)</div> | ||
| <div class="small">vjs-layout-small (321px-425px)</div> | ||
| <div class="medium">vjs-layout-medium (426px-768px)</div> | ||
| <div class="large">vjs-layout-large (769px-1440px)</div> | ||
| <div class="x-large">vjs-layout-x-large (1441px-2560px)</div> | ||
| <div class="huge">vjs-layout-huge (2561px+)</div> | ||
| </div> | ||
|
|
||
| <video-js | ||
| class="vjs-fluid" | ||
| controls | ||
| preload="auto" | ||
| poster="http://vjs.zencdn.net/v/oceans.png"> | ||
| <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> | ||
| <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> | ||
| <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> | ||
| <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> | ||
| <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> | ||
| </video-js> | ||
|
|
||
| <p> | ||
| Each time the player size changes, a row is prepended to this table. | ||
| </p> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Class</th> | ||
| <th>Player Width</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <script> | ||
| var vid = document.querySelector('video-js'); | ||
| var player = videojs(vid, {breakpoints: true}); | ||
| var tbody = document.querySelector('table tbody'); | ||
|
|
||
| player.on('playerresize', function() { | ||
| var values = { | ||
| breakpoint: player.currentBreakpoint(), | ||
| className: player.el().className.match(/vjs-layout-([a-z\-]+)/)[0], | ||
| playerWidth: player.currentWidth() | ||
| }; | ||
|
|
||
| videojs.log('playerresize', values); | ||
|
|
||
| var tr = document.createElement('tr'); | ||
|
|
||
| tr.innerHTML = '<td>' + | ||
| values.className + | ||
| '</td><td>' + | ||
| values.playerWidth + | ||
| '</td>'; | ||
|
|
||
| tbody.insertBefore(tr, tbody.firstChild); | ||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should leave flash here as it makes it easier to test with since it's already set up. At least for a bit longer still.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well, my thought was that we have a
flash.html.exampleso it would be confusing as to why it was identical toindex.html.example.