diff options
Diffstat (limited to 'javascript/videojs/docs/legacy-docs/guides/components.html')
| -rw-r--r-- | javascript/videojs/docs/legacy-docs/guides/components.html | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/javascript/videojs/docs/legacy-docs/guides/components.html b/javascript/videojs/docs/legacy-docs/guides/components.html new file mode 100644 index 0000000..e5f07d6 --- /dev/null +++ b/javascript/videojs/docs/legacy-docs/guides/components.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<title></title> +<link rel="stylesheet" type="text/css" href="../css/guides.css"> +<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,600,600italic' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/solarized_light.min.css" /> +<script type="text/javascript" src="//use.edgefonts.net/source-code-pro.js"></script> +<link rel="canonical" href="https://docs.videojs.com/tutorial-components.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-components.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="components">Components</h1> +<p>The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the <code>Component</code> class, or a subclass of <code>Component</code>.</p> +<pre><code class="lang-js">videojs.registerComponent('Control', videojs.extends(Component)); +videojs.registerComponent('Button', videojs.extends(videojs.getComponent('Control'))); +videojs.registerComponent('PlayToggle', videojs.extends(videojs.getComponent('Button'))); +</code></pre> +<p>The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.</p> +<pre><code class="lang-js">// Adding a new control to the player +myPlayer.addChild('BigPlayButton'); +</code></pre> +<p>Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.</p> +<pre><code class="lang-js">myPlayer.addChild('BigPlayButton'); +</code></pre> +<p>Results in:</p> +<pre><code class="lang-html"> <!-- Player Element --> + <div class="video-js"> + <!-- BigPlayButton Element --> + <div class="vjs-big-play-button"></div> + </div> +</code></pre> +<p>The actual default component structure of the Video.js player looks something like this:</p> +<pre><code>Player + PosterImage + TextTrackDisplay + LoadingSpinner + BigPlayButton + ControlBar + PlayToggle + VolumeMenuButton + CurrentTimeDisplay (Hidden by default) + TimeDivider (Hidden by default) + DurationDisplay (Hidden by default) + ProgressControl + SeekBar + LoadProgressBar + MouseTimeDisplay + PlayProgressBar + LiveDisplay (Hidden by default) + RemainingTimeDisplay + CustomControlsSpacer (No UI) + ChaptersButton (Hidden by default) + SubtitlesButton (Hidden by default) + CaptionsButton (Hidden by default) + PictureInPictureToggle + FullscreenToggle + ErrorDisplay + TextTrackSettings +</code></pre><h2 id="progress-control">Progress Control</h2> +<p>The progress control is made up of the SeekBar. The seekbar contains the load progress bar +and the play progress bar. In addition, it contains the Mouse Time Display which +is used to display the time tooltip that follows the mouse cursor. +The play progress bar also has a time tooltip that show the current time.</p> +<p>By default, the progress control is sandwiched between the volume menu button and +the remaining time display inside the control bar, but in some cases, a skin would +want to move the progress control above the control bar and have it span the full +width of the player, in those cases, it is less than ideal to have the tooltips +get cut off or leave the bounds of the player. This can be prevented by setting the +<code>keepTooltipsInside</code> option on the progress control. This also makes the tooltips use +a real element instead of pseudo elements so targeting them with css will be different.</p> +<pre><code class="lang-js">let player = videojs('myplayer', { + controlBar: { + progressControl: { + keepTooltipsInside: true + } + } +}); +</code></pre> + +<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script> +<script src="../js/guides.js"></script> +<script>hljs.initHighlightingOnLoad();</script> +</body> + +</html> |