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

Fixes for volume control on iOS

Browse Source
This commit is contained in:
Sam Potts
2015-03-10 23:54:52 +11:00
parent 1532f2ab23
commit aa6bc2df2f
15 changed files with 91 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.md
View File

@ -1,5 +1,9 @@
# Changelog
## v1.0.25
- Fixes for iOS volume controls (hidden)
- Classnames for left/right controls changed
## v1.0.24
- Added tooltip option to display labels as tooltips (Fixes #50)

4
controls.md
View File

@ -31,7 +31,7 @@ This is the default `html` option from `plyr.js`.
"<span>0</span>% buffered",
"</progress>",
"</div>",
"<span class='player-controls-playback'>",
"<span class='player-controls-left'>",
"<button type='button' data-player='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>",
"<span class='sr-only'>Restart</span>",
@ -57,7 +57,7 @@ This is the default `html` option from `plyr.js`.
"<span class='player-duration'>00:00</span>",
"</span>",
"</span>",
"<span class='player-controls-sound'>",
"<span class='player-controls-right'>",
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
"<label id='mute{id}' for='mute{id}'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/templates.js vendored
View File

@ -1,2 +1,2 @@
var templates = {};
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});

2
docs/error.html
View File

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

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.24/plyr.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.24/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css">
</head>
<body>
<header>
@ -67,13 +67,13 @@
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script>
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.24/sprite.svg");
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.25/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.24/plyr.js"></script>
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.0.24/docs.js"></script>
<script src="//cdn.plyr.io/1.0.25/docs.js"></script>
</body>
</html>

3
docs/src/js/docs.js
View File

@ -11,8 +11,7 @@ plyr.setup({
html: templates.controls.render({}),
captions: {
defaultActive: true
},
tooltips: true
}
});
// Google analytics

4
docs/src/templates/controls.html
View File

@ -9,7 +9,7 @@
<span>0</span>% buffered
</progress>
</div>
<span class="player-controls-playback">
<span class="player-controls-left">
<button type="button" data-player="restart">
<svg><use xlink:href="#icon-restart"></use></svg>
<span class="sr-only">Restart</span>
@ -35,7 +35,7 @@
<span class="player-duration">00:00</span>
</span>
</span>
<span class="player-controls-sound">
<span class="player-controls-right">
<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
<label id="mute{id}" for="mute{id}">
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>

2
package.json
View File

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

10
readme.md
View File

@ -38,7 +38,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.
**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.0.24/plyr.js` to `https://cdn.plyr.io/1.0.24/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.0.25/plyr.js` to `https://cdn.plyr.io/1.0.25/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.24/plyr.css">
<script src="//cdn.plyr.io/1.0.24/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css">
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script>
```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.24/sprite.svg`.
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.25/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.
@ -365,7 +365,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
</tbody>
</table>
&sup1; iPhone forces the native player for `<video>` so no customisation possible
&sup1; iPhone forces the native player for `<video>` so no customisation possible. `<audio>` elements have volume controls disabled.
&sup2; Native player used (no support for `<progress>` or `<input type="range">`)

