+
+
+
+
Video Playback Not Supported
-
-
This page shows you how to create, register and initialize a Video.js plugin.
-
Open the console to view the buffered percentage.
-
Video.js Sandbox
+
+
You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo,
+ except files that end in .example (so don't edit or add those files). To get started make a copy of
+ index.html.example and rename it to index.html.
+
cp sandbox/index.html.example sandbox/index.html
+
npm run start
+
open http://localhost:9999/sandbox/index.html
+
+
+
+ To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
+
+
+ Auto
+
+
+
+
diff --git a/sandbox/shadow-dom.html.example b/sandbox/shadow-dom.html.example
new file mode 100644
index 0000000000..90ea34897c
--- /dev/null
+++ b/sandbox/shadow-dom.html.example
@@ -0,0 +1,79 @@
+
+
+
+ Video.js Sandbox
+
+
You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html
+
npm start
+
open http://localhost:9999/sandbox/index.html
+
Tap on video to play/pause
+
+ Video.js Sandbox
+
+
Forward: 5, Backward: 10
+
+
+ To view this video please enable JavaScript, and consider upgrading to
+ a web browser that
+ supports HTML5 video
+
+
+
+
Forward: 10, Backward: 30
+
+
+ To view this video please enable JavaScript, and consider upgrading to
+ a web browser that
+ supports HTML5 video
+
+
+
+
Forward: 10
+
+
+ To view this video please enable JavaScript, and consider upgrading to
+ a web browser that
+ supports HTML5 video
+
+
+
Video.js Sandbox
+
+
You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the svg-icons-enabled.html
+
npm start
+
open http://localhost:9999/sandbox/svg-icons-enabled.html
+
+
+
+
+
+ To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
+
+
+
+
+
+
diff --git a/sandbox/svg-icons.html.example b/sandbox/svg-icons.html.example
new file mode 100644
index 0000000000..e0dda3c48f
--- /dev/null
+++ b/sandbox/svg-icons.html.example
@@ -0,0 +1,414 @@
+
+
+
+ VideoJS
+ VideoJS SVG Icons
+ In order to use SVG icons, the experimentalSvgIcons option must be enabled on the player. See: experimentalSvgIcons
+ SVG Icons are expected to be added to the player through components. Example: myButton.setIcon('play');
+
+
+
+
+
+
+ play
+
+
+
+
+
+
+ play-circle
+
+
+
+
+
+
+ pause
+
+
+
+
+
+
+ volume-mute
+
+
+
+
+
+
+ volume-low
+
+
+
+
+
+
+ volume-medium
+
+
+
+
+
+
+ volume-high
+
+
+
+
+
+
+ fullscreen-enter
+
+
+
+
+
+
+ fullscreen-exit
+
+
+
+
+
+
+ spinner
+
+
+
+
+
+
+ subtitles
+
+
+
+
+
+
+ captions
+
+
+
+
+
+
+ hd
+
+
+
+
+
+
+ chapters
+
+
+
+
+
+
+ downloading
+
+
+
+
+
+
+ file-download
+
+
+
+
+
+
+ file-download-done
+
+
+
+
+
+
+ file-download-off
+
+
+
+
+
+
+ share
+
+
+
+
+
+
+ cog
+
+
+
+
+
+
+ square
+
+
+
+
+
+
+ circle
+
+
+
+
+
+
+ circle-outline
+
+
+
+
+
+
+ circle-inner-circle
+
+
+
+
+
+
+ cancel
+
+
+
+
+
+
+ repeat
+
+
+
+
+
+
+ replay
+
+
+
+
+
+
+ replay-5
+
+
+
+
+
+
+ replay-10
+
+
+
+
+
+
+ replay-30
+
+
+
+
+
+
+ forward-5
+
+
+
+
+
+
+ forward-10
+
+
+
+
+
+
+ forward-30
+
+
+
+
+
+
+ audio
+
+
+
+
+
+
+ next-item
+
+
+
+
+
+
+ previous-item
+
+
+
+
+
+
+ shuffle
+
+
+
+
+
+
+ cast
+
+
+
+
+
+
+ picture-in-picture-enter
+
+
+
+
+
+
+ picture-in-picture-exit
+
+
+
+
+
+
+ facebook
+
+
+
+
+
+
+ linkedin
+
+
+
+
+
+
+ twitter
+
+
+
+
+
+
+ tumblr
+
+
+
+
+
+
+ pinterest
+
+
+
+
+
+
+ audio-description
+
+
Video.js Sandbox
+
+ Transient button demo
+
+
+
+ An unmute transient button will show after playback starts if muted.
+
+ Transient buttons to skip into / credits / recap display at times defined
+ in a metadata track.
+
+
+
+
diff --git a/sandbox/userAction-click.html.example b/sandbox/userAction-click.html.example
new file mode 100644
index 0000000000..dcb16cd03e
--- /dev/null
+++ b/sandbox/userAction-click.html.example
@@ -0,0 +1,48 @@
+
+
+
+ Video.js Sandbox
+
+
You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html
+
npm start
+
open http://localhost:9999/sandbox/index.html
+
+
+
+
+
+ To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
+
+
+
+
+
+
diff --git a/sandbox/vertical-volume.html.example b/sandbox/vertical-volume.html.example
index 7b65181636..56ada4acad 100644
--- a/sandbox/vertical-volume.html.example
+++ b/sandbox/vertical-volume.html.example
@@ -1,86 +1,36 @@
-
- AV Neue Theme Vertical Volume Example
-
-
-
-
-
-
-
+
+ Video.js Sandbox
+
+
You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the vertical-volume.html
+
npm start
+
open http://localhost:9999/sandbox/vertical-volume.html
+
+
+
+
+
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
-
+