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
8 changed files with 62 additions and 25 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,11 @@
 # 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
--- 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.29/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.29/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.29/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.29/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.0.31/sprite.svg");
        </script>

        <!-- Plyr core script -->
-        <script src="//cdn.plyr.io/1.0.29/plyr.js"></script>
+        <script src="//cdn.plyr.io/1.0.31/plyr.js"></script>

        <!-- Docs script -->
-        <script src="//cdn.plyr.io/1.0.29/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.29",
+  "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.29/plyr.js` to `https://cdn.plyr.io/1.0.29/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.29/plyr.css">
-<script src="//cdn.plyr.io/1.0.29/plyr.js"></script>
+<link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
+<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.29/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>
@ -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.29
+// 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",
@ -687,7 +688,6 @@
                return false;
            }

-            
            if(player.supported.full) {
                // Remove native video controls
                player.media.removeAttribute("controls");
@ -800,10 +800,12 @@

                            if (track.kind === "captions") {
                                _on(track, "cuechange", function() {
-                                    if (this.activeCues[0]) {
-                                        if (this.activeCues[0].hasOwnProperty("text")) {
-                                            player.captionsContainer.innerHTML = this.activeCues[0].text;
-                                        }
+                                    // Clear container
+                                    player.captionsContainer.innerHTML = "";
+
+                                    // Display a cue, if there is one
+                                    if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) {
+                                        player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
                                    }
                                });
                            }
@ -1149,23 +1151,34 @@
            text.innerHTML = value;
        }

-        // Update the displayed play time
-        function _updateTimeDisplay() {
-            player.secs = parseInt(player.media.currentTime % 60);
-            player.mins = parseInt((player.media.currentTime / 60) % 60);
+        // Update the displayed time
+        function _updateTimeDisplay(time) {
+            player.secs = parseInt(time % 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);
@ -1298,12 +1311,16 @@
            // 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);

            // Captions
            _on(player.buttons.captions, "change", function() { 
-                console.log(this.checked);
                _toggleCaptions(this.checked);
            });

@ -1400,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();
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