57
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.24
// plyr.js v1.0.25
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -88,7 +88,7 @@
"<span>0</span>% buffered",
"</progress>",
"</div>",
"<span class='player-controls-playback'>",
"<span class='player-controls-left'>",
"<button type='button' data-player='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>",
"<span class='sr-only'>Restart</span>",
@ -114,7 +114,7 @@
"<span class='player-duration'>00:00</span>",
"</span>",
"</span>",
"<span class='player-controls-sound'>",
"<span class='player-controls-right'>",
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
"<label id='mute{id}' for='mute{id}'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
@ -137,7 +137,7 @@
"</span>",
"</div>"
].join("\n");
})()
})()
};
// Debugging
@ -151,7 +151,7 @@
// Unfortunately, due to mixed support, UA sniffing is required
function _browserSniff() {
var nAgt = navigator.userAgent,
browserName = navigator.appName,
name = navigator.appName,
fullVersion = ""+parseFloat(navigator.appVersion),
majorVersion = parseInt(navigator.appVersion,10),
nameOffset,
@ -160,22 +160,22 @@
// MSIE 11
if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) {
browserName = "IE";
name = "IE";
fullVersion = "11;";
}
// MSIE
else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) {
browserName = "IE";
name = "IE";
fullVersion = nAgt.substring(verOffset+5);
}
// Chrome
else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) {
browserName = "Chrome";
name = "Chrome";
fullVersion = nAgt.substring(verOffset+7);
}
// Safari
else if ((verOffset=nAgt.indexOf("Safari")) !== -1) {
browserName = "Safari";
name = "Safari";
fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version")) !== -1) {
fullVersion = nAgt.substring(verOffset+8);
@ -183,15 +183,15 @@
}
// Firefox
else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) {
browserName = "Firefox";
name = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(" ")+1) < (verOffset=nAgt.lastIndexOf("/")) ) {
browserName = nAgt.substring(nameOffset,verOffset);
name = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
if (name.toLowerCase()==name.toUpperCase()) {
name = navigator.appName;
}
}
// Trim the fullVersion string at semicolon/space if present
@ -207,8 +207,13 @@
fullVersion = ""+parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion,10);
}
// Return data
return [browserName, majorVersion];
return {
name: name,
version: majorVersion,
ios: /(iPad|iPhone|iPod)/g.test(navigator.platform)
};
}
// Check for mime type support against a player instance
@ -614,6 +619,7 @@
}
catch(e) {
_log("It looks like there's a problem with your controls html. Bailing.", true);
return false;
}
}
@ -652,6 +658,11 @@
// If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
// Add iOS class
if(player.browser.ios) {
_toggleClass(player.container, "ios", true);
}
// Inject the player wrapper
if(player.type === "video") {
// Create the wrapper div
@ -727,10 +738,10 @@
_showCaptions(player);
// If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported)
if ((player.browserName === "IE" && player.browserMajorVersion === 10) ||
(player.browserName === "IE" && player.browserMajorVersion === 11) ||
(player.browserName === "Firefox" && player.browserMajorVersion >= 31) ||
(player.browserName === "Safari" && player.browserMajorVersion >= 7)) {
if ((player.browser.name === "IE" && player.browser.version === 10) ||
(player.browser.name === "IE" && player.browser.version === 11) ||
(player.browser.name === "Firefox" && player.browser.version >= 31) ||
(player.browser.name === "Safari" && player.browser.version >= 7)) {
// Debugging
_log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
@ -802,7 +813,7 @@
}
// If Safari 7+, removing track from DOM [see "turn off native caption rendering" above]
if (player.browserName === "Safari" && player.browserMajorVersion >= 7) {
if (player.browser.name === "Safari" && player.browser.version >= 7) {
_log("Safari 7+ detected; removing track from DOM.");
// Find all <track> elements
@ -1273,16 +1284,14 @@
fullscreen = _fullscreen();
// Sniff
player.browserInfo = _browserSniff();
player.browserName = player.browserInfo[0];
player.browserMajorVersion = player.browserInfo[1];
player.browser = _browserSniff();
// Debug info
_log(player.browserName + " " + player.browserMajorVersion);
_log(player.browser.name + " " + player.browser.version);
// If IE8, stop customization (use fallback)
// If IE9, stop customization (use native controls)
if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) {
if (player.browser.name === "IE" && (player.browser.version === 8 || player.browser.version === 9) ) {
_log("Browser not suppported.", true);
return false;
}

20
src/less/plyr.less
View File

@ -185,15 +185,15 @@
text-align: center;
// Layout
&-sound {
&-right {
display: block;
margin: @control-spacing auto 0;
}
@media (min-width: @bp-control-split) {
&-playback {
&-left {
float: left;
}
&-sound {
&-right {
float: right;
margin-top: 0;
}
@ -497,6 +497,20 @@
}
}
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
&.ios [data-player='mute'] + label,
&-audio.ios &-controls-right {
display: none;
}
// Center buttons so it looks less odd
&-audio.ios &-controls-left {
float: none;
}
// Full screen mode
&-fullscreen,
&.fullscreen-active {

18
src/sass/plyr.scss
View File

@ -196,10 +196,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
margin: $control-spacing auto 0;
}
@media (min-width: $bp-control-split) {
&-playback {
&-left {
float: left;
}
&-sound {
&-right {
float: right;
margin-top: 0;
}
@ -499,6 +499,20 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
}
}
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
&.ios [data-player='mute'] + label,
&-audio.ios &-controls-right {
display: none;
}
// Center buttons so it looks less odd
&-audio.ios &-controls-left {
float: none;
}
// Full screen mode
&-fullscreen,
&.fullscreen-active {