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.
45 lines
3.1 KiB
HTML
45 lines
3.1 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">
|
|
</head>
|
|
<body>
|
|
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com">documentation for the current release</a>.
|
|
|
|
<div id="sidenav" class="sidenav"></div>
|
|
<div id="main" class="main">
|
|
<h1 id="removing-players">Removing Players</h1>
|
|
<p>Sometimes, you want to remove players after page load (in single page apps or modals, for instance). It's easy to manage, but there are some simple rules you need to follow.</p>
|
|
<h2 id="call-dispose-">Call <code>.dispose()</code></h2>
|
|
<p>To remove the html associated with your videojs player from the page always call the player's <a href="http://docs.videojs.com/docs/api/player.html#Methodsdispose"><code>dispose()</code></a> method:</p>
|
|
<pre><code class="lang-js">var oldPlayer = document.getElementById('my-player');
|
|
videojs(oldPlayer).dispose();
|
|
</code></pre>
|
|
<p>This method will:</p>
|
|
<ol>
|
|
<li>reset the internal state of videojs</li>
|
|
<li>remove the player's dom from the page</li>
|
|
</ol>
|
|
<h2 id="showing-hiding-a-player">Showing / Hiding a Player</h2>
|
|
<p>For instance, if you have a modal that a player appears in, you should create the player when the modal pops up. When the modal hides, dispose the player. If you try to hide the Flash tech, things will go poorly. Even with other tech, calling <code>dispose()</code> on a player that's not needed will free up resources for the browser.</p>
|
|
<h2 id="why-is-this-needed-">Why Is This Needed?</h2>
|
|
<p>VideoJS internally tracks all players and their associated data by html id attribute. If you plan to create new players with the same id as previously created players, you'll need to call the player's dispose() method to clear VideoJS's internal state before creating the new player.</p>
|
|
<h2 id="signs-you-did-it-wrong">Signs You Did It Wrong</h2>
|
|
<pre><code>TypeError: this.el_.vjs_getProperty is not a function
|
|
"VIDEOJS:" "Video.js: buffered unavailable on Hls playback technology element." TypeError: this.el_.vjs_getProperty is not a function
|
|
Stack trace:
|
|
...
|
|
</code></pre><p>If you encounter a console error in the browser similar to the above, you've probably forgotten to <code>dispose()</code> a player before removing it from the dom. This would happen when using the <a href="https://github.com/videojs/videojs-contrib-hls">contrib-hls</a> plugin.</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>
|