-
Notifications
You must be signed in to change notification settings - Fork 7.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add skip forward/backward buttons (#8147)
* remove duplicate icons from icon example * create initial forward and back button classes * add logic for back/forward buttons on click * change icon used based on option passed into player * move logic from forward and back buttons into one component * add jsdoc comments for clarity * create initial test file * refactor button logic into separate files * update skip button example and add test files * test both the forward and backward buttons * test handleClick fns for both forward and backward btns * update skip buttons example * update jsdocs for skip backward and forward buttons * make control text accessible and use seekableEnd/Start when skipping forward/back * update font version to use updated icons * set control text only if config is valid * add link to sandbox page & use localization * update translations needed
- Loading branch information
1 parent
0022867
commit 8f3f32c
Showing
14 changed files
with
725 additions
and
93 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,114 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Video.js Sandbox</title> | ||
| <link href="../dist/video-js.css" rel="stylesheet" type="text/css" /> | ||
| <script src="../dist/video.js"></script> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <h2>Forward: 5, Backward: 10</h2> | ||
| <video-js | ||
| id="vid1" | ||
| controls | ||
| preload="auto" | ||
| width="640" | ||
| height="264" | ||
| poster="https://vjs.zencdn.net/v/oceans.png" | ||
| > | ||
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> | ||
| <source src="https://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="https://videojs.com/html5-video-support/" target="_blank" | ||
| >supports HTML5 video</a | ||
| > | ||
| </p> | ||
| </video-js> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Forward: 10, Backward: 30</h2> | ||
| <video-js | ||
| id="vid2" | ||
| controls | ||
| preload="auto" | ||
| width="640" | ||
| height="264" | ||
| poster="https://vjs.zencdn.net/v/oceans.png" | ||
| > | ||
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> | ||
| <source src="https://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="https://videojs.com/html5-video-support/" target="_blank" | ||
| >supports HTML5 video</a | ||
| > | ||
| </p> | ||
| </video-js> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Forward: 10</h2> | ||
| <video-js | ||
| id="vid3" | ||
| controls | ||
| preload="auto" | ||
| width="640" | ||
| height="264" | ||
| poster="https://vjs.zencdn.net/v/oceans.png" | ||
| > | ||
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> | ||
| <source src="https://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="https://videojs.com/html5-video-support/" target="_blank" | ||
| >supports HTML5 video</a | ||
| > | ||
| </p> | ||
| </video-js> | ||
| </div> | ||
|
|
||
| <script> | ||
| var vid1 = document.getElementById("vid1"); | ||
| var options = { | ||
| muted: true, | ||
| controlBar: { skipButtons: { forward: 5, backward: 10 } }, | ||
| }; | ||
| videojs(vid1, options); | ||
|
|
||
| var vid2 = document.getElementById("vid2"); | ||
| options.controlBar.skipButtons = { forward: 10, backward: 30 }; | ||
| videojs(vid2, options); | ||
|
|
||
| var vid3 = document.getElementById("vid3"); | ||
| options.controlBar.skipButtons = {forward: 10} | ||
| videojs(vid3, options); | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .video-js .vjs-skip-forward-5 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-forward-5; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-forward-10 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-forward-10; | ||
| } | ||
| } | ||
| .video-js .vjs-skip-forward-30 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-forward-30; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-backward-5 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-replay-5; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-backward-10 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-replay-10; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-backward-30 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-replay-30; | ||
| } | ||
| } |
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
Oops, something went wrong.