Clarified the option

Added displayDuration option, small bug fix
- Using the native VTT cues, sometimes cues would not disappear
2015-03-30 21:04:38 +11:00 · 2015-03-30 21:03:48 +11:00 · 2015-03-30 19:17:27 +11:00 · 2015-03-22 23:24:15 +11:00 · 2015-03-22 21:26:29 +11:00
11 changed files with 174 additions and 92 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,3 +4,4 @@ node_modules
 .DS_Store
 aws.json
 docs/index.dev.html
 *.mp4
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,15 @@
 # Changelog
 ## v1.0.31
 - Display duration on metadataloaded
 ## v1.0.30
 - Fixed bug with media longer than 60 minutes (Fixes #69)
 ## v1.0.29
 - Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (Fixes #47)
 - Fixed a bug with caption toggle in 1.0.28
 ## v1.0.28
 - Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod)
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/error.html
+++ b/docs/error.html
@ -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.28/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.0.31/docs.css">
    </head>
    <body>
        <main>
--- a/docs/index.html
+++ b/docs/index.html
@ -8,10 +8,10 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Styles -->
-        <link rel="stylesheet" href="//cdn.plyr.io/1.0.28/plyr.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
        <!-- Docs styles -->
-        <link rel="stylesheet" href="//cdn.plyr.io/1.0.28/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.0.31/docs.css">
    </head>
    <body>
        <header>
@ -83,13 +83,13 @@
                    b.insertBefore(c, b.childNodes[0]);
                }
            }
-        })(document, "https://cdn.plyr.io/1.0.28/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.0.31/sprite.svg");
        </script>
        <!-- Plyr core script -->
-        <script src="//cdn.plyr.io/1.0.28/plyr.js"></script>
+        <script src="//cdn.plyr.io/1.0.31/plyr.js"></script>
        <!-- Docs script -->
-        <script src="//cdn.plyr.io/1.0.28/docs.js"></script>
+        <script src="//cdn.plyr.io/1.0.31/docs.js"></script>
    </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.0.28",
+  "version": "1.0.31",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -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.28/plyr.js` to `https://cdn.plyr.io/1.0.28/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.31/plyr.js` to `https://cdn.plyr.io/1.0.31/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.28/plyr.css">
+<link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
-<script src="//cdn.plyr.io/1.0.28/plyr.js"></script>
+<script src="//cdn.plyr.io/1.0.31/plyr.js"></script>
 ```
-You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.28/sprite.svg`.
+You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.31/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. 
@ -197,6 +197,12 @@ You can pass the following options to the setup method.
    <td>Boolean</td>
    <td><code>false</code></td>
    <td>Display control labels as tooltips on :hover &amp; :focus (by default, the labels are screen reader only).</td>
  </tr>
    <tr>
    <td><code>displayDuration</code></td>
    <td>Boolean</td>
    <td><code>true</code></td>
    <td>Displays the duration of the media on the "metadataloaded" event (on startup). This will only work if the `preload` attribute is not set to `none`. It is `auto` by default (if the attribute is not present).</td>
  </tr>
  <tr>
    <td><code>selectors</code></td>
@ -220,7 +226,7 @@ You can pass the following options to the setup method.
    <td><code>fullscreen</code></td>
    <td>Object</td>
    <td>&mdash;</td>
