Merge branch 'master' of github.com:selz/plyr
This commit is contained in:
commit
05bf08a438
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/sprite.svg
vendored
2
dist/sprite.svg
vendored
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
2
docs/dist/docs.css
vendored
2
docs/dist/docs.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
vendored
File diff suppressed because one or more lines are too long
@ -21,11 +21,9 @@
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a>
|
||||
<span class="btn-count js-stargazers-count">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=https%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a>
|
||||
<span class="btn-count js-tweet-count">…</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
@ -75,74 +75,6 @@ plyr.setup({
|
||||
// Trigger popups
|
||||
document.querySelector(".js-popup").addEventListener("click", popup);
|
||||
|
||||
// Get JSONP
|
||||
function getJSONP(url, callback) {
|
||||
var name = "jsonp_callback_" + Math.round(100000 * Math.random());
|
||||
|
||||
// Cleanup to prevent memory leaks and hit original callback
|
||||
window[name] = function(data) {
|
||||
delete window[name];
|
||||
document.body.removeChild(script);
|
||||
callback(data);
|
||||
};
|
||||
|
||||
// Create a faux script
|
||||
var script = document.createElement("script");
|
||||
script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
|
||||
|
||||
// Inject to the body
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
// Get star count
|
||||
var storageSupported = ("sessionStorage" in window),
|
||||
selectors = {
|
||||
github: ".js-stargazers-count",
|
||||
twitter: ".js-tweet-count"
|
||||
};
|
||||
|
||||
// Display the count next to the button
|
||||
function displayCount(selector, count) {
|
||||
document.querySelector(selector).innerHTML = count;
|
||||
}
|
||||
|
||||
// Add star
|
||||
function formatGitHubCount(count) {
|
||||
return "★ " + count;
|
||||
}
|
||||
|
||||
// Check if it's in session storage first
|
||||
if(storageSupported && "github_stargazers" in window.sessionStorage) {
|
||||
displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
|
||||
}
|
||||
else {
|
||||
getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
|
||||
if (json && typeof json.data.stargazers_count !== "undefined") {
|
||||
// Update UI
|
||||
displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
|
||||
|
||||
// Store in session storage
|
||||
window.sessionStorage.github_stargazers = json.data.stargazers_count;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Get tweet count
|
||||
if(storageSupported && "tweets" in window.sessionStorage) {
|
||||
displayCount(selectors.twitter, window.sessionStorage.tweets);
|
||||
}
|
||||
else {
|
||||
getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
|
||||
if (json && typeof json.count !== "undefined") {
|
||||
// Update UI
|
||||
displayCount(selectors.twitter, json.count);
|
||||
|
||||
// Store in session storage
|
||||
window.sessionStorage.tweets = json.count;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Tabs
|
||||
var tabs = document.querySelectorAll(".nav-panel a"),
|
||||
panels = document.querySelectorAll(".panels > .panel"),
|
||||
|
18
package.json
18
package.json
@ -7,23 +7,23 @@
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.8.6",
|
||||
"gulp-autoprefixer": "^0.0.8",
|
||||
"gulp-autoprefixer": "^3.1.0",
|
||||
"gulp-concat": "^2.3.3",
|
||||
"gulp-gzip": "^1.0.0",
|
||||
"gulp-hogan-compile": "^0.4.1",
|
||||
"gulp-less": "^1.3.1",
|
||||
"gulp-minify-css": "^0.3.6",
|
||||
"gulp-open": "^0.3.2",
|
||||
"gulp-less": "^3.0.5",
|
||||
"gulp-minify-css": "^1.2.1",
|
||||
"gulp-open": "^1.0.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.5.3",
|
||||
"gulp-s3": "^0.3.0",
|
||||
"gulp-sass": "^1.3.3",
|
||||
"gulp-size": "^1.2.1",
|
||||
"gulp-sass": "^2.1.0",
|
||||
"gulp-size": "^2.0.0",
|
||||
"gulp-svgmin": "^1.0.0",
|
||||
"gulp-svgstore": "^5.0.0",
|
||||
"gulp-uglify": "^0.3.1",
|
||||
"gulp-util": "^2.2.20",
|
||||
"run-sequence": "^0.3.6"
|
||||
"gulp-uglify": "^1.5.1",
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.1.5"
|
||||
},
|
||||
"scripts": {
|
||||
"preinstall": "npm install -g gulp"
|
||||
|
12
readme.md
12
readme.md
@ -1,7 +1,7 @@
|
||||
# Plyr
|
||||
A simple, accessible HTML5 media player.
|
||||
|
||||
[Checkout the demo](http://plyr.io)
|
||||
Checkout the [demo](http://plyr.io).
|
||||
|
||||
[](http://plyr.io)
|
||||
|
||||
@ -24,9 +24,9 @@ We wanted a lightweight, accessible and customisable media player that just supp
|
||||
Oh and yes, it works with Bootstrap.
|
||||
|
||||
## Changelog
|
||||
Check out [the changelog](changelog.md)
|
||||
Check out the [changelog](changelog.md).
|
||||
|
||||
## Planned development
|
||||
## Planned Development
|
||||
- Vimeo support
|
||||
- Playback speed
|
||||
- Playlists
|
||||
@ -34,13 +34,13 @@ Check out [the changelog](changelog.md)
|
||||
- Audio captions
|
||||
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
|
||||
|
||||
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
|
||||
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
|
||||
|
||||
## Implementation
|
||||
|
||||
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.3.6/plyr.js` to `https://cdn.plyr.io/1.3.6/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.3.6/plyr.js` to `https://cdn.plyr.io/1.3.6/plyr.js`
|
||||
|
||||
### Bower
|
||||
If bower is your thang, you can grab Plyr using:
|
||||
@ -67,7 +67,7 @@ If you want to use our CDN, you can use the following:
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.6/sprite.svg`.
|
||||
|
||||
### 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.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="dist/plyr.css">
|
||||
|
Loading…
x
Reference in New Issue
Block a user