mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
f87297b20e
People keep finding the v4 legacy docs at docs.videojs.com/docs and Google keeps positioning them highly in search results. This attempts to lessen that.
109 lines
6.8 KiB
HTML
109 lines
6.8 KiB
HTML
<!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-options.html">
|
|
</head>
|
|
<body>
|
|
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-options.html">documentation for the current release</a>.
|
|
|
|
<div id="sidenav" class="sidenav"></div>
|
|
<div id="main" class="main">
|
|
<h1 id="options">Options</h1>
|
|
<h2 id="setting-options">Setting Options</h2>
|
|
<p>The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.</p>
|
|
<pre><code class="lang-html"><video controls autoplay preload="auto" ...>
|
|
</code></pre>
|
|
<p>Alternatively, you can use the data-setup attribute to provide options in the <a href="http://json.org/example.html">JSON</a> format. This is also how you would set options that aren't standard to the video tag.</p>
|
|
<pre><code class="lang-html"><video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
|
|
</code></pre>
|
|
<p>Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.</p>
|
|
<pre><code class="lang-js">videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
|
|
</code></pre>
|
|
<h2 id="individual-options">Individual Options</h2>
|
|
<blockquote>
|
|
<h3 id="note-on-video-tag-attributes">Note on Video Tag Attributes</h3>
|
|
<p>With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:</p>
|
|
</blockquote>
|
|
<p>WRONG</p>
|
|
<pre><code class="lang-html"><video controls="true" ...>
|
|
</code></pre>
|
|
<p>RIGHT</p>
|
|
<pre><code class="lang-html"><video controls ...>
|
|
</code></pre>
|
|
<blockquote>
|
|
<p>The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").</p>
|
|
</blockquote>
|
|
<h3 id="controls">controls</h3>
|
|
<p>The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.</p>
|
|
<pre><code class="lang-html"><video controls ...>
|
|
or
|
|
{ "controls": true }
|
|
</code></pre>
|
|
<h3 id="autoplay">autoplay</h3>
|
|
<p>If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
|
|
NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.</p>
|
|
<pre><code class="lang-html"><video autoplay ...>
|
|
or
|
|
{ "autoplay": true }
|
|
</code></pre>
|
|
<h3 id="preload">preload</h3>
|
|
<p>The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.</p>
|
|
<p>'auto': Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.</p>
|
|
<p>'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.</p>
|
|
<p>'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.</p>
|
|
<pre><code class="lang-html"><video preload ...>
|
|
or
|
|
{ "preload": "auto" }
|
|
</code></pre>
|
|
<h3 id="poster">poster</h3>
|
|
<p>The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.</p>
|
|
<pre><code class="lang-html"><video poster="myPoster.jpg" ...>
|
|
or
|
|
{ "poster": "myPoster.jpg" }
|
|
</code></pre>
|
|
<h3 id="loop">loop</h3>
|
|
<p>The loop attribute causes the video to start over as soon as it ends. This could be used for a visual effect like clouds in the background.</p>
|
|
<pre><code class="lang-html"><video loop ...>
|
|
or
|
|
{ "loop": true }
|
|
</code></pre>
|
|
<h3 id="width">width</h3>
|
|
<p>The width attribute sets the display width of the video.</p>
|
|
<pre><code class="lang-html"><video width="640" ...>
|
|
or
|
|
{ "width": 640 }
|
|
</code></pre>
|
|
<h3 id="height">height</h3>
|
|
<p>The height attribute sets the display height of the video.</p>
|
|
<pre><code class="lang-html"><video height="480" ...>
|
|
or
|
|
{ "height": 480 }
|
|
</code></pre>
|
|
<h2 id="component-options">Component Options</h2>
|
|
<p>You can set the options for any single player component. For instance, if you wanted to remove the <code>muteToggle</code> button, which
|
|
is a child of <code>controlBar</code>, you can just set that component to false:</p>
|
|
<pre><code class="lang-js">var player = videojs('video-id', {
|
|
controlBar: {
|
|
muteToggle: false
|
|
}
|
|
});
|
|
</code></pre>
|
|
<p>This also works using the <code>data-setup</code> attribute on the video element, just remember the options need to use proper JSON
|
|
notation.</p>
|
|
<pre><code class="lang-html"><video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>
|
|
</code></pre>
|
|
<p>The <a href="./components.html">components guide</a> has an excellent breakdown of the structure of a player, you
|
|
just need to remember to nest child components in a <code>children</code> array for each level.</p>
|
|
|
|
<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>
|