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>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a>
|
<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>
|
||||||
<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>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
@ -46,10 +44,10 @@
|
|||||||
<!-- Video files -->
|
<!-- Video files -->
|
||||||
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
||||||
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
||||||
|
|
||||||
<!-- Text track file -->
|
<!-- Text track file -->
|
||||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
|
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
|
||||||
|
|
||||||
<!-- Fallback for browsers that don't support the <video> element -->
|
<!-- Fallback for browsers that don't support the <video> element -->
|
||||||
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||||
</video>
|
</video>
|
||||||
@ -68,7 +66,7 @@
|
|||||||
<!-- Audio files -->
|
<!-- Audio files -->
|
||||||
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
|
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
|
||||||
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
|
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
|
||||||
|
|
||||||
<!-- Fallback for browsers that don't support the <audio> element -->
|
<!-- Fallback for browsers that don't support the <audio> element -->
|
||||||
<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
|
<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
|
||||||
</audio>
|
</audio>
|
||||||
|
@ -32,12 +32,12 @@ plyr.setup({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// General functions
|
// General functions
|
||||||
(function() {
|
(function() {
|
||||||
// Popup
|
// Popup
|
||||||
function popup(event) {
|
function popup(event) {
|
||||||
// Prevent the link opening
|
// Prevent the link opening
|
||||||
if(event.target.nodeName.toLowerCase() == "a") {
|
if(event.target.nodeName.toLowerCase() == "a") {
|
||||||
if(event.preventDefault) {
|
if(event.preventDefault) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@ -75,74 +75,6 @@ plyr.setup({
|
|||||||
// Trigger popups
|
// Trigger popups
|
||||||
document.querySelector(".js-popup").addEventListener("click", popup);
|
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
|
// Tabs
|
||||||
var tabs = document.querySelectorAll(".nav-panel a"),
|
var tabs = document.querySelectorAll(".nav-panel a"),
|
||||||
panels = document.querySelectorAll(".panels > .panel"),
|
panels = document.querySelectorAll(".panels > .panel"),
|
||||||
@ -171,7 +103,7 @@ plyr.setup({
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// Google analytics
|
// Google analytics
|
||||||
// For demo site (http://[www.]plyr.io) only
|
// For demo site (http://[www.]plyr.io) only
|
||||||
if(document.domain.indexOf("plyr.io") > -1) {
|
if(document.domain.indexOf("plyr.io") > -1) {
|
||||||
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
|
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
|
||||||
@ -180,4 +112,4 @@ if(document.domain.indexOf("plyr.io") > -1) {
|
|||||||
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
|
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
|
||||||
ga("create", "UA-40881672-11", "auto");
|
ga("create", "UA-40881672-11", "auto");
|
||||||
ga("send", "pageview");
|
ga("send", "pageview");
|
||||||
}
|
}
|
||||||
|
18
package.json
18
package.json
@ -7,23 +7,23 @@
|
|||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"gulp": "^3.8.6",
|
"gulp": "^3.8.6",
|
||||||
"gulp-autoprefixer": "^0.0.8",
|
"gulp-autoprefixer": "^3.1.0",
|
||||||
"gulp-concat": "^2.3.3",
|
"gulp-concat": "^2.3.3",
|
||||||
"gulp-gzip": "^1.0.0",
|
"gulp-gzip": "^1.0.0",
|
||||||
"gulp-hogan-compile": "^0.4.1",
|
"gulp-hogan-compile": "^0.4.1",
|
||||||
"gulp-less": "^1.3.1",
|
"gulp-less": "^3.0.5",
|
||||||
"gulp-minify-css": "^0.3.6",
|
"gulp-minify-css": "^1.2.1",
|
||||||
"gulp-open": "^0.3.2",
|
"gulp-open": "^1.0.0",
|
||||||
"gulp-rename": "^1.2.0",
|
"gulp-rename": "^1.2.0",
|
||||||
"gulp-replace": "^0.5.3",
|
"gulp-replace": "^0.5.3",
|
||||||
"gulp-s3": "^0.3.0",
|
"gulp-s3": "^0.3.0",
|
||||||
"gulp-sass": "^1.3.3",
|
"gulp-sass": "^2.1.0",
|
||||||
"gulp-size": "^1.2.1",
|
"gulp-size": "^2.0.0",
|
||||||
"gulp-svgmin": "^1.0.0",
|
"gulp-svgmin": "^1.0.0",
|
||||||
"gulp-svgstore": "^5.0.0",
|
"gulp-svgstore": "^5.0.0",
|
||||||
"gulp-uglify": "^0.3.1",
|
"gulp-uglify": "^1.5.1",
|
||||||
"gulp-util": "^2.2.20",
|
"gulp-util": "^3.0.7",
|
||||||
"run-sequence": "^0.3.6"
|
"run-sequence": "^1.1.5"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"preinstall": "npm install -g gulp"
|
"preinstall": "npm install -g gulp"
|
||||||
|
12
readme.md
12
readme.md
@ -1,7 +1,7 @@
|
|||||||
# Plyr
|
# Plyr
|
||||||
A simple, accessible HTML5 media player.
|
A simple, accessible HTML5 media player.
|
||||||
|
|
||||||
[Checkout the demo](http://plyr.io)
|
Checkout the [demo](http://plyr.io).
|
||||||
|
|
||||||
[](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.
|
Oh and yes, it works with Bootstrap.
|
||||||
|
|
||||||
## Changelog
|
## Changelog
|
||||||
Check out [the changelog](changelog.md)
|
Check out the [changelog](changelog.md).
|
||||||
|
|
||||||
## Planned development
|
## Planned Development
|
||||||
- Vimeo support
|
- Vimeo support
|
||||||
- Playback speed
|
- Playback speed
|
||||||
- Playlists
|
- Playlists
|
||||||
@ -34,13 +34,13 @@ Check out [the changelog](changelog.md)
|
|||||||
- Audio captions
|
- Audio captions
|
||||||
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
|
... 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
|
## Implementation
|
||||||
|
|
||||||
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.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
|
### Bower
|
||||||
If bower is your thang, you can grab Plyr using:
|
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`.
|
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.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.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="dist/plyr.css">
|
<link rel="stylesheet" href="dist/plyr.css">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user