-    <td>Two properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. Also an extra property called <code>fallback</code> which will enable a full window view for older browsers. The default value is <code>true</code>.</td>
+    <td>Three properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. A <code>fallback</code> property which will enable a full window view for older browsers. The default value is <code>true</code>. A <code>hideControls</code> property which will hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`). The default value is <code>true</code>.</td>
  </tr>
  <tr>
    <td><code>storage</code></td>
@ -389,10 +395,12 @@ Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([s
 ## Mentions
 - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
 - [HTML5 Weekly #177](http://html5weekly.com/issues/177)
 - [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
 - [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
 - [Hacker News](https://news.ycombinator.com/item?id=9136774)
 - [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
 - [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
 - [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
 ## Used by
 - [Selz.com](https://selz.com)
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.28
+// plyr.js v1.0.31
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -21,6 +21,7 @@
        volume:                 5,
        click:                  true,
        tooltips:               false,
        displayDuration:        true,
        selectors: {
            container:          ".player",
            controls:           ".player-controls",
@ -55,13 +56,15 @@
            loading:            "loading",
            tooltip:            "player-tooltip",
            hidden:             "sr-only",
            hover:              "hover",
            captions: {
                enabled:        "captions-enabled",
                active:         "captions-active"
            },
            fullscreen: {
                enabled:        "fullscreen-enabled",
-                active:         "fullscreen-active"
+                active:         "fullscreen-active",
                hideControls:   "fullscreen-hide-controls"
            }
        },
        captions: {
@ -69,7 +72,8 @@
        },
        fullscreen: {
            enabled:            true,
-            fallback:           true
+            fallback:           true,
            hideControls:       true
        },
        storage: {
            enabled:            true,
@ -365,9 +369,6 @@
        // Toggle the checkbox
        event.target.checked = !event.target.checked;
        // Set the attribute for CSS hooks
        event.target[event.target.checked ? "setAttribute" : "removeAttribute"]("checked", "");
        // Trigger change event
        _triggerEvent(event.target, "change");
    }
@ -536,7 +537,7 @@
            if (config.captions.defaultActive) {
                _toggleClass(player.container, config.classes.captions.active, true);
-                player.buttons.captions.setAttribute("checked", "");
+                player.buttons.captions.checked = true;
            }
        }
@ -687,10 +688,9 @@
                return false;
            }
            // Remove native video controls
            if(player.supported.full) {
                // Remove native video controls
                player.media.removeAttribute("controls");
            }
                // Add type class
                _toggleClass(player.container, config.classes[player.type], true);
@ -704,7 +704,7 @@
                }
                // Inject the player wrapper
-            if(player.type === "video" && player.supported.full) {
+                if(player.type === "video") {
                    // Create the wrapper div
                    var wrapper = document.createElement("div");
                    wrapper.setAttribute("class", config.classes.videoWrapper);
@ -715,6 +715,7 @@
                    // Cache the container
                    player.videoContainer = wrapper;
                }
            }
            // Autoplay
            if(player.media.getAttribute("autoplay") !== null) {
@ -799,10 +800,12 @@
                            if (track.kind === "captions") {
                                _on(track, "cuechange", function() {
-                                    if (this.activeCues[0]) {
+                                    // Clear container
-                                        if (this.activeCues[0].hasOwnProperty("text")) {
+                                    player.captionsContainer.innerHTML = "";
-                                            player.captionsContainer.innerHTML = this.activeCues[0].text;
+
-                                        }
+                                    // Display a cue, if there is one
                                    if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) {
                                        player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
                                    }
                                });
                            }
@ -883,6 +886,11 @@
                else {
                    _log("Fullscreen not supported and fallback disabled.");
                }
                // Set control hide class hook
                if(config.fullscreen.hideControls) {
                    _toggleClass(player.container, config.classes.fullscreen.hideControls, true);
                }
            }   
        }
@ -1062,22 +1070,17 @@
        // Toggle captions
        function _toggleCaptions(show) { 
-            if(!player.supported.plyr) {
+            if(!player.supported.full) {
                return;
            }
            // If the method is called without parameter, toggle based on current value
-            if(typeof active === "undefined") {
+            if(typeof show === "undefined") {
                show = (player.container.className.indexOf(config.classes.captions.active) === -1);
                player.buttons.captions.checked = show;
            }
-            if (show) {
+            _toggleClass(player.container, config.classes.captions.active, show);
                _toggleClass(player.container, config.classes.captions.active, true);
            } 
            else {
                _toggleClass(player.container, config.classes.captions.active);
            }
        }
        // Check mute state
@ -1148,23 +1151,34 @@
            text.innerHTML = value;
        }
-        // Update the displayed play time
+        // Update the displayed time
-        function _updateTimeDisplay() {
+        function _updateTimeDisplay(time) {
-            player.secs = parseInt(player.media.currentTime % 60);
+            player.secs = parseInt(time % 60);
-            player.mins = parseInt((player.media.currentTime / 60) % 60);
+            player.mins = parseInt((time / 60) % 60);
            player.hours = parseInt(((time / 60) / 60) % 60);
            // Do we need to display hours?
            var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0)
            // Ensure it"s two digits. For example, 03 rather than 3.
            player.secs = ("0" + player.secs).slice(-2);
            player.mins = ("0" + player.mins).slice(-2);
            // Render
-            player.duration.innerHTML = player.mins + ":" + player.secs;
+            player.duration.innerHTML = (displayHours ? player.hours + ":" : "") + player.mins + ":" + player.secs;
        }
        // Show the duration on metadataloaded
        function _displayDuration() {
            if(player.media.paused) {
                _updateTimeDisplay(player.media.duration || 0);
            }
        }
        // Handle time change event
        function _timeUpdate(event) {
            // Duration
-            _updateTimeDisplay();
+            _updateTimeDisplay(player.media.currentTime);
            // Playing progress
            _updateProgress(event);
@ -1207,9 +1221,6 @@
            // Restart
            _seek();
            // Update the UI
            _checkPlaying();
            // Remove current sources
            _removeSources();
@ -1228,9 +1239,12 @@
                }
            }
            // Reset time display
            if(player.supported.full) {
                // Reset time display
                _timeUpdate();
                // Update the UI
                _checkPlaying();
            }
            // Re-load sources
@ -1297,6 +1311,11 @@
            // Update manual captions
            _on(player.media, "timeupdate", _seekManualCaptions);
            // Display duration
            if(config.displayDuration) {
                _on(player.media, "loadedmetadata", _displayDuration);
            }
            // Seek 
            _on(player.buttons.seek, "change input", _seek);
@ -1349,6 +1368,13 @@
                    }
                });
            }
            // Bind to mouse hover 
            if(config.fullscreen.hideControls) {
                _on(player.controls, "mouseenter mouseleave", function(event) {
                    _toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
                })
            }
        }
        function _init() {
@ -1358,23 +1384,18 @@
            // Sniff out the browser
            player.browser = _browserSniff();
            // Check for full support
            player.supported = api.supported();
            // If no native support, bail
            if(!player.supported.basic) {
                return false;
            }
            // Get the media element
            player.media = player.container.querySelectorAll("audio, video")[0];
            // Set media type
            player.type = player.media.tagName.toLowerCase();
-            // If iPhone/iPod and video, customisation support is limited
+            // Check for full support
-            if(/iPhone|iPod/i.test(navigator.userAgent) && player.type === "video") {
+            player.supported = api.supported(player.type);
-                player.supported.full = false;
+
            // If no native support, bail
            if(!player.supported.basic) {
                return false;
            }
            // Debug info
@ -1396,6 +1417,11 @@
                    return false;
                }
                // Display duration if available
                if(config.displayDuration) {
                    _displayDuration();
                }
                // Set up aria-label for Play button with the title option
                _setupAria();
@ -1438,13 +1464,34 @@
    }
    // Check for support 
-    api.supported = function() {
+    api.supported = function(type) {
        var browser = _browserSniff(),
-            basic  = (!!document.createElement("audio").canPlayType && !!document.createElement("video").canPlayType);
+            oldIE   = (browser.name === "IE" && browser.version <= 9),
            iPhone  = /iPhone|iPod/i.test(navigator.userAgent),
            audio   = !!document.createElement("audio").canPlayType,
            video   = !!document.createElement("video").canPlayType,
            basic, full;
        switch (type) {
            case "video": 
                basic = video;
                full  = (basic && (!oldIE && !iPhone));
                break;
            case "audio": 
                basic = audio;
                full  = (basic && !oldIE);
                break; 
            default:
                basic = (audio && video);
                full  = (basic && !oldIE);
                break;                
        }
        return {
            basic:  basic,
-            full:   basic && !(browser.name === "IE" && (browser.version <= 9))
+            full:   full
        };
    }
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -31,9 +31,9 @@
@tooltip-radius:            3px;
 // Progress
-@progress-bg:               lighten(@gray, 10%);
+@progress-bg:               rgba(red(@gray), green(@gray), blue(@gray), .2);
@progress-playing-bg:       @blue;
-@progress-buffered-bg:      @gray;
+@progress-buffered-bg:      rgba(red(@gray), green(@gray), blue(@gray), .25);
@progress-loading-size:     40px;
@progress-loading-bg:       rgba(0,0,0, .15);
@ -179,7 +179,7 @@
        .clearfix();
        .font-smoothing();
        position: relative;
-        padding: (@control-spacing * 2) @control-spacing @control-spacing;
+        padding: @control-spacing;
        background: @controls-bg;
        line-height: 1;
        text-align: center;
@ -313,7 +313,7 @@
    // <progress> element
    &-progress {
        position: absolute;
-        top: 0;
+        bottom: 100%;
        left: 0;
        right: 0;
        width: 100%;
@ -549,6 +549,17 @@
            left: 0;
            right: 0;
        }
        // Hide controls when playing in full screen
        &.fullscreen-hide-controls.playing .player-controls {
            transform: translateY(100%) translateY(@control-spacing / 2);
            transition: transform .3s 1s ease;
            &.hover {
                transform: translateY(0);
                transition-delay: 0;
            }
        }
    }
    // Change icons on state change
@ -575,10 +586,4 @@
    &.fullscreen-enabled [data-player='fullscreen'] + label {
        display: inline-block;
    }
    // Full browser view hides toggle
    &-fullscreen [data-player='fullscreen'],
    &-fullscreen [data-player='fullscreen'] + label {
        display: none !important;
    }
 }
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -31,9 +31,9 @@ $tooltip-arrow-size:      5px;
 $tooltip-radius:          3px;
 // Progress
-$progress-bg:             lighten($gray, 10%);
+$progress-bg:             rgba(red($gray), green($gray), blue($gray), .2);
 $progress-playing-bg:     $blue;
-$progress-buffered-bg:    $gray;
+$progress-buffered-bg:    rgba(red($gray), green($gray), blue($gray), .25);
 $progress-loading-size:   40px;
 $progress-loading-bg:     rgba(0,0,0, .15);
@ -187,7 +187,7 @@ $bp-captions-large:       768px; // When captions jump to the larger font size
        @include clearfix();
        @include font-smoothing();
        position: relative;
-        padding: ($control-spacing * 2) $control-spacing $control-spacing;
+        padding: $control-spacing;
        background: $controls-bg;
        line-height: 1;
        text-align: center;
@ -321,7 +321,7 @@ $bp-captions-large:       768px; // When captions jump to the larger font size
    // <progress> element
    &-progress {
        position: absolute;
-        top: 0;
+        bottom: 100%;
        left: 0;
        right: 0;
        width: 100%;
@ -557,6 +557,17 @@ $bp-captions-large:       768px; // When captions jump to the larger font size
            left: 0;
            right: 0;
        }
        // Hide controls when playing in full screen
        &.fullscreen-hide-controls.playing .player-controls {
            transform: translateY(100%) translateY($control-spacing / 2);
            transition: transform .3s 1s ease;
            &.hover {
                transform: translateY(0);
                transition-delay: 0;
            }
        }
    }
    // Change icons on state change
Author	SHA1	Message	Date
Sam Potts	c2c4172634	Clarified the option	2015-03-30 21:04:38 +11:00
Sam Potts	73de5b5773	Added displayDuration option, small bug fix - Using the native VTT cues, sometimes cues would not disappear	2015-03-30 21:03:48 +11:00
Sam Potts	aa1fed0b16	Fixed bug with media longer than 60 minutes (Fixes #69 )	2015-03-30 19:17:27 +11:00
Sam Potts	22331ae9f1	Added mention	2015-03-22 23:24:15 +11:00
Sam Potts	8b436276bf	Fixed bug with caption toggle, hide controls in fullscreen	2015-03-22 21:26:29 +11:00