ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New API methods (fixes #77), Fix for non strict mode (fixes #78)

Browse Source
This commit is contained in:
Sam Potts 2015-05-17 17:23:09 +10:00
parent 91f8a158d2
commit 7ccbfad6ad
6 changed files with 92 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.1.5/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.6/docs.css">
</head> </head>
<body> <body>
<main> <main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.5/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.6/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.5/docs.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.6/docs.css">
</head> </head>
<body> <body>
<header> <header>
@ -79,13 +79,13 @@
b.insertBefore(c, b.childNodes[0]); b.insertBefore(c, b.childNodes[0]);
} }
} }
})(document, "https://cdn.plyr.io/1.1.5/sprite.svg"); })(document, "https://cdn.plyr.io/1.1.6/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="https://cdn.plyr.io/1.1.5/plyr.js"></script> <script src="https://cdn.plyr.io/1.1.6/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="https://cdn.plyr.io/1.1.5/docs.js"></script> <script src="https://cdn.plyr.io/1.1.6/docs.js"></script>
</body> </body>
</html> </html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.1.5", "version": "1.1.6",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

18
readme.md
View File

@ -37,7 +37,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup. Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.1.5/plyr.js` to `https://cdn.plyr.io/1.1.5/plyr.js` **Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.1.6/plyr.js` to `https://cdn.plyr.io/1.1.6/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -57,11 +57,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.5/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.6/plyr.css">
<script src="https://cdn.plyr.io/1.1.5/plyr.js"></script> <script src="https://cdn.plyr.io/1.1.6/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.5/sprite.svg`. You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.6/sprite.svg`.
### CSS ### CSS
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@ -346,6 +346,16 @@ Here's a list of the methods supported:
<td>String</td> <td>String</td>
<td>Set the poster url. This is supported for the <code>video</code> element only.</td> <td>Set the poster url. This is supported for the <code>video</code> element only.</td>
</tr> </tr>
<tr>
<td><code>destroy()</code></td>
<td>&mdash;</td>
<td>Destroys the plyr UI and any media event listeners, effectively restoring to the previous state before <code>setup()</code> was called.</td>
</tr>
<tr>
<td><code>restore()</code></td>
<td>&mdash;</td>
<td>Reverses the effects of the <code>destroy()</code> method, restoring the UI and listeners.</td>
</tr>
</tbody> </tbody>
</table> </table>

78
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.1.5 // plyr.js v1.1.6
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -366,12 +366,28 @@
// append it to the parent. // append it to the parent.
if (sibling) { if (sibling) {
parent.insertBefore(child, sibling); parent.insertBefore(child, sibling);
} else { }
else {
parent.appendChild(child); parent.appendChild(child);
} }
} }
} }
// Unwrap an element
// http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/
function _unwrap(wrapper) {
// Get the element's parent node
var parent = wrapper.parentNode;
// Move all children out of the element
while (wrapper.firstChild) {
parent.insertBefore(wrapper.firstChild, wrapper);
}
// Remove the empty element
parent.removeChild(wrapper);
}
// Remove an element // Remove an element
function _remove(element) { function _remove(element) {
element.parentNode.removeChild(element); element.parentNode.removeChild(element);
@ -404,7 +420,7 @@
// Toggle event // Toggle event
function _toggleHandler(element, events, callback, toggle) { function _toggleHandler(element, events, callback, toggle) {
events = events.split(" "); var eventList = events.split(" ");
// If a nodelist is passed, call itself on each node // If a nodelist is passed, call itself on each node
if(element instanceof NodeList) { if(element instanceof NodeList) {
@ -417,8 +433,8 @@
} }
// If a single node is passed, bind the event listener // If a single node is passed, bind the event listener
for (var i = 0; i < events.length; i++) { for (var i = 0; i < eventList.length; i++) {
element[toggle ? "addEventListener" : "removeEventListener"](events[i], callback, false); element[toggle ? "addEventListener" : "removeEventListener"](eventList[i], callback, false);
} }
} }
@ -1512,7 +1528,47 @@
} }
} }
// Destroy an instance
function _destroy() {
// Bail if the element is not initialized
if(!player.init) {
return null;
}
// Event listeners are removed when elements are removed
// http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
// Remove controls
_remove(_getElement(config.selectors.controls));
// If video, we need to remove some more
if(player.type === "video") {
// Remove captions
_remove(_getElement(config.selectors.captions));
// Remove video wrapper
_unwrap(player.videoContainer);
}
// Restore native video controls
player.media.setAttribute("controls", "");
// Clone the media element to remove listeners
// http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
var clone = player.media.cloneNode(true);
player.media.parentNode.replaceChild(clone, player.media);
// Remove init flag
player.init = false;
}
// Setup a player
function _init() { function _init() {
// Bail if the element is initialized
if(player.init) {
return null;
}
// Setup the fullscreen api // Setup the fullscreen api
fullscreen = _fullscreen(); fullscreen = _fullscreen();
@ -1571,10 +1627,14 @@
} }
// Successful setup // Successful setup
return true; player.init = true;
} }
if(!_init()) { // Initialize instance
_init();
// If init failed, return an empty object
if(!player.init) {
return {}; return {};
} }
@ -1593,7 +1653,9 @@
toggleCaptions: _toggleCaptions, toggleCaptions: _toggleCaptions,
toggleFullscreen: _toggleFullscreen, toggleFullscreen: _toggleFullscreen,
isFullscreen: function() { return player.isFullscreen || false; }, isFullscreen: function() { return player.isFullscreen || false; },
support: function(mimeType) { return _supportMime(player, mimeType); } support: function(mimeType) { return _supportMime(player, mimeType); },
destroy: _destroy,
restore: _init
} }
} }