From eaa5663057a7aa2d415fbb52a4edfb141862e42e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Miljkovi=C4=87?= Date: Fri, 17 Aug 2018 16:28:45 +0200 Subject: [PATCH 1/7] Fix CS issues --- includes/class-sm-post-types.php | 4 ++-- views/archive-wpfc_sermon.php | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/includes/class-sm-post-types.php b/includes/class-sm-post-types.php index 22bd7ed..0355123 100644 --- a/includes/class-sm-post-types.php +++ b/includes/class-sm-post-types.php @@ -47,7 +47,7 @@ public static function register_taxonomies() { 'manage_terms' => 'manage_wpfc_categories', 'edit_terms' => 'manage_wpfc_categories', 'delete_terms' => 'manage_wpfc_categories', - 'assign_terms' => 'manage_wpfc_categories' + 'assign_terms' => 'manage_wpfc_categories', ); register_taxonomy( 'wpfc_preacher', @@ -253,7 +253,7 @@ public static function register_post_types() { 'capability_type' => 'wpfc_sermon', 'capabilities' => array( 'manage_wpfc_categories' => 'manage_wpfc_categories', - 'manage_wpfc_sm_settings' => 'manage_wpfc_sm_settings' + 'manage_wpfc_sm_settings' => 'manage_wpfc_sm_settings', ), 'map_meta_cap' => true, 'publicly_queryable' => true, diff --git a/views/archive-wpfc_sermon.php b/views/archive-wpfc_sermon.php index 706921d..0e8a0d3 100644 --- a/views/archive-wpfc_sermon.php +++ b/views/archive-wpfc_sermon.php @@ -13,11 +13,11 @@ .smpro-items {--smpro-layout-columns: '. $smpro_layout_columns .'}'; + echo ''; echo '
'; endif; From 8447429c6c0281cfcfed73ff65e6f424b006b559 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Miljkovi=C4=87?= Date: Mon, 20 Aug 2018 23:40:06 +0200 Subject: [PATCH 2/7] Fix YouTube issue, update plyr to latest, other player fixes --- assets/css/partials/_player.scss | 7 + assets/css/sermon.min.css | 2 +- assets/css/sermon.min.css.map | 6 +- assets/css/sermon.scss | 9 +- assets/js/plyr.js | 14 +- assets/js/plyr.min.js | 2 +- assets/vendor/css/plyr.min.css | 8 +- assets/vendor/js/plyr.js | 3968 -------- assets/vendor/js/plyr.min.js | 1 - assets/vendor/js/plyr.polyfilled.js | 13854 ++++++++++++++++++++++++++ includes/sm-core-functions.php | 2 +- includes/sm-template-functions.php | 6 +- readme.txt | 4 + sermons.php | 2 +- 14 files changed, 13886 insertions(+), 3999 deletions(-) create mode 100644 assets/css/partials/_player.scss delete mode 100644 assets/vendor/js/plyr.js delete mode 100644 assets/vendor/js/plyr.min.js create mode 100644 assets/vendor/js/plyr.polyfilled.js diff --git a/assets/css/partials/_player.scss b/assets/css/partials/_player.scss new file mode 100644 index 0000000..f52134f --- /dev/null +++ b/assets/css/partials/_player.scss @@ -0,0 +1,7 @@ +.wpfc-sermon-player { + vertical-align: middle; +} + +.wpfc-sermon-single-audio.player-plyr > .plyr { + border: 1px solid #dbe3e8; +} \ No newline at end of file diff --git a/assets/css/sermon.min.css b/assets/css/sermon.min.css index 7633d05..1fa2e94 100644 --- a/assets/css/sermon.min.css +++ b/assets/css/sermon.min.css @@ -1,2 +1,2 @@ -.wpfc-sermon-container #wpfc_sermon_sorting{padding:0;margin:0 0 48px 0}.wpfc-sermon-container #wpfc_sermon_sorting>div{margin:0 8px 4px 0}.wpfc-sermon-container #wpfc_sermon_sorting>div:last-child{margin:0 0 4px 0}.wpfc-sermon-container #wpfc_sermon_sorting form{margin:0}@media (max-width: 700px){.wpfc-sermon-container #wpfc_sermon_sorting>div{width:100%;margin:0 0 12px 0}.wpfc-sermon-container #wpfc_sermon_sorting>div:last-child{margin:0}.wpfc-sermon-container #wpfc_sermon_sorting select{display:block;width:100%;max-width:100%}}.wpfc-sermon-shortcode{margin-bottom:2rem}.wpfc-sermon-image{height:auto;position:relative}.wpfc-sermon-image-img{width:100%;background-size:cover;background-position:center}.wpfc-sermon-header{display:grid;align-items:center}.wpfc-sermon-header.aside-exists{grid-template-columns:70% 30%}.wpfc-sermon-header-aside{text-align:center}.wpfc-sermon-title{margin:0;padding:0}.wpfc-sermon-meta-item{font-size:14px;opacity:.87}.wpfc-sermon-meta-series{margin:0 0 8px 0}.wpfc-sermon-meta-date{margin:8px 0 0}.wpfc-sermon-description{font-size:14px;margin:8px 0 0}.wpfc-sermon-description p{margin:0 0 12px 0}.wpfc-sermon-description p:last-child{margin:0}.wpfc-sermon-audio{margin-top:24px}.wpfc-sermon-footer{margin-top:24px;padding-top:24px;border-top:1px solid #ddd}.wpfc-sermon-footer .wpfc-sermon-meta-item{display:inline-block;position:relative}.wpfc-sermon-footer .wpfc-sermon-meta-item:not(:last-child):after{content:'|';padding:0 4px;color:#ddd}.wpfc-sermon-meta-preacher img{border-radius:50%;width:35px;height:35px;vertical-align:middle;display:inline-block}.wpfc-sermon-meta-preacher>a{text-decoration:none;box-shadow:none;border:0;display:inline-block}.wpfc-sermon-meta-prefix,.wpfc-sermon-meta-text{vertical-align:middle}.wpfc-sermon>.wpfc-sermon-inner{background:white;border:1px solid #ddd}.wpfc-sermon-main{padding:24px}.wpfc-sermon-att-audio,.wpfc-sermon-att-notes,.wpfc-sermon-bulletin{width:auto;height:auto;padding:4px;border:1px solid #efefef;margin-bottom:4px}@media (min-width: 801px){.wpfc-sermon-inner{display:flex;flex-flow:row wrap}.wpfc-sermon-image{flex:0 30%}.wpfc-sermon-image-img{height:100%}.wpfc-sermon-main{flex:1}}@media (max-width: 800px){.wpfc-sermon-image-img{padding-top:56.25%}}.wpfc-sermon-single-header{text-align:center}.wpfc-sermon-single-meta{margin:8px -8px 0 -8px}.wpfc-sermon-single-meta-item{display:inline-block;margin:0 8px;font-size:14px;opacity:.87}.wpfc-sermon-single-meta-date{margin-bottom:8px}.wpfc-sermon-single-title{margin:0;padding:0}.wpfc-sermon-single .wp-video{margin:auto}.wpfc-sermon-single .mejs-video{margin:0}.wpfc-sermon-single mediaelementwrapper>iframe{width:100%;margin-bottom:0;height:100%}.wpfc-sermon-single-media{text-align:center}.wpfc-sermon-single-media>div{margin:24px 0}.wpfc-sermon-single-audio{display:flex;justify-content:center}.wpfc-sermon-single-audio-download{display:flex;align-items:center;flex:none;background:white;padding:0 1.25rem;box-shadow:none;text-decoration:none;outline:none}.player-none .wpfc-sermon-single-audio-download svg{fill:#5d5d5d}.player-wordpress .wpfc-sermon-single-audio-download{background:#222;margin-bottom:1.75em}.player-wordpress .wpfc-sermon-single-audio-download svg{fill:#fff}.player-mediaelement .wpfc-sermon-single-audio-download{background:#222}.player-mediaelement .wpfc-sermon-single-audio-download:hover{background-color:rgba(51,51,51,0.7)}.player-mediaelement .wpfc-sermon-single-audio-download svg{fill:#fff}.player-plyr .wpfc-sermon-single-audio-download{border:1px solid #dbe3e8;border-left:none;transition:background .3s}.player-plyr .wpfc-sermon-single-audio-download:hover{background:#dbe3e8}.player-plyr .wpfc-sermon-single-audio-download:hover svg{fill:#fff}.wpfc-sermon-single .player-plyr .plyr{flex:1}.wpfc-sermon-single-description{margin-top:24px}.wpfc-sermon-single-description p:first-child{margin-top:0}.wpfc-sermon-single-description p:last-child{margin-bottom:0}.wpfc-sermon-single-attachments{background:#efefef;border:1px solid #ddd;padding:24px;margin-top:24px}.wpfc-sermon-single-attachments #wpfc-attachments strong,.wpfc-sermon-single-attachments #wpfc-attachments a{display:block}.wpfc-sermon-single-attachments #wpfc-attachments p{margin:0}.wpfc-sermon-single-attachments #wpfc-attachments .dashicons{line-height:28px}.wpfc-sermon-single-topics{margin-top:24px}.wpfc-sermon-single-navigation{border-top:1px solid #ddd;margin-top:2rem;padding-top:1rem;display:grid;grid-template-columns:50% 50%}.wpfc-sermon-single-navigation .next-sermon{text-align:right}ul#wpfc_images_grid{display:grid;grid-template-columns:50% 50%;grid-gap:1rem;padding:0}ul#wpfc_images_grid .wpfc_grid_image{display:block}ul#wpfc_images_grid .wpfc_grid_image img{margin-bottom:15px}ul#wpfc_images_grid .wpfc_grid_title{margin:0}.subscribe{text-align:center}.subscribe li{display:inline-block;border:none;width:250px;box-sizing:border-box;margin-bottom:1em}@media screen and (min-width: 400px){.subscribe li:not(:last-child){margin-right:1em}}.subscribe li a{display:block;text-align:center;color:white;padding:55px 20px 10px;border-radius:5px;text-shadow:none;text-decoration:none;box-shadow:none;transition:all .3s ease;background-repeat:no-repeat;background-position:center 10px;background-size:40px}.subscribe li a.itunes{background-color:#732BBE}.subscribe li a.itunes:focus,.subscribe li a.itunes:hover,.subscribe li a.itunes:active{background-color:#41186b}.subscribe li a.android{background-color:#6AB344}.subscribe li a.android:focus,.subscribe li a.android:hover,.subscribe li a.android:active{background-color:#3e6928}.subscribe li a.overcast{background-color:#f80}.subscribe li a.overcast:focus,.subscribe li a.overcast:hover,.subscribe li a.overcast:active{background-color:#995200}.subscribe li a.itunes,.subscribe li a.overcast{background-image:url('data:image/svg+xml;utf8,')}.subscribe li a.android{background-image:url('data:image/svg+xml;utf8,')}.wpfc-sermon-player{vertical-align:middle} +.wpfc-sermon-container #wpfc_sermon_sorting{padding:0;margin:0 0 48px 0}.wpfc-sermon-container #wpfc_sermon_sorting>div{margin:0 8px 4px 0}.wpfc-sermon-container #wpfc_sermon_sorting>div:last-child{margin:0 0 4px 0}.wpfc-sermon-container #wpfc_sermon_sorting form{margin:0}@media (max-width: 700px){.wpfc-sermon-container #wpfc_sermon_sorting>div{width:100%;margin:0 0 12px 0}.wpfc-sermon-container #wpfc_sermon_sorting>div:last-child{margin:0}.wpfc-sermon-container #wpfc_sermon_sorting select{display:block;width:100%;max-width:100%}}.wpfc-sermon-shortcode{margin-bottom:2rem}.wpfc-sermon-image{height:auto;position:relative}.wpfc-sermon-image-img{width:100%;background-size:cover;background-position:center}.wpfc-sermon-header{display:grid;align-items:center}.wpfc-sermon-header.aside-exists{grid-template-columns:70% 30%}.wpfc-sermon-header-aside{text-align:center}.wpfc-sermon-title{margin:0;padding:0}.wpfc-sermon-meta-item{font-size:14px;opacity:.87}.wpfc-sermon-meta-series{margin:0 0 8px 0}.wpfc-sermon-meta-date{margin:8px 0 0}.wpfc-sermon-description{font-size:14px;margin:8px 0 0}.wpfc-sermon-description p{margin:0 0 12px 0}.wpfc-sermon-description p:last-child{margin:0}.wpfc-sermon-audio{margin-top:24px}.wpfc-sermon-footer{margin-top:24px;padding-top:24px;border-top:1px solid #ddd}.wpfc-sermon-footer .wpfc-sermon-meta-item{display:inline-block;position:relative}.wpfc-sermon-footer .wpfc-sermon-meta-item:not(:last-child):after{content:'|';padding:0 4px;color:#ddd}.wpfc-sermon-meta-preacher img{border-radius:50%;width:35px;height:35px;vertical-align:middle;display:inline-block}.wpfc-sermon-meta-preacher>a{text-decoration:none;box-shadow:none;border:0;display:inline-block}.wpfc-sermon-meta-prefix,.wpfc-sermon-meta-text{vertical-align:middle}.wpfc-sermon>.wpfc-sermon-inner{background:white;border:1px solid #ddd}.wpfc-sermon-main{padding:24px}.wpfc-sermon-att-audio,.wpfc-sermon-att-notes,.wpfc-sermon-bulletin{width:auto;height:auto;padding:4px;border:1px solid #efefef;margin-bottom:4px}@media (min-width: 801px){.wpfc-sermon-inner{display:flex;flex-flow:row wrap}.wpfc-sermon-image{flex:0 30%}.wpfc-sermon-image-img{height:100%}.wpfc-sermon-main{flex:1}}@media (max-width: 800px){.wpfc-sermon-image-img{padding-top:56.25%}}.wpfc-sermon-single-header{text-align:center}.wpfc-sermon-single-meta{margin:8px -8px 0 -8px}.wpfc-sermon-single-meta-item{display:inline-block;margin:0 8px;font-size:14px;opacity:.87}.wpfc-sermon-single-meta-date{margin-bottom:8px}.wpfc-sermon-single-title{margin:0;padding:0}.wpfc-sermon-single .wp-video{margin:auto}.wpfc-sermon-single .mejs-video{margin:0}.wpfc-sermon-single mediaelementwrapper>iframe{width:100%;margin-bottom:0;height:100%}.wpfc-sermon-single-media{text-align:center}.wpfc-sermon-single-media>div{margin:24px 0}.wpfc-sermon-single-audio{display:flex;justify-content:center}.wpfc-sermon-single-audio-download{display:flex;align-items:center;flex:none;background:white;padding:0 1.25rem;box-shadow:none;text-decoration:none;outline:none}.player-none .wpfc-sermon-single-audio-download svg{fill:#5d5d5d}.player-wordpress .wpfc-sermon-single-audio-download{background:#222;margin-bottom:1.75em}.player-wordpress .wpfc-sermon-single-audio-download svg{fill:#fff}.player-mediaelement .wpfc-sermon-single-audio-download{background:#222}.player-mediaelement .wpfc-sermon-single-audio-download:hover{background-color:rgba(51,51,51,0.7)}.player-mediaelement .wpfc-sermon-single-audio-download svg{fill:#fff}.player-plyr .wpfc-sermon-single-audio-download{border:1px solid #dbe3e8;border-left:none;transition:background .3s}.player-plyr .wpfc-sermon-single-audio-download:hover{background:#dbe3e8}.player-plyr .wpfc-sermon-single-audio-download:hover svg{fill:#fff}.wpfc-sermon-single .player-plyr .plyr{flex:1}.wpfc-sermon-single-description{margin-top:24px}.wpfc-sermon-single-description p:first-child{margin-top:0}.wpfc-sermon-single-description p:last-child{margin-bottom:0}.wpfc-sermon-single-attachments{background:#efefef;border:1px solid #ddd;padding:24px;margin-top:24px}.wpfc-sermon-single-attachments #wpfc-attachments strong,.wpfc-sermon-single-attachments #wpfc-attachments a{display:block}.wpfc-sermon-single-attachments #wpfc-attachments p{margin:0}.wpfc-sermon-single-attachments #wpfc-attachments .dashicons{line-height:28px}.wpfc-sermon-single-topics{margin-top:24px}.wpfc-sermon-single-navigation{border-top:1px solid #ddd;margin-top:2rem;padding-top:1rem;display:grid;grid-template-columns:50% 50%}.wpfc-sermon-single-navigation .next-sermon{text-align:right}ul#wpfc_images_grid{display:grid;grid-template-columns:50% 50%;grid-gap:1rem;padding:0}ul#wpfc_images_grid .wpfc_grid_image{display:block}ul#wpfc_images_grid .wpfc_grid_image img{margin-bottom:15px}ul#wpfc_images_grid .wpfc_grid_title{margin:0}.subscribe{text-align:center}.subscribe li{display:inline-block;border:none;width:250px;box-sizing:border-box;margin-bottom:1em}@media screen and (min-width: 400px){.subscribe li:not(:last-child){margin-right:1em}}.subscribe li a{display:block;text-align:center;color:white;padding:55px 20px 10px;border-radius:5px;text-shadow:none;text-decoration:none;box-shadow:none;transition:all .3s ease;background-repeat:no-repeat;background-position:center 10px;background-size:40px}.subscribe li a.itunes{background-color:#732BBE}.subscribe li a.itunes:focus,.subscribe li a.itunes:hover,.subscribe li a.itunes:active{background-color:#41186b}.subscribe li a.android{background-color:#6AB344}.subscribe li a.android:focus,.subscribe li a.android:hover,.subscribe li a.android:active{background-color:#3e6928}.subscribe li a.overcast{background-color:#f80}.subscribe li a.overcast:focus,.subscribe li a.overcast:hover,.subscribe li a.overcast:active{background-color:#995200}.subscribe li a.itunes,.subscribe li a.overcast{background-image:url('data:image/svg+xml;utf8,')}.subscribe li a.android{background-image:url('data:image/svg+xml;utf8,')}.wpfc-sermon-player{vertical-align:middle}.wpfc-sermon-single-audio.player-plyr>.plyr{border:1px solid #dbe3e8} /*# sourceMappingURL=sermon.min.css.map */ diff --git a/assets/css/sermon.min.css.map b/assets/css/sermon.min.css.map index 969b34e..919bec3 100644 --- a/assets/css/sermon.min.css.map +++ b/assets/css/sermon.min.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "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", -"sources": ["partials/_sorting.scss","partials/_archive.scss","partials/_single.scss","partials/_shortcodes.scss","sermon.scss"], +"mappings": "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", +"sources": ["partials/_sorting.scss","partials/_archive.scss","partials/_single.scss","partials/_shortcodes.scss","partials/_player.scss"], "names": [], "file": "sermon.min.css" -} +} \ No newline at end of file diff --git a/assets/css/sermon.scss b/assets/css/sermon.scss index 0794499..e69f0df 100644 --- a/assets/css/sermon.scss +++ b/assets/css/sermon.scss @@ -6,10 +6,5 @@ @import 'partials/single'; // Shortcode styling @import "partials/shortcodes"; - -/** - * Common audio CSS - */ -.wpfc-sermon-player { - vertical-align: middle; -} +// Video/audio player styling +@import "partials/player"; \ No newline at end of file diff --git a/assets/js/plyr.js b/assets/js/plyr.js index 740dc6f..8d4371d 100644 --- a/assets/js/plyr.js +++ b/assets/js/plyr.js @@ -9,16 +9,18 @@ if ( typeof sm_data === 'undefined' ) { } window.addEventListener( 'DOMContentLoaded', function () { - var players = plyr.setup( document.querySelectorAll( '.wpfc-sermon-player,.wpfc-sermon-video-player' ), { - debug: sm_data.debug, + const players = Plyr.setup( document.querySelectorAll( '.wpfc-sermon-player,.wpfc-sermon-video-player' ), { + debug: false, // @todo - revert this enabled: sm_data.use_native_player_safari ? ( !/Safari/.test( navigator.userAgent ) || ( /Safari/.test( navigator.userAgent ) && /Chrome|OPR/.test( navigator.userAgent ) ) ) : true, } ); - for ( var p in players ) { + + for ( let p in players ) { if ( players.hasOwnProperty( p ) ) { players[ p ].on( 'loadedmetadata ready', function ( event ) { - if ( typeof this.firstChild.dataset.plyr_seek !== 'undefined' ) { - var instance = event.detail.plyr; - instance.seek( parseInt( this.firstChild.dataset.plyr_seek ) ); + let instance = event.detail.plyr; + + if ( instance.elements.original.dataset.plyr_seek !== undefined ) { + instance.currentTime = parseInt( instance.elements.original.dataset.plyr_seek ); } } ); } diff --git a/assets/js/plyr.min.js b/assets/js/plyr.min.js index 604a389..17e7a05 100644 --- a/assets/js/plyr.min.js +++ b/assets/js/plyr.min.js @@ -1 +1 @@ -if(typeof sm_data==="undefined"){sm_data={debug:false,use_native_player_safari:false}}else{sm_data.debug=sm_data.debug==="1";sm_data.use_native_player_safari=sm_data.use_native_player_safari==="1"}window.addEventListener("DOMContentLoaded",function(){var players=plyr.setup(document.querySelectorAll(".wpfc-sermon-player,.wpfc-sermon-video-player"),{debug:sm_data.debug,enabled:sm_data.use_native_player_safari?!/Safari/.test(navigator.userAgent)||/Safari/.test(navigator.userAgent)&&/Chrome|OPR/.test(navigator.userAgent):true});for(var p in players){if(players.hasOwnProperty(p)){players[p].on("loadedmetadata ready",function(event){if(typeof this.firstChild.dataset.plyr_seek!=="undefined"){var instance=event.detail.plyr;instance.seek(parseInt(this.firstChild.dataset.plyr_seek))}})}}}); \ No newline at end of file +if(typeof sm_data==="undefined"){sm_data={debug:false,use_native_player_safari:false}}else{sm_data.debug=sm_data.debug==="1";sm_data.use_native_player_safari=sm_data.use_native_player_safari==="1"}window.addEventListener("DOMContentLoaded",function(){const players=Plyr.setup(document.querySelectorAll(".wpfc-sermon-player,.wpfc-sermon-video-player"),{debug:false,enabled:sm_data.use_native_player_safari?!/Safari/.test(navigator.userAgent)||/Safari/.test(navigator.userAgent)&&/Chrome|OPR/.test(navigator.userAgent):true});for(let p in players){if(players.hasOwnProperty(p)){players[p].on("loadedmetadata ready",function(event){let instance=event.detail.plyr;if(instance.elements.original.dataset.plyr_seek!==undefined){instance.currentTime=parseInt(instance.elements.original.dataset.plyr_seek)}})}}}); \ No newline at end of file diff --git a/assets/vendor/css/plyr.min.css b/assets/vendor/css/plyr.min.css index c13f36c..1804c87 100644 --- a/assets/vendor/css/plyr.min.css +++ b/assets/vendor/css/plyr.min.css @@ -1,7 +1 @@ -/* - * Plyr - * plyr.css v2.0.18 - * https://github.com/sampotts/plyr - * License: The MIT License (MIT) - */ -@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{-webkit-box-sizing:border-box;box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr:focus{outline:0}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;-webkit-transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);-webkit-box-sizing:border-box;box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;-webkit-transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;-webkit-transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]:focus{outline:0}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;-webkit-transform:scale(1.25);transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:1px dotted rgba(255,255,255,.5)}.plyr--audio input[type=range].tab-focus:focus{outline:1px dotted rgba(86,93,100,.5)}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit}.plyr__video-embed{padding-bottom:56.25%;height:0;border-radius:inherit;overflow:hidden;z-index:0}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr .plyr__video-embed iframe{pointer-events:none}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;-webkit-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;color:#fff;font-size:16px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.7);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{-webkit-transform:translateY(-15px);transform:translateY(-15px)}@media (min-width:1024px){.plyr--fullscreen-active .plyr__captions{font-size:32px}}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;text-align:center;pointer-events:none}.plyr__controls>*{pointer-events:all}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;-webkit-transition:background .3s ease,color .3s ease,opacity .3s ease;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px 10px 10px;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.5)));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565d64}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15);box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;-webkit-transition:all .3s ease;transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.plyr__play-large:focus{outline:1px dotted rgba(255,255,255,.5)}.plyr .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen]{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;pointer-events:none;opacity:0;background:rgba(0,0,0,.7);border-radius:3px;color:#fff;font-size:14px;line-height:1.3;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.7);border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;-webkit-transform:translateX(50%);transform:translateX(50%)}.plyr__controls button:first-child .plyr__tooltip--visible,.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:first-child:hover .plyr__tooltip,.plyr__controls button:last-child .plyr__tooltip--visible,.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:last-child:hover .plyr__tooltip{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-webkit-box-flex:1;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;-webkit-transition:none;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;-webkit-transition:none;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;-webkit-transition:none;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress--buffer::-ms-fill{-webkit-transition:width .2s ease;transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen-active{height:100%;width:100%;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__video-embed{overflow:visible}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr--fullscreen-fallback.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000000} \ No newline at end of file +@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:14px;left:0;padding:10px;position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:16px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 5px rgba(26,175,255,.5);outline:0}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--video .plyr__control svg{filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls .plyr__volume,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls .plyr__progress+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:2px}.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0;margin-right:auto}.plyr__controls:empty{display:none}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls .plyr__volume,.plyr__controls>.plyr__control{margin-left:10px}}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video .plyr__controls{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:20px 5px 5px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:35px 10px 10px}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:16px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4f5b5f;display:flex;font-size:14px;padding:4px 11px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px}.plyr__menu__container .plyr__control[role=menuitemradio]::after,.plyr__menu__container .plyr__control[role=menuitemradio]::before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]::before{background:rgba(0,0,0,.1);content:'';display:block;flex-shrink:0;height:16px;margin-right:10px;transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]::after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{background:#1aafff}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover::before{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;transition:box-shadow .3s ease;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;transition:box-shadow .3s ease;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;transition:box-shadow .3s ease;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;transition:box-shadow .3s ease;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 5px rgba(26,175,255,.5);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 5px rgba(26,175,255,.5);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 5px rgba(26,175,255,.5);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr__time{font-size:14px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:14px;font-weight:500;left:50%;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{background:#000;overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__progress{flex:1;left:7px;margin-right:14px;position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px)}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:14px;left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin-top:-3px;padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress__buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress__buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(183,197,205,.66)}.plyr__volume{align-items:center;display:flex;flex:1;position:relative}.plyr__volume input[type=range]{margin-left:5px;position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:90px}}@media (min-width:768px){.plyr__volume{max-width:110px}}.plyr--is-ios .plyr__volume{display:none!important}.plyr--is-ios.plyr--vimeo [data-plyr=mute]{display:none!important}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important} \ No newline at end of file diff --git a/assets/vendor/js/plyr.js b/assets/vendor/js/plyr.js deleted file mode 100644 index 27c1d6e..0000000 --- a/assets/vendor/js/plyr.js +++ /dev/null @@ -1,3968 +0,0 @@ -// ========================================================================== -// Plyr -// plyr.js v2.0.18 -// https://github.com/sampotts/plyr -// License: The MIT License (MIT) -// ========================================================================== -// Credits: http://paypal.github.io/accessible-html5-video-player/ -// ========================================================================== -// WPFC additions: -// - Vimeo player fix (https://github.com/sampotts/plyr/pull/805) -// ========================================================================== - -(function(root, factory) { - 'use strict'; - /*global define,module*/ - - if (typeof module === 'object' && typeof module.exports === 'object') { - // Node, CommonJS-like - module.exports = factory(root, document); - } else if (typeof define === 'function' && define.amd) { - // AMD - define([], function() { - return factory(root, document); - }); - } else { - // Browser globals (root is window) - root.plyr = factory(root, document); - } -})(typeof window !== 'undefined' ? window : this, function(window, document) { - 'use strict'; - - // Globals - var fullscreen, - scroll = { x: 0, y: 0 }, - // Default config - defaults = { - enabled: true, - debug: false, - autoplay: false, - loop: false, - seekTime: 10, - volume: 10, - volumeMin: 0, - volumeMax: 10, - volumeStep: 1, - duration: null, - displayDuration: true, - loadSprite: true, - iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/2.0.18/plyr.svg', - blankUrl: 'https://cdn.plyr.io/static/blank.mp4', - clickToPlay: true, - hideControls: true, - showPosterOnEnd: false, - disableContextMenu: true, - keyboardShorcuts: { - focused: true, - global: false, - }, - tooltips: { - controls: false, - seek: true, - }, - selectors: { - html5: 'video, audio', - embed: '[data-type]', - editable: 'input, textarea, select, [contenteditable]', - container: '.plyr', - controls: { - container: null, - wrapper: '.plyr__controls', - }, - labels: '[data-plyr]', - buttons: { - seek: '[data-plyr="seek"]', - play: '[data-plyr="play"]', - pause: '[data-plyr="pause"]', - restart: '[data-plyr="restart"]', - rewind: '[data-plyr="rewind"]', - forward: '[data-plyr="fast-forward"]', - mute: '[data-plyr="mute"]', - captions: '[data-plyr="captions"]', - fullscreen: '[data-plyr="fullscreen"]', - }, - volume: { - input: '[data-plyr="volume"]', - display: '.plyr__volume--display', - }, - progress: { - container: '.plyr__progress', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played', - }, - captions: '.plyr__captions', - currentTime: '.plyr__time--current', - duration: '.plyr__time--duration', - }, - classes: { - setup: 'plyr--setup', - ready: 'plyr--ready', - videoWrapper: 'plyr__video-wrapper', - embedWrapper: 'plyr__video-embed', - type: 'plyr--{0}', - stopped: 'plyr--stopped', - playing: 'plyr--playing', - muted: 'plyr--muted', - loading: 'plyr--loading', - hover: 'plyr--hover', - tooltip: 'plyr__tooltip', - hidden: 'plyr__sr-only', - hideControls: 'plyr--hide-controls', - isIos: 'plyr--is-ios', - isTouch: 'plyr--is-touch', - captions: { - enabled: 'plyr--captions-enabled', - active: 'plyr--captions-active', - }, - fullscreen: { - enabled: 'plyr--fullscreen-enabled', - fallback: 'plyr--fullscreen-fallback', - active: 'plyr--fullscreen-active', - }, - tabFocus: 'tab-focus', - }, - captions: { - defaultActive: false, - }, - fullscreen: { - enabled: true, - fallback: true, - allowAudio: false, - }, - storage: { - enabled: true, - key: 'plyr', - }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'], - i18n: { - restart: 'Restart', - rewind: 'Rewind {seektime} secs', - play: 'Play', - pause: 'Pause', - forward: 'Forward {seektime} secs', - played: 'played', - buffered: 'buffered', - currentTime: 'Current time', - duration: 'Duration', - volume: 'Volume', - toggleMute: 'Toggle Mute', - toggleCaptions: 'Toggle Captions', - toggleFullscreen: 'Toggle Fullscreen', - frameTitle: 'Player for {title}', - }, - types: { - embed: ['youtube', 'vimeo', 'soundcloud'], - html5: ['video', 'audio'], - }, - // URLs - urls: { - vimeo: { - api: 'https://player.vimeo.com/api/player.js', - }, - youtube: { - api: 'https://www.youtube.com/iframe_api', - }, - soundcloud: { - api: 'https://w.soundcloud.com/player/api.js', - }, - }, - // Custom control listeners - listeners: { - seek: null, - play: null, - pause: null, - restart: null, - rewind: null, - forward: null, - mute: null, - volume: null, - captions: null, - fullscreen: null, - }, - // Events to watch on HTML5 media elements - events: [ - 'ready', - 'ended', - 'progress', - 'stalled', - 'playing', - 'waiting', - 'canplay', - 'canplaythrough', - 'loadstart', - 'loadeddata', - 'loadedmetadata', - 'timeupdate', - 'volumechange', - 'play', - 'pause', - 'error', - 'seeking', - 'seeked', - 'emptied', - ], - // Logging - logPrefix: '[Plyr]', - }; - - // Credits: http://paypal.github.io/accessible-html5-video-player/ - // Unfortunately, due to mixed support, UA sniffing is required - function _browserSniff() { - var ua = navigator.userAgent, - name = navigator.appName, - fullVersion = '' + parseFloat(navigator.appVersion), - majorVersion = parseInt(navigator.appVersion, 10), - nameOffset, - verOffset, - ix, - isIE = false, - isFirefox = false, - isChrome = false, - isSafari = false; - - if (navigator.appVersion.indexOf('Windows NT') !== -1 && navigator.appVersion.indexOf('rv:11') !== -1) { - // MSIE 11 - isIE = true; - name = 'IE'; - fullVersion = '11'; - } else if ((verOffset = ua.indexOf('MSIE')) !== -1) { - // MSIE - isIE = true; - name = 'IE'; - fullVersion = ua.substring(verOffset + 5); - } else if ((verOffset = ua.indexOf('Chrome')) !== -1) { - // Chrome - isChrome = true; - name = 'Chrome'; - fullVersion = ua.substring(verOffset + 7); - } else if ((verOffset = ua.indexOf('Safari')) !== -1) { - // Safari - isSafari = true; - name = 'Safari'; - fullVersion = ua.substring(verOffset + 7); - if ((verOffset = ua.indexOf('Version')) !== -1) { - fullVersion = ua.substring(verOffset + 8); - } - } else if ((verOffset = ua.indexOf('Firefox')) !== -1) { - // Firefox - isFirefox = true; - name = 'Firefox'; - fullVersion = ua.substring(verOffset + 8); - } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) { - // In most other browsers, 'name/version' is at the end of userAgent - name = ua.substring(nameOffset, verOffset); - fullVersion = ua.substring(verOffset + 1); - - if (name.toLowerCase() === name.toUpperCase()) { - name = navigator.appName; - } - } - - // Trim the fullVersion string at semicolon/space if present - if ((ix = fullVersion.indexOf(';')) !== -1) { - fullVersion = fullVersion.substring(0, ix); - } - if ((ix = fullVersion.indexOf(' ')) !== -1) { - fullVersion = fullVersion.substring(0, ix); - } - - // Get major version - majorVersion = parseInt('' + fullVersion, 10); - if (isNaN(majorVersion)) { - fullVersion = '' + parseFloat(navigator.appVersion); - majorVersion = parseInt(navigator.appVersion, 10); - } - - // Return data - return { - name: name, - version: majorVersion, - isIE: isIE, - isFirefox: isFirefox, - isChrome: isChrome, - isSafari: isSafari, - isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), - isIphone: /(iPhone|iPod)/g.test(navigator.userAgent), - isTouch: 'ontouchstart' in document.documentElement, - }; - } - - // Check for mime type support against a player instance - // Credits: http://diveintohtml5.info/everything.html - // Related: http://www.leanbackplyr.com/test/h5mt.html - function _supportMime(plyr, mimeType) { - var media = plyr.media; - - if (plyr.type === 'video') { - // Check type - switch (mimeType) { - case 'video/webm': - return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '')); - case 'video/mp4': - return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); - case 'video/ogg': - return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '')); - } - } else if (plyr.type === 'audio') { - // Check type - switch (mimeType) { - case 'audio/mpeg': - return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, '')); - case 'audio/ogg': - return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')); - case 'audio/wav': - return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, '')); - } - } - - // If we got this far, we're stuffed - return false; - } - - // Inject a script - function _injectScript(source) { - if (document.querySelectorAll('script[src="' + source + '"]').length) { - return; - } - - var tag = document.createElement('script'); - tag.src = source; - var firstScriptTag = document.getElementsByTagName('script')[0]; - firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); - } - - // Element exists in an array - function _inArray(haystack, needle) { - return Array.prototype.indexOf && haystack.indexOf(needle) !== -1; - } - - // Replace all - function _replaceAll(string, find, replace) { - return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace); - } - - // Wrap an element - function _wrap(elements, wrapper) { - // Convert `elements` to an array, if necessary. - if (!elements.length) { - elements = [elements]; - } - - // Loops backwards to prevent having to clone the wrapper on the - // first element (see `child` below). - for (var i = elements.length - 1; i >= 0; i--) { - var child = i > 0 ? wrapper.cloneNode(true) : wrapper; - var element = elements[i]; - - // Cache the current parent and sibling. - var parent = element.parentNode; - var sibling = element.nextSibling; - - // Wrap the element (is automatically removed from its current - // parent). - child.appendChild(element); - - // If the element had a sibling, insert the wrapper before - // the sibling to maintain the HTML structure; otherwise, just - // append it to the parent. - if (sibling) { - parent.insertBefore(child, sibling); - } else { - parent.appendChild(child); - } - - return child; - } - } - - // Unwrap an element - // http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/ - /*function _unwrap(wrapper) { - // Get the element's parent node - var parent = wrapper.parentNode; - - // Move all children out of the element - while (wrapper.firstChild) { - parent.insertBefore(wrapper.firstChild, wrapper); - } - - // Remove the empty element - parent.removeChild(wrapper); - }*/ - - // Remove an element - function _remove(element) { - if (!element) { - return; - } - element.parentNode.removeChild(element); - } - - // Prepend child - function _prependChild(parent, element) { - parent.insertBefore(element, parent.firstChild); - } - - // Set attributes - function _setAttributes(element, attributes) { - for (var key in attributes) { - element.setAttribute(key, _is.boolean(attributes[key]) && attributes[key] ? '' : attributes[key]); - } - } - - // Insert a HTML element - function _insertElement(type, parent, attributes) { - // Create a new - var element = document.createElement(type); - - // Set all passed attributes - _setAttributes(element, attributes); - - // Inject the new element - _prependChild(parent, element); - } - - // Get a classname from selector - function _getClassname(selector) { - return selector.replace('.', ''); - } - - // Toggle class on an element - function _toggleClass(element, className, state) { - if (element) { - if (element.classList) { - element.classList[state ? 'add' : 'remove'](className); - } else { - var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); - element.className = name + (state ? ' ' + className : ''); - } - } - } - - // Has class name - function _hasClass(element, className) { - if (element) { - if (element.classList) { - return element.classList.contains(className); - } else { - return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className); - } - } - return false; - } - - // Element matches selector - function _matches(element, selector) { - var p = Element.prototype; - - var f = - p.matches || - p.webkitMatchesSelector || - p.mozMatchesSelector || - p.msMatchesSelector || - function(s) { - return [].indexOf.call(document.querySelectorAll(s), this) !== -1; - }; - - return f.call(element, selector); - } - - // Bind along with custom handler - function _proxyListener(element, eventName, userListener, defaultListener, useCapture) { - if (userListener) { - // Register this before defaultListener - _on( - element, - eventName, - function(event) { - userListener.apply(element, [event]); - }, - useCapture - ); - } - _on( - element, - eventName, - function(event) { - defaultListener.apply(element, [event]); - }, - useCapture - ); - } - - // Toggle event listener - function _toggleListener(element, events, callback, toggle, useCapture) { - var eventList = events.split(' '); - - // Whether the listener is a capturing listener or not - // Default to false - if (!_is.boolean(useCapture)) { - useCapture = false; - } - - // If a nodelist is passed, call itself on each node - if (element instanceof NodeList) { - for (var x = 0; x < element.length; x++) { - if (element[x] instanceof Node) { - _toggleListener(element[x], arguments[1], arguments[2], arguments[3]); - } - } - return; - } - - // If a single node is passed, bind the event listener - for (var i = 0; i < eventList.length; i++) { - element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture); - } - } - - // Bind event - function _on(element, events, callback, useCapture) { - if (element) { - _toggleListener(element, events, callback, true, useCapture); - } - } - - // Unbind event - function _off(element, events, callback, useCapture) { - if (element) { - _toggleListener(element, events, callback, false, useCapture); - } - } - - // Trigger event - function _event(element, type, bubbles, properties) { - // Bail if no element - if (!element || !type) { - return; - } - - // Default bubbles to false - if (!_is.boolean(bubbles)) { - bubbles = false; - } - - // Create and dispatch the event - var event = new CustomEvent(type, { - bubbles: bubbles, - detail: properties, - }); - - // Dispatch the event - element.dispatchEvent(event); - } - - // Toggle aria-pressed state on a toggle button - // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles - function _toggleState(target, state) { - // Bail if no target - if (!target) { - return; - } - - // Get state - state = _is.boolean(state) ? state : !target.getAttribute('aria-pressed'); - - // Set the attribute on target - target.setAttribute('aria-pressed', state); - - return state; - } - - // Get percentage - function _getPercentage(current, max) { - if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) { - return 0; - } - return (current / max * 100).toFixed(2); - } - - // Deep extend/merge destination object with N more objects - // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ - // Removed call to arguments.callee (used explicit function name instead) - function _extend() { - // Get arguments - var objects = arguments; - - // Bail if nothing to merge - if (!objects.length) { - return; - } - - // Return first if specified but nothing to merge - if (objects.length === 1) { - return objects[0]; - } - - // First object is the destination - var destination = Array.prototype.shift.call(objects), - length = objects.length; - - // Loop through all objects to merge - for (var i = 0; i < length; i++) { - var source = objects[i]; - - for (var property in source) { - if (source[property] && source[property].constructor && source[property].constructor === Object) { - destination[property] = destination[property] || {}; - _extend(destination[property], source[property]); - } else { - destination[property] = source[property]; - } - } - } - - return destination; - } - - // Check variable types - var _is = { - object: function(input) { - return input !== null && typeof input === 'object'; - }, - array: function(input) { - return input !== null && (typeof input === 'object' && input.constructor === Array); - }, - number: function(input) { - return input !== null && ((typeof input === 'number' && !isNaN(input - 0)) || (typeof input === 'object' && input.constructor === Number)); - }, - string: function(input) { - return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String)); - }, - boolean: function(input) { - return input !== null && typeof input === 'boolean'; - }, - nodeList: function(input) { - return input !== null && input instanceof NodeList; - }, - htmlElement: function(input) { - return input !== null && input instanceof HTMLElement; - }, - function: function(input) { - return input !== null && typeof input === 'function'; - }, - undefined: function(input) { - return input !== null && typeof input === 'undefined'; - }, - }; - - // Parse YouTube ID from url - function _parseYouTubeId(url) { - var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; - return url.match(regex) ? RegExp.$2 : url; - } - - // Parse Vimeo ID from url - function _parseVimeoId(url) { - var regex = /^.*(vimeo.com\/|video\/)(\d+).*/; - return url.match(regex) ? RegExp.$2 : url; - } - - // Fullscreen API - function _fullscreen() { - var fullscreen = { - supportsFullScreen: false, - isFullScreen: function() { - return false; - }, - requestFullScreen: function() {}, - cancelFullScreen: function() {}, - fullScreenEventName: '', - element: null, - prefix: '', - }, - browserPrefixes = 'webkit o moz ms khtml'.split(' '); - - // Check for native support - if (!_is.undefined(document.cancelFullScreen)) { - fullscreen.supportsFullScreen = true; - } else { - // Check for fullscreen support by vendor prefix - for (var i = 0, il = browserPrefixes.length; i < il; i++) { - fullscreen.prefix = browserPrefixes[i]; - - if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) { - fullscreen.supportsFullScreen = true; - break; - } else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) { - // Special case for MS (when isn't it?) - fullscreen.prefix = 'ms'; - fullscreen.supportsFullScreen = true; - break; - } - } - } - - // Update methods to do something useful - if (fullscreen.supportsFullScreen) { - // Yet again Microsoft awesomeness, - // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes - fullscreen.fullScreenEventName = fullscreen.prefix === 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange'; - - fullscreen.isFullScreen = function(element) { - if (_is.undefined(element)) { - element = document.body; - } - switch (this.prefix) { - case '': - return document.fullscreenElement === element; - case 'moz': - return document.mozFullScreenElement === element; - default: - return document[this.prefix + 'FullscreenElement'] === element; - } - }; - fullscreen.requestFullScreen = function(element) { - if (_is.undefined(element)) { - element = document.body; - } - return this.prefix === '' - ? element.requestFullScreen() - : element[this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')](); - }; - fullscreen.cancelFullScreen = function() { - return this.prefix === '' - ? document.cancelFullScreen() - : document[this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')](); - }; - fullscreen.element = function() { - return this.prefix === '' ? document.fullscreenElement : document[this.prefix + 'FullscreenElement']; - }; - } - - return fullscreen; - } - - // Local storage - var _storage = { - supported: (function() { - // Try to use it (it might be disabled, e.g. user is in private/porn mode) - // see: https://github.com/sampotts/plyr/issues/131 - try { - // Add test item - window.localStorage.setItem('___test', 'OK'); - - // Get the test item - var result = window.localStorage.getItem('___test'); - - // Clean up - window.localStorage.removeItem('___test'); - - // Check if value matches - return result === 'OK'; - } catch (e) { - return false; - } - - return false; - })(), - }; - - // Player instance - function Plyr(media, config) { - var plyr = this, - timers = {}, - api; - - // Set media - plyr.media = media; - var original = media.cloneNode(true); - - // Trigger events, with plyr instance passed - function _triggerEvent(element, type, bubbles, properties) { - _event( - element, - type, - bubbles, - _extend({}, properties, { - plyr: api, - }) - ); - } - - // Debugging - function _console(type, args) { - if (config.debug && window.console) { - args = Array.prototype.slice.call(args); - - if (_is.string(config.logPrefix) && config.logPrefix.length) { - args.unshift(config.logPrefix); - } - - console[type].apply(console, args); - } - } - var _log = function() { - _console('log', arguments); - }, - _warn = function() { - _console('warn', arguments); - }; - - // Log config options - _log('Config', config); - - // Get icon URL - function _getIconUrl() { - return { - url: config.iconUrl, - // If you're using svg4everybody you don't need absolute paths - absolute: config.iconUrl.indexOf('http') === 0 || (plyr.browser.isIE && !window.svg4everybody), - }; - } - - // Build the default HTML - function _buildControls() { - // Create html array - var html = [], - iconUrl = _getIconUrl(), - iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix; - - // Larger overlaid play button - if (_inArray(config.controls, 'play-large')) { - html.push( - '' - ); - } - - html.push('
'); - - // Restart button - if (_inArray(config.controls, 'restart')) { - html.push( - '' - ); - } - - // Rewind button - if (_inArray(config.controls, 'rewind')) { - html.push( - '' - ); - } - - // Play Pause button - // TODO: This should be a toggle button really? - if (_inArray(config.controls, 'play')) { - html.push( - '', - '' - ); - } - - // Fast forward button - if (_inArray(config.controls, 'fast-forward')) { - html.push( - '' - ); - } - - // Progress - if (_inArray(config.controls, 'progress')) { - // Create progress - html.push( - '', - '', - '', - '', - '', - '0% ' + config.i18n.buffered, - '' - ); - - // Seek tooltip - if (config.tooltips.seek) { - html.push('00:00'); - } - - // Close - html.push(''); - } - - // Media current time display - if (_inArray(config.controls, 'current-time')) { - html.push( - '', - '' + config.i18n.currentTime + '', - '00:00', - '' - ); - } - - // Media duration display - if (_inArray(config.controls, 'duration')) { - html.push( - '', - '' + config.i18n.duration + '', - '00:00', - '' - ); - } - - // Toggle mute button - if (_inArray(config.controls, 'mute')) { - html.push( - '' - ); - } - - // Volume range control - if (_inArray(config.controls, 'volume')) { - html.push( - '', - '', - '', - '', - '' - ); - } - - // Toggle captions button - if (_inArray(config.controls, 'captions')) { - html.push( - '' - ); - } - - // Toggle fullscreen button - if (_inArray(config.controls, 'fullscreen')) { - html.push( - '' - ); - } - - // Close everything - html.push('
'); - - return html.join(''); - } - - // Setup fullscreen - function _setupFullscreen() { - if (!plyr.supported.full) { - return; - } - - if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { - // Check for native support - var nativeSupport = fullscreen.supportsFullScreen; - - if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) { - _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); - - // Add styling hook - if (!nativeSupport) { - _toggleClass(plyr.container, config.classes.fullscreen.fallback, true); - } - - // Add styling hook - _toggleClass(plyr.container, config.classes.fullscreen.enabled, true); - } else { - _log('Fullscreen not supported and fallback disabled'); - } - - // Toggle state - if (plyr.buttons && plyr.buttons.fullscreen) { - _toggleState(plyr.buttons.fullscreen, false); - } - - // Setup focus trap - _focusTrap(); - } - } - - // Setup captions - function _setupCaptions() { - // Bail if not HTML5 video - if (plyr.type !== 'video') { - return; - } - - // Inject the container - if (!_getElement(config.selectors.captions)) { - plyr.videoContainer.insertAdjacentHTML('afterbegin', '
'); - } - - // Determine if HTML5 textTracks is supported - plyr.usingTextTracks = false; - if (plyr.media.textTracks) { - plyr.usingTextTracks = true; - } - - // Get URL of caption file if exists - var captionSrc = '', - kind, - children = plyr.media.childNodes; - - for (var i = 0; i < children.length; i++) { - if (children[i].nodeName.toLowerCase() === 'track') { - kind = children[i].kind; - if (kind === 'captions' || kind === 'subtitles') { - captionSrc = children[i].getAttribute('src'); - } - } - } - - // Record if caption file exists or not - plyr.captionExists = true; - if (captionSrc === '') { - plyr.captionExists = false; - _log('No caption track found'); - } else { - _log('Caption track found; URI: ' + captionSrc); - } - - // If no caption file exists, hide container for caption text - if (!plyr.captionExists) { - _toggleClass(plyr.container, config.classes.captions.enabled); - } else { - // Turn off native caption rendering to avoid double captions - // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below - var tracks = plyr.media.textTracks; - for (var x = 0; x < tracks.length; x++) { - tracks[x].mode = 'hidden'; - } - - // Enable UI - _showCaptions(plyr); - - // Disable unsupported browsers than report false positive - // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144 - if ((plyr.browser.isIE && plyr.browser.version >= 10) || (plyr.browser.isFirefox && plyr.browser.version >= 31)) { - // Debugging - _log('Detected browser with known TextTrack issues - using manual fallback'); - - // Set to false so skips to 'manual' captioning - plyr.usingTextTracks = false; - } - - // Rendering caption tracks - // Native support required - http://caniuse.com/webvtt - if (plyr.usingTextTracks) { - _log('TextTracks supported'); - - for (var y = 0; y < tracks.length; y++) { - var track = tracks[y]; - - if (track.kind === 'captions' || track.kind === 'subtitles') { - _on(track, 'cuechange', function() { - // Display a cue, if there is one - if (this.activeCues[0] && 'text' in this.activeCues[0]) { - _setCaption(this.activeCues[0].getCueAsHTML()); - } else { - _setCaption(); - } - }); - } - } - } else { - // Caption tracks not natively supported - _log('TextTracks not supported so rendering captions manually'); - - // Render captions from array at appropriate time - plyr.currentCaption = ''; - plyr.captions = []; - - if (captionSrc !== '') { - // Create XMLHttpRequest Object - var xhr = new XMLHttpRequest(); - - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - var captions = [], - caption, - req = xhr.responseText; - - //According to webvtt spec, line terminator consists of one of the following - // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D) - var lineSeparator = '\r\n'; - if (req.indexOf(lineSeparator + lineSeparator) === -1) { - if (req.indexOf('\r\r') !== -1) { - lineSeparator = '\r'; - } else { - lineSeparator = '\n'; - } - } - - captions = req.split(lineSeparator + lineSeparator); - - for (var r = 0; r < captions.length; r++) { - caption = captions[r]; - plyr.captions[r] = []; - - // Get the parts of the captions - var parts = caption.split(lineSeparator), - index = 0; - - // Incase caption numbers are added - if (parts[index].indexOf(':') === -1) { - index = 1; - } - - plyr.captions[r] = [parts[index], parts[index + 1]]; - } - - // Remove first element ('VTT') - plyr.captions.shift(); - - _log('Successfully loaded the caption file via AJAX'); - } else { - _warn(config.logPrefix + 'There was a problem loading the caption file via AJAX'); - } - } - }; - - xhr.open('get', captionSrc, true); - - xhr.send(); - } - } - } - } - - // Set the current caption - function _setCaption(caption) { - /* jshint unused:false */ - var container = _getElement(config.selectors.captions), - content = document.createElement('span'); - - // Empty the container - container.innerHTML = ''; - - // Default to empty - if (_is.undefined(caption)) { - caption = ''; - } - - // Set the span content - if (_is.string(caption)) { - content.innerHTML = caption.trim(); - } else { - content.appendChild(caption); - } - - // Set new caption text - container.appendChild(content); - - // Force redraw (for Safari) - var redraw = container.offsetHeight; - } - - // Captions functions - // Seek the manual caption time and update UI - function _seekManualCaptions(time) { - // Utilities for caption time codes - function _timecodeCommon(tc, pos) { - var tcpair = []; - tcpair = tc.split(' --> '); - for (var i = 0; i < tcpair.length; i++) { - // WebVTT allows for extra meta data after the timestamp line - // So get rid of this if it exists - tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, '$1'); - } - return _subTcSecs(tcpair[pos]); - } - function _timecodeMin(tc) { - return _timecodeCommon(tc, 0); - } - function _timecodeMax(tc) { - return _timecodeCommon(tc, 1); - } - function _subTcSecs(tc) { - if (tc === null || tc === undefined) { - return 0; - } else { - var tc1 = [], - tc2 = [], - seconds; - tc1 = tc.split(','); - tc2 = tc1[0].split(':'); - seconds = Math.floor(tc2[0] * 60 * 60) + Math.floor(tc2[1] * 60) + Math.floor(tc2[2]); - return seconds; - } - } - - // If it's not video, or we're using textTracks, bail. - if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) { - return; - } - - // Reset subcount - plyr.subcount = 0; - - // Check time is a number, if not use currentTime - // IE has a bug where currentTime doesn't go to 0 - // https://twitter.com/Sam_Potts/status/573715746506731521 - time = _is.number(time) ? time : plyr.media.currentTime; - - // If there's no subs available, bail - if (!plyr.captions[plyr.subcount]) { - return; - } - - while (_timecodeMax(plyr.captions[plyr.subcount][0]) < time.toFixed(1)) { - plyr.subcount++; - if (plyr.subcount > plyr.captions.length - 1) { - plyr.subcount = plyr.captions.length - 1; - break; - } - } - - // Check if the next caption is in the current time range - if ( - plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && - plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0]) - ) { - plyr.currentCaption = plyr.captions[plyr.subcount][1]; - - // Render the caption - _setCaption(plyr.currentCaption); - } else { - _setCaption(); - } - } - - // Display captions container and button (for initialization) - function _showCaptions() { - // If there's no caption toggle, bail - if (!plyr.buttons.captions) { - return; - } - - _toggleClass(plyr.container, config.classes.captions.enabled, true); - - // Try to load the value from storage - var active = plyr.storage.captionsEnabled; - - // Otherwise fall back to the default config - if (!_is.boolean(active)) { - active = config.captions.defaultActive; - } - - if (active) { - _toggleClass(plyr.container, config.classes.captions.active, true); - _toggleState(plyr.buttons.captions, true); - } - } - - // Find all elements - function _getElements(selector) { - return plyr.container.querySelectorAll(selector); - } - - // Find a single element - function _getElement(selector) { - return _getElements(selector)[0]; - } - - // Determine if we're in an iframe - function _inFrame() { - try { - return window.self !== window.top; - } catch (e) { - return true; - } - } - - // Trap focus inside container - function _focusTrap() { - var tabbables = _getElements('input:not([disabled]), button:not([disabled])'), - first = tabbables[0], - last = tabbables[tabbables.length - 1]; - - function _checkFocus(event) { - // If it is TAB - if (event.which === 9 && plyr.isFullscreen) { - if (event.target === last && !event.shiftKey) { - // Move focus to first element that can be tabbed if Shift isn't used - event.preventDefault(); - first.focus(); - } else if (event.target === first && event.shiftKey) { - // Move focus to last element that can be tabbed if Shift is used - event.preventDefault(); - last.focus(); - } - } - } - - // Bind the handler - _on(plyr.container, 'keydown', _checkFocus); - } - - // Add elements to HTML5 media (source, tracks, etc) - function _insertChildElements(type, attributes) { - if (_is.string(attributes)) { - _insertElement(type, plyr.media, { src: attributes }); - } else if (attributes.constructor === Array) { - for (var i = attributes.length - 1; i >= 0; i--) { - _insertElement(type, plyr.media, attributes[i]); - } - } - } - - // Insert controls - function _injectControls() { - // Sprite - if (config.loadSprite) { - var iconUrl = _getIconUrl(); - - // Only load external sprite using AJAX - if (iconUrl.absolute) { - _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : '')); - loadSprite(iconUrl.url, 'sprite-plyr'); - } else { - _log('Sprite will be used as external resource directly'); - } - } - - // Make a copy of the html - var html = config.html; - - // Insert custom video controls - _log('Injecting custom controls'); - - // If no controls are specified, create default - if (!html) { - html = _buildControls(); - } - - // Replace seek time instances - html = _replaceAll(html, '{seektime}', config.seekTime); - - // Replace all id references with random numbers - html = _replaceAll(html, '{id}', Math.floor(Math.random() * 10000)); - - // Replace Title, if it exists - if (config.title) { - html = _replaceAll(html, '{title}', config.title); - } - - // Controls container - var target; - - // Inject to custom location - if (_is.string(config.selectors.controls.container)) { - target = document.querySelector(config.selectors.controls.container); - } - - // Inject into the container by default - if (!_is.htmlElement(target)) { - target = plyr.container; - } - - // Inject controls HTML - target.insertAdjacentHTML('beforeend', html); - - // Setup tooltips - if (config.tooltips.controls) { - var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join('')); - - for (var i = labels.length - 1; i >= 0; i--) { - var label = labels[i]; - - _toggleClass(label, config.classes.hidden, false); - _toggleClass(label, config.classes.tooltip, true); - } - } - } - - // Find the UI controls and store references - function _findElements() { - try { - plyr.controls = _getElement(config.selectors.controls.wrapper); - - // Buttons - plyr.buttons = {}; - plyr.buttons.seek = _getElement(config.selectors.buttons.seek); - plyr.buttons.play = _getElements(config.selectors.buttons.play); - plyr.buttons.pause = _getElement(config.selectors.buttons.pause); - plyr.buttons.restart = _getElement(config.selectors.buttons.restart); - plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind); - plyr.buttons.forward = _getElement(config.selectors.buttons.forward); - plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); - - // Inputs - plyr.buttons.mute = _getElement(config.selectors.buttons.mute); - plyr.buttons.captions = _getElement(config.selectors.buttons.captions); - - // Progress - plyr.progress = {}; - plyr.progress.container = _getElement(config.selectors.progress.container); - - // Progress - Buffering - plyr.progress.buffer = {}; - plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer); - plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0]; - - // Progress - Played - plyr.progress.played = _getElement(config.selectors.progress.played); - - // Seek tooltip - plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); - - // Volume - plyr.volume = {}; - plyr.volume.input = _getElement(config.selectors.volume.input); - plyr.volume.display = _getElement(config.selectors.volume.display); - - // Timing - plyr.duration = _getElement(config.selectors.duration); - plyr.currentTime = _getElement(config.selectors.currentTime); - plyr.seekTime = _getElements(config.selectors.seekTime); - - return true; - } catch (e) { - _warn('It looks like there is a problem with your controls HTML'); - - // Restore native video controls - _toggleNativeControls(true); - - return false; - } - } - - // Toggle style hook - function _toggleStyleHook() { - _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full); - } - - // Toggle native controls - function _toggleNativeControls(toggle) { - if (toggle && _inArray(config.types.html5, plyr.type)) { - plyr.media.setAttribute('controls', ''); - } else { - plyr.media.removeAttribute('controls'); - } - } - - // Setup aria attribute for play and iframe title - function _setTitle(iframe) { - // Find the current text - var label = config.i18n.play; - - // If there's a media title set, use that for the label - if (_is.string(config.title) && config.title.length) { - label += ', ' + config.title; - - // Set container label - plyr.container.setAttribute('aria-label', config.title); - } - - // If there's a play button, set label - if (plyr.supported.full && plyr.buttons.play) { - for (var i = plyr.buttons.play.length - 1; i >= 0; i--) { - plyr.buttons.play[i].setAttribute('aria-label', label); - } - } - - // Set iframe title - // https://github.com/sampotts/plyr/issues/124 - if (_is.htmlElement(iframe)) { - iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title)); - } - } - - // Setup localStorage - function _setupStorage() { - var value = null; - plyr.storage = {}; - - // Bail if we don't have localStorage support or it's disabled - if (!_storage.supported || !config.storage.enabled) { - return; - } - - // Clean up old volume - // https://github.com/sampotts/plyr/issues/171 - window.localStorage.removeItem('plyr-volume'); - - // load value from the current key - value = window.localStorage.getItem(config.storage.key); - - if (!value) { - // Key wasn't set (or had been cleared), move along - return; - } else if (/^\d+(\.\d+)?$/.test(value)) { - // If value is a number, it's probably volume from an older - // version of plyr. See: https://github.com/sampotts/plyr/pull/313 - // Update the key to be JSON - _updateStorage({ volume: parseFloat(value) }); - } else { - // Assume it's JSON from this or a later version of plyr - plyr.storage = JSON.parse(value); - } - } - - // Save a value back to local storage - function _updateStorage(value) { - // Bail if we don't have localStorage support or it's disabled - if (!_storage.supported || !config.storage.enabled) { - return; - } - - // Update the working copy of the values - _extend(plyr.storage, value); - - // Update storage - window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage)); - } - - // Setup media - function _setupMedia() { - // If there's no media, bail - if (!plyr.media) { - _warn('No media element found!'); - return; - } - - if (plyr.supported.full) { - // Add type class - _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true); - - // Add video class for embeds - // This will require changes if audio embeds are added - if (_inArray(config.types.embed, plyr.type)) { - _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true); - } - - // If there's no autoplay attribute, assume the video is stopped and add state class - _toggleClass(plyr.container, config.classes.stopped, config.autoplay); - - // Add iOS class - _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos); - - // Add touch class - _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch); - - // Inject the player wrapper - if (plyr.type === 'video') { - // Create the wrapper div - var wrapper = document.createElement('div'); - wrapper.setAttribute('class', config.classes.videoWrapper); - - // Wrap the video in a container - _wrap(plyr.media, wrapper); - - // Cache the container - plyr.videoContainer = wrapper; - } - } - - // Embeds - if (_inArray(config.types.embed, plyr.type)) { - _setupEmbed(); - } - } - - // Setup YouTube/Vimeo - function _setupEmbed() { - var container = document.createElement('div'), - mediaId, - mediaUrl, - id = plyr.type + '-' + Math.floor(Math.random() * 10000); - - // Parse IDs from URLs if supplied - switch (plyr.type) { - case 'youtube': - mediaId = _parseYouTubeId(plyr.embedId); - break; - - case 'vimeo': - mediaId = _parseVimeoId(plyr.embedId); - break; - - default: - mediaId = plyr.embedId; - } - - // Remove old containers - var containers = _getElements('[id^="' + plyr.type + '-"]'); - for (var i = containers.length - 1; i >= 0; i--) { - _remove(containers[i]); - } - - // Add embed class for responsive - _toggleClass(plyr.media, config.classes.videoWrapper, true); - _toggleClass(plyr.media, config.classes.embedWrapper, true); - - if (plyr.type === 'youtube') { - // Create the YouTube container - plyr.media.appendChild(container); - - // Set ID - container.setAttribute('id', id); - - // Setup API - if (_is.object(window.YT)) { - _youTubeReady(mediaId, container); - } else { - // Load the API - _injectScript(config.urls.youtube.api); - - // Setup callback for the API - window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; - - // Add to queue - window.onYouTubeReadyCallbacks.push(function() { - _youTubeReady(mediaId, container); - }); - - // Set callback to process queue - window.onYouTubeIframeAPIReady = function() { - window.onYouTubeReadyCallbacks.forEach(function(callback) { - callback(); - }); - }; - } - } else if (plyr.type === 'vimeo') { - // Vimeo needs an extra div to hide controls on desktop (which has full support) - if (plyr.supported.full) { - plyr.media.appendChild(container); - } else { - container = plyr.media; - } - - // Set ID - container.setAttribute('id', id); - - // Load the API if not already - if (!_is.object(window.Vimeo)) { - _injectScript(config.urls.vimeo.api); - - // Wait for fragaloop load - var vimeoTimer = window.setInterval(function() { - if (_is.object(window.Vimeo)) { - window.clearInterval(vimeoTimer); - _vimeoReady(mediaId, container); - } - }, 50); - } else { - _vimeoReady(mediaId, container); - } - } else if (plyr.type === 'soundcloud') { - // TODO: Currently unsupported and undocumented - // Inject the iframe - var soundCloud = document.createElement('iframe'); - - // Watch for iframe load - soundCloud.loaded = false; - _on(soundCloud, 'load', function() { - soundCloud.loaded = true; - }); - - _setAttributes(soundCloud, { - src: 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId, - id: id, - }); - - container.appendChild(soundCloud); - plyr.media.appendChild(container); - - // Load the API if not already - if (!window.SC) { - _injectScript(config.urls.soundcloud.api); - } - - // Wait for SC load - var soundCloudTimer = window.setInterval(function() { - if (window.SC && soundCloud.loaded) { - window.clearInterval(soundCloudTimer); - _soundcloudReady.call(soundCloud); - } - }, 50); - } - } - - // When embeds are ready - function _embedReady() { - // Setup the UI and call ready if full support - if (plyr.supported.full) { - _setupInterface(); - _ready(); - } - - // Set title - _setTitle(_getElement('iframe')); - } - - // Handle YouTube API ready - function _youTubeReady(videoId, container) { - // Setup instance - // https://developers.google.com/youtube/iframe_api_reference - plyr.embed = new window.YT.Player(container.id, { - videoId: videoId, - playerVars: { - autoplay: config.autoplay ? 1 : 0, - controls: plyr.supported.full ? 0 : 1, - rel: 0, - showinfo: 0, - iv_load_policy: 3, - cc_load_policy: config.captions.defaultActive ? 1 : 0, - cc_lang_pref: 'en', - wmode: 'transparent', - modestbranding: 1, - disablekb: 1, - origin: '*', // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45 - }, - events: { - onError: function(event) { - _triggerEvent(plyr.container, 'error', true, { - code: event.data, - embed: event.target, - }); - }, - onReady: function(event) { - // Get the instance - var instance = event.target; - - // Create a faux HTML5 API using the YouTube API - plyr.media.play = function() { - instance.playVideo(); - plyr.media.paused = false; - }; - plyr.media.pause = function() { - instance.pauseVideo(); - plyr.media.paused = true; - }; - plyr.media.stop = function() { - instance.stopVideo(); - plyr.media.paused = true; - }; - plyr.media.duration = instance.getDuration(); - plyr.media.paused = true; - plyr.media.currentTime = 0; - plyr.media.muted = instance.isMuted(); - - // Set title if possible - if (typeof instance.getVideoData === 'function') { - config.title = instance.getVideoData().title; - } - - // Set the tabindex - if (plyr.supported.full) { - plyr.media.querySelector('iframe').setAttribute('tabindex', '-1'); - } - - // Update UI - _embedReady(); - - // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); - - // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); - - // Reset timer - window.clearInterval(timers.buffering); - - // Setup buffering - timers.buffering = window.setInterval(function() { - // Get loaded % from YouTube - plyr.media.buffered = instance.getVideoLoadedFraction(); - - // Trigger progress only when we actually buffer something - if (plyr.media.lastBuffered === null || plyr.media.lastBuffered < plyr.media.buffered) { - _triggerEvent(plyr.media, 'progress'); - } - - // Set last buffer point - plyr.media.lastBuffered = plyr.media.buffered; - - // Bail if we're at 100% - if (plyr.media.buffered === 1) { - window.clearInterval(timers.buffering); - - // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); - } - }, 200); - }, - onStateChange: function(event) { - // Get the instance - var instance = event.target; - - // Reset timer - window.clearInterval(timers.playing); - - // Handle events - // -1 Unstarted - // 0 Ended - // 1 Playing - // 2 Paused - // 3 Buffering - // 5 Video cued - switch (event.data) { - case 0: - plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); - break; - - case 1: - plyr.media.paused = false; - - // If we were seeking, fire seeked event - if (plyr.media.seeking) { - _triggerEvent(plyr.media, 'seeked'); - } - - plyr.media.seeking = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); - - // Poll to get playback progress - timers.playing = window.setInterval(function() { - // Set the current time - plyr.media.currentTime = instance.getCurrentTime(); - - // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); - }, 100); - - // Check duration again due to YouTube bug - // https://github.com/sampotts/plyr/issues/374 - // https://code.google.com/p/gdata-issues/issues/detail?id=8690 - if (plyr.media.duration !== instance.getDuration()) { - plyr.media.duration = instance.getDuration(); - _triggerEvent(plyr.media, 'durationchange'); - } - - break; - - case 2: - plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); - break; - } - - _triggerEvent(plyr.container, 'statechange', false, { - code: event.data, - }); - }, - }, - }); - } - - // Vimeo ready - function _vimeoReady(mediaId, container) { - // Setup instance - // https://github.com/vimeo/player.js - - var options = { - loop: config.loop, - autoplay: config.autoplay, - byline: false, - portrait: false, - title: false, - speed: true, - transparent: 0, - }; - - // Convert options into URL params for iframe - function buildUrlParameters(options) { - return Object.keys(options) - .map(function(key) { - return encodeURIComponent(key) + '=' + encodeURIComponent(options[key]); - }) - .join('&'); - } - - // Get Vimeo params for the iframe - var params = buildUrlParameters(options); - - // Build an iframe - var iframe = document.createElement('iframe'); - var src = 'https://player.vimeo.com/video/' + mediaId + '?' + params; - iframe.setAttribute('src', src); - iframe.setAttribute('allowfullscreen', ''); - container.appendChild(iframe); - - plyr.embed = new window.Vimeo.Player(iframe); - - // Create a faux HTML5 API using the Vimeo API - plyr.media.play = function() { - plyr.embed.play(); - plyr.media.paused = false; - }; - plyr.media.pause = function() { - plyr.embed.pause(); - plyr.media.paused = true; - }; - plyr.media.stop = function() { - plyr.embed.stop(); - plyr.media.paused = true; - }; - - plyr.media.paused = true; - plyr.media.currentTime = 0; - - plyr.embed.getCurrentTime().then(function(value) { - plyr.media.currentTime = value; - - // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); - }); - - plyr.embed.getDuration().then(function(value) { - plyr.media.duration = value; - - // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); - }); - - // TODO: Captions - /*if (config.captions.defaultActive) { - plyr.embed.enableTextTrack('en'); - }*/ - - plyr.embed.on('loaded', function() { - // Fix keyboard focus issues - // https://github.com/sampotts/plyr/issues/317 - if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) { - plyr.embed.element.setAttribute('tabindex', '-1'); - } - - plyr.embed.getDuration().then(function(value) { - plyr.media.duration = value; - - // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); - - // Update UI - _embedReady(); - }); - }); - - plyr.embed.on('play', function() { - plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); - }); - - plyr.embed.on('pause', function() { - plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); - }); - - plyr.embed.on('timeupdate', function(data) { - plyr.media.seeking = false; - plyr.media.currentTime = data.seconds; - _triggerEvent(plyr.media, 'timeupdate'); - }); - - plyr.embed.on('progress', function(data) { - plyr.media.buffered = data.percent; - _triggerEvent(plyr.media, 'progress'); - - if (parseInt(data.percent) === 1) { - // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); - } - }); - - plyr.embed.on('seeked', function() { - plyr.media.seeking = false; - _triggerEvent(plyr.media, 'seeked'); - _triggerEvent(plyr.media, 'play'); - }); - - plyr.embed.on('ended', function() { - plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); - }); - } - - // Soundcloud ready - function _soundcloudReady() { - /* jshint validthis: true */ - plyr.embed = window.SC.Widget(this); - - // Setup on ready - plyr.embed.bind(window.SC.Widget.Events.READY, function() { - // Create a faux HTML5 API using the Soundcloud API - plyr.media.play = function() { - plyr.embed.play(); - plyr.media.paused = false; - }; - plyr.media.pause = function() { - plyr.embed.pause(); - plyr.media.paused = true; - }; - plyr.media.stop = function() { - plyr.embed.seekTo(0); - plyr.embed.pause(); - plyr.media.paused = true; - }; - - plyr.media.paused = true; - plyr.media.currentTime = 0; - - plyr.embed.getDuration(function(value) { - plyr.media.duration = value / 1000; - - // Update UI - _embedReady(); - }); - - plyr.embed.getPosition(function(value) { - plyr.media.currentTime = value; - - // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); - }); - - plyr.embed.bind(window.SC.Widget.Events.PLAY, function() { - plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); - }); - - plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() { - plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); - }); - - plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) { - plyr.media.seeking = false; - plyr.media.currentTime = data.currentPosition / 1000; - _triggerEvent(plyr.media, 'timeupdate'); - }); - - plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) { - plyr.media.buffered = data.loadProgress; - _triggerEvent(plyr.media, 'progress'); - - if (parseInt(data.loadProgress) === 1) { - // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); - } - }); - - plyr.embed.bind(window.SC.Widget.Events.FINISH, function() { - plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); - }); - }); - } - - // Play media - function _play() { - if ('play' in plyr.media) { - plyr.media.play(); - } - } - - // Pause media - function _pause() { - if ('pause' in plyr.media) { - plyr.media.pause(); - } - } - - // Toggle playback - function _togglePlay(toggle) { - // True toggle - if (!_is.boolean(toggle)) { - toggle = plyr.media.paused; - } - - if (toggle) { - _play(); - } else { - _pause(); - } - - return toggle; - } - - // Rewind - function _rewind(seekTime) { - // Use default if needed - if (!_is.number(seekTime)) { - seekTime = config.seekTime; - } - _seek(plyr.media.currentTime - seekTime); - } - - // Fast forward - function _forward(seekTime) { - // Use default if needed - if (!_is.number(seekTime)) { - seekTime = config.seekTime; - } - _seek(plyr.media.currentTime + seekTime); - } - - // Seek to time - // The input parameter can be an event or a number - function _seek(input) { - var targetTime = 0, - paused = plyr.media.paused, - duration = _getDuration(); - - if (_is.number(input)) { - targetTime = input; - } else if (_is.object(input) && _inArray(['input', 'change'], input.type)) { - // It's the seek slider - // Seek to the selected time - targetTime = input.target.value / input.target.max * duration; - } - - // Normalise targetTime - if (targetTime < 0) { - targetTime = 0; - } else if (targetTime > duration) { - targetTime = duration; - } - - // Update seek range and progress - _updateSeekDisplay(targetTime); - - // Set the current time - // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans - try { - plyr.media.currentTime = targetTime.toFixed(4); - } catch (e) {} - - // Embeds - if (_inArray(config.types.embed, plyr.type)) { - switch (plyr.type) { - case 'youtube': - plyr.embed.seekTo(targetTime); - break; - - case 'vimeo': - // Round to nearest second for vimeo - plyr.embed.setCurrentTime(targetTime.toFixed(0)).then(function () { - if (paused) { - _pause(); - } - }); - break; - - case 'soundcloud': - plyr.embed.seekTo(targetTime * 1000); - break; - } - - if (paused) { - _pause(); - } - - // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); - - // Set seeking flag - plyr.media.seeking = true; - - // Trigger seeking - _triggerEvent(plyr.media, 'seeking'); - } - - // Logging - _log('Seeking to ' + plyr.media.currentTime + ' seconds'); - - // Special handling for 'manual' captions - _seekManualCaptions(targetTime); - } - - // Get the duration (or custom if set) - function _getDuration() { - // It should be a number, but parse it just incase - var duration = parseInt(config.duration), - // True duration - mediaDuration = 0; - - // Only if duration available - if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) { - mediaDuration = plyr.media.duration; - } - - // If custom duration is funky, use regular duration - return isNaN(duration) ? mediaDuration : duration; - } - - // Check playing state - function _checkPlaying() { - _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused); - - _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused); - - _toggleControls(plyr.media.paused); - } - - // Save scroll position - function _saveScrollPosition() { - scroll = { - x: window.pageXOffset || 0, - y: window.pageYOffset || 0, - }; - } - - // Restore scroll position - function _restoreScrollPosition() { - window.scrollTo(scroll.x, scroll.y); - } - - // Toggle fullscreen - function _toggleFullscreen(event) { - // Check for native support - var nativeSupport = fullscreen.supportsFullScreen; - - if (nativeSupport) { - // If it's a fullscreen change event, update the UI - if (event && event.type === fullscreen.fullScreenEventName) { - plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); - } else { - // Else it's a user request to enter or exit - if (!fullscreen.isFullScreen(plyr.container)) { - // Save scroll position - _saveScrollPosition(); - - // Request full screen - fullscreen.requestFullScreen(plyr.container); - } else { - // Bail from fullscreen - fullscreen.cancelFullScreen(); - } - - // Check if we're actually full screen (it could fail) - plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); - - return; - } - } else { - // Otherwise, it's a simple toggle - plyr.isFullscreen = !plyr.isFullscreen; - - // Bind/unbind escape key - document.body.style.overflow = plyr.isFullscreen ? 'hidden' : ''; - } - - // Set class hook - _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); - - // Trap focus - _focusTrap(plyr.isFullscreen); - - // Set button state - if (plyr.buttons && plyr.buttons.fullscreen) { - _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); - } - - // Trigger an event - _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true); - - // Restore scroll position - if (!plyr.isFullscreen && nativeSupport) { - _restoreScrollPosition(); - } - } - - // Mute - function _toggleMute(muted) { - // If the method is called without parameter, toggle based on current value - if (!_is.boolean(muted)) { - muted = !plyr.media.muted; - } - - // Set button state - _toggleState(plyr.buttons.mute, muted); - - // Set mute on the player - plyr.media.muted = muted; - - // If volume is 0 after unmuting, set to default - if (plyr.media.volume === 0) { - _setVolume(config.volume); - } - - // Embeds - if (_inArray(config.types.embed, plyr.type)) { - // YouTube - switch (plyr.type) { - case 'youtube': - plyr.embed[plyr.media.muted ? 'mute' : 'unMute'](); - break; - - case 'vimeo': - case 'soundcloud': - plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax)); - break; - } - - // Trigger volumechange for embeds - _triggerEvent(plyr.media, 'volumechange'); - } - } - - // Set volume - function _setVolume(volume) { - var max = config.volumeMax, - min = config.volumeMin; - - // Load volume from storage if no value specified - if (_is.undefined(volume)) { - volume = plyr.storage.volume; - } - - // Use config if all else fails - if (volume === null || isNaN(volume)) { - volume = config.volume; - } - - // Maximum is volumeMax - if (volume > max) { - volume = max; - } - // Minimum is volumeMin - if (volume < min) { - volume = min; - } - - // Set the player volume - plyr.media.volume = parseFloat(volume / max); - - // Set the display - if (plyr.volume.display) { - plyr.volume.display.value = volume; - } - - // Embeds - if (_inArray(config.types.embed, plyr.type)) { - switch (plyr.type) { - case 'youtube': - plyr.embed.setVolume(plyr.media.volume * 100); - break; - - case 'vimeo': - case 'soundcloud': - plyr.embed.setVolume(plyr.media.volume); - break; - } - - // Trigger volumechange for embeds - _triggerEvent(plyr.media, 'volumechange'); - } - - // Toggle muted state - if (volume === 0) { - plyr.media.muted = true; - } else if (plyr.media.muted && volume > 0) { - _toggleMute(); - } - } - - // Increase volume - function _increaseVolume(step) { - var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax; - - if (!_is.number(step)) { - step = config.volumeStep; - } - - _setVolume(volume + step); - } - - // Decrease volume - function _decreaseVolume(step) { - var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax; - - if (!_is.number(step)) { - step = config.volumeStep; - } - - _setVolume(volume - step); - } - - // Update volume UI and storage - function _updateVolume() { - // Get the current volume - var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax; - - // Update the if present - if (plyr.supported.full) { - if (plyr.volume.input) { - plyr.volume.input.value = volume; - } - if (plyr.volume.display) { - plyr.volume.display.value = volume; - } - } - - // Update the volume in storage - _updateStorage({ volume: volume }); - - // Toggle class if muted - _toggleClass(plyr.container, config.classes.muted, volume === 0); - - // Update checkbox for mute state - if (plyr.supported.full && plyr.buttons.mute) { - _toggleState(plyr.buttons.mute, volume === 0); - } - } - - // Toggle captions - function _toggleCaptions(show) { - // If there's no full support, or there's no caption toggle - if (!plyr.supported.full || !plyr.buttons.captions) { - return; - } - - // If the method is called without parameter, toggle based on current value - if (!_is.boolean(show)) { - show = plyr.container.className.indexOf(config.classes.captions.active) === -1; - } - - // Set global - plyr.captionsEnabled = show; - - // Toggle state - _toggleState(plyr.buttons.captions, plyr.captionsEnabled); - - // Add class hook - _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); - - // Trigger an event - _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); - - // Save captions state to localStorage - _updateStorage({ captionsEnabled: plyr.captionsEnabled }); - } - - // Check if media is loading - function _checkLoading(event) { - var loading = event.type === 'waiting'; - - // Clear timer - clearTimeout(timers.loading); - - // Timer to prevent flicker when seeking - timers.loading = setTimeout(function() { - // Toggle container class hook - _toggleClass(plyr.container, config.classes.loading, loading); - - // Show controls if loading, hide if done - _toggleControls(loading); - }, loading ? 250 : 0); - } - - // Update elements - function _updateProgress(event) { - if (!plyr.supported.full) { - return; - } - - var progress = plyr.progress.played, - value = 0, - duration = _getDuration(); - - if (event) { - switch (event.type) { - // Video playing - case 'timeupdate': - case 'seeking': - if (plyr.controls.pressed) { - return; - } - - value = _getPercentage(plyr.media.currentTime, duration); - - // Set seek range value only if it's a 'natural' time event - if (event.type === 'timeupdate' && plyr.buttons.seek) { - plyr.buttons.seek.value = value; - } - - break; - - // Check buffer status - case 'playing': - case 'progress': - progress = plyr.progress.buffer; - value = (function() { - var buffered = plyr.media.buffered; - - if (buffered && buffered.length) { - // HTML5 - return _getPercentage(buffered.end(0), duration); - } else if (_is.number(buffered)) { - // YouTube returns between 0 and 1 - return buffered * 100; - } - - return 0; - })(); - - break; - } - } - - // Set values - _setProgress(progress, value); - } - - // Set value - function _setProgress(progress, value) { - if (!plyr.supported.full) { - return; - } - - // Default to 0 - if (_is.undefined(value)) { - value = 0; - } - // Default to buffer or bail - if (_is.undefined(progress)) { - if (plyr.progress && plyr.progress.buffer) { - progress = plyr.progress.buffer; - } else { - return; - } - } - - // One progress element passed - if (_is.htmlElement(progress)) { - progress.value = value; - } else if (progress) { - // Object of progress + text element - if (progress.bar) { - progress.bar.value = value; - } - if (progress.text) { - progress.text.innerHTML = value; - } - } - } - - // Update the displayed time - function _updateTimeDisplay(time, element) { - // Bail if there's no duration display - if (!element) { - return; - } - - // Fallback to 0 - if (isNaN(time)) { - time = 0; - } - - plyr.secs = parseInt(time % 60); - plyr.mins = parseInt((time / 60) % 60); - plyr.hours = parseInt((time / 60 / 60) % 60); - - // Do we need to display hours? - var displayHours = parseInt((_getDuration() / 60 / 60) % 60) > 0; - - // Ensure it's two digits. For example, 03 rather than 3. - plyr.secs = ('0' + plyr.secs).slice(-2); - plyr.mins = ('0' + plyr.mins).slice(-2); - - // Render - element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs; - } - - // Show the duration on metadataloaded - function _displayDuration() { - if (!plyr.supported.full) { - return; - } - - // Determine duration - var duration = _getDuration() || 0; - - // If there's only one time display, display duration there - if (!plyr.duration && config.displayDuration && plyr.media.paused) { - _updateTimeDisplay(duration, plyr.currentTime); - } - - // If there's a duration element, update content - if (plyr.duration) { - _updateTimeDisplay(duration, plyr.duration); - } - - // Update the tooltip (if visible) - _updateSeekTooltip(); - } - - // Handle time change event - function _timeUpdate(event) { - // Duration - _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime); - - // Ignore updates while seeking - if (event && event.type === 'timeupdate' && plyr.media.seeking) { - return; - } - - // Playing progress - _updateProgress(event); - } - - // Update seek range and progress - function _updateSeekDisplay(time) { - // Default to 0 - if (!_is.number(time)) { - time = 0; - } - - var duration = _getDuration(), - value = _getPercentage(time, duration); - - // Update progress - if (plyr.progress && plyr.progress.played) { - plyr.progress.played.value = value; - } - - // Update seek range input - if (plyr.buttons && plyr.buttons.seek) { - plyr.buttons.seek.value = value; - } - } - - // Update hover tooltip for seeking - function _updateSeekTooltip(event) { - var duration = _getDuration(); - - // Bail if setting not true - if (!config.tooltips.seek || !plyr.progress.container || duration === 0) { - return; - } - - // Calculate percentage - var clientRect = plyr.progress.container.getBoundingClientRect(), - percent = 0, - visible = config.classes.tooltip + '--visible'; - - // Determine percentage, if already visible - if (!event) { - if (_hasClass(plyr.progress.tooltip, visible)) { - percent = plyr.progress.tooltip.style.left.replace('%', ''); - } else { - return; - } - } else { - percent = 100 / clientRect.width * (event.pageX - clientRect.left); - } - - // Set bounds - if (percent < 0) { - percent = 0; - } else if (percent > 100) { - percent = 100; - } - - // Display the time a click would seek to - _updateTimeDisplay(duration / 100 * percent, plyr.progress.tooltip); - - // Set position - plyr.progress.tooltip.style.left = percent + '%'; - - // Show/hide the tooltip - // If the event is a moues in/out and percentage is inside bounds - if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) { - _toggleClass(plyr.progress.tooltip, visible, event.type === 'mouseenter'); - } - } - - // Show the player controls in fullscreen mode - function _toggleControls(toggle) { - // Don't hide if config says not to, it's audio, or not ready or loading - if (!config.hideControls || plyr.type === 'audio') { - return; - } - - var delay = 0, - isEnterFullscreen = false, - show = toggle, - loading = _hasClass(plyr.container, config.classes.loading); - - // Default to false if no boolean - if (!_is.boolean(toggle)) { - if (toggle && toggle.type) { - // Is the enter fullscreen event - isEnterFullscreen = toggle.type === 'enterfullscreen'; - - // Whether to show controls - show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type); - - // Delay hiding on move events - if (_inArray(['mousemove', 'touchmove'], toggle.type)) { - delay = 2000; - } - - // Delay a little more for keyboard users - if (toggle.type === 'focus') { - delay = 3000; - } - } else { - show = _hasClass(plyr.container, config.classes.hideControls); - } - } - - // Clear timer every movement - window.clearTimeout(timers.hover); - - // If the mouse is not over the controls, set a timeout to hide them - if (show || plyr.media.paused || loading) { - _toggleClass(plyr.container, config.classes.hideControls, false); - - // Always show controls when paused or if touch - if (plyr.media.paused || loading) { - return; - } - - // Delay for hiding on touch - if (plyr.browser.isTouch) { - delay = 3000; - } - } - - // If toggle is false or if we're playing (regardless of toggle), - // then set the timer to hide the controls - if (!show || !plyr.media.paused) { - timers.hover = window.setTimeout(function() { - // If the mouse is over the controls (and not entering fullscreen), bail - if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) { - return; - } - - _toggleClass(plyr.container, config.classes.hideControls, true); - }, delay); - } - } - - // Add common function to retrieve media source - function _source(source) { - // If not null or undefined, parse it - if (!_is.undefined(source)) { - _updateSource(source); - return; - } - - // Return the current source - var url; - switch (plyr.type) { - case 'youtube': - url = plyr.embed.getVideoUrl(); - break; - - case 'vimeo': - plyr.embed.getVideoUrl.then(function(value) { - url = value; - }); - break; - - case 'soundcloud': - plyr.embed.getCurrentSound(function(object) { - url = object.permalink_url; - }); - break; - - default: - url = plyr.media.currentSrc; - break; - } - - return url || ''; - } - - // Update source - // Sources are not checked for support so be careful - function _updateSource(source) { - if (!_is.object(source) || !('sources' in source) || !source.sources.length) { - _warn('Invalid source format'); - return; - } - - // Remove ready class hook - _toggleClass(plyr.container, config.classes.ready, false); - - // Pause playback - _pause(); - - // Update seek range and progress - _updateSeekDisplay(); - - // Reset buffer progress - _setProgress(); - - // Cancel current network requests - _cancelRequests(); - - // Setup new source - function setup() { - // Remove embed object - plyr.embed = null; - - // Remove the old media - _remove(plyr.media); - - // Remove video container - if (plyr.type === 'video' && plyr.videoContainer) { - _remove(plyr.videoContainer); - } - - // Reset class name - if (plyr.container) { - plyr.container.removeAttribute('class'); - } - - // Set the type - if ('type' in source) { - plyr.type = source.type; - - // Get child type for video (it might be an embed) - if (plyr.type === 'video') { - var firstSource = source.sources[0]; - - if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) { - plyr.type = firstSource.type; - } - } - } - - // Check for support - plyr.supported = supported(plyr.type); - - // Create new markup - switch (plyr.type) { - case 'video': - plyr.media = document.createElement('video'); - break; - - case 'audio': - plyr.media = document.createElement('audio'); - break; - - case 'youtube': - case 'vimeo': - case 'soundcloud': - plyr.media = document.createElement('div'); - plyr.embedId = source.sources[0].src; - break; - } - - // Inject the new element - _prependChild(plyr.container, plyr.media); - - // Autoplay the new source? - if (_is.boolean(source.autoplay)) { - config.autoplay = source.autoplay; - } - - // Set attributes for audio and video - if (_inArray(config.types.html5, plyr.type)) { - if (config.crossorigin) { - plyr.media.setAttribute('crossorigin', ''); - } - if (config.autoplay) { - plyr.media.setAttribute('autoplay', ''); - } - if ('poster' in source) { - plyr.media.setAttribute('poster', source.poster); - } - if (config.loop) { - plyr.media.setAttribute('loop', ''); - } - } - - // Restore class hooks - _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); - _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); - _toggleStyleHook(); - - // Set new sources for html5 - if (_inArray(config.types.html5, plyr.type)) { - _insertChildElements('source', source.sources); - } - - // Set up from scratch - _setupMedia(); - - // HTML5 stuff - if (_inArray(config.types.html5, plyr.type)) { - // Setup captions - if ('tracks' in source) { - _insertChildElements('track', source.tracks); - } - - // Load HTML5 sources - plyr.media.load(); - } - - // If HTML5 or embed but not fully supported, setupInterface and call ready now - if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) { - // Setup interface - _setupInterface(); - - // Call ready - _ready(); - } - - // Set aria title and iframe title - config.title = source.title; - _setTitle(); - } - - // Destroy instance adn wait for callback - // Vimeo throws a wobbly if you don't wait - _destroy(setup, false); - } - - // Update poster - function _updatePoster(source) { - if (plyr.type === 'video') { - plyr.media.setAttribute('poster', source); - } - } - - function onBodyClick() { - _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false); - } - - // Listen for control events - function _controlListeners() { - // IE doesn't support input event, so we fallback to change - var inputEvent = plyr.browser.isIE ? 'change' : 'input'; - - // Click play/pause helper - function togglePlay() { - var play = _togglePlay(); - - // Determine which buttons - var trigger = plyr.buttons[play ? 'play' : 'pause'], - target = plyr.buttons[play ? 'pause' : 'play']; - - // Get the last play button to account for the large play button - if (target) { - if (target.length > 1) { - target = target[target.length - 1]; - } else { - target = target[0]; - } - } - - // Setup focus and tab focus - if (target) { - var hadTabFocus = _hasClass(trigger, config.classes.tabFocus); - - setTimeout(function() { - target.focus(); - - if (hadTabFocus) { - _toggleClass(trigger, config.classes.tabFocus, false); - _toggleClass(target, config.classes.tabFocus, true); - } - }, 100); - } - } - - // Get the focused element - function getFocusElement() { - var focused = document.activeElement; - - if (!focused || focused === document.body) { - focused = null; - } else { - focused = document.querySelector(':focus'); - } - - return focused; - } - - // Get the key code for an event - function getKeyCode(event) { - return event.keyCode ? event.keyCode : event.which; - } - - // Detect tab focus - function checkTabFocus(focused) { - for (var button in plyr.buttons) { - var element = plyr.buttons[button]; - - if (_is.nodeList(element)) { - for (var i = 0; i < element.length; i++) { - _toggleClass(element[i], config.classes.tabFocus, element[i] === focused); - } - } else { - _toggleClass(element, config.classes.tabFocus, element === focused); - } - } - } - - // Keyboard shortcuts - if (config.keyboardShorcuts.focused) { - var last = null; - - // Handle global presses - if (config.keyboardShorcuts.global) { - _on(window, 'keydown keyup', function(event) { - var code = getKeyCode(event), - focused = getFocusElement(), - allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67], - count = get().length; - - // Only handle global key press if there's only one player - // and the key is in the allowed keys - // and if the focused element is not editable (e.g. text input) - // and any that accept key input http://webaim.org/techniques/keyboard/ - if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) { - handleKey(event); - } - }); - } - - // Handle presses on focused - _on(plyr.container, 'keydown keyup', handleKey); - } - - function handleKey(event) { - var code = getKeyCode(event), - pressed = event.type === 'keydown', - held = pressed && code === last; - - // If the event is bubbled from the media element - // Firefox doesn't get the keycode for whatever reason - if (!_is.number(code)) { - return; - } - - // Seek by the number keys - function seekByKey() { - // Get current duration - var duration = plyr.media.duration; - - // Bail if we have no duration set - if (!_is.number(duration)) { - return; - } - - // Divide the max duration into 10th's and times by the number value - _seek(duration / 10 * (code - 48)); - } - - // Handle the key on keydown - // Reset on keyup - if (pressed) { - // Which keycodes should we prevent default - var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67]; - - // If the code is found prevent default (e.g. prevent scrolling for arrows) - if (_inArray(preventDefault, code)) { - event.preventDefault(); - event.stopPropagation(); - } - - switch (code) { - // 0-9 - case 48: - case 49: - case 50: - case 51: - case 52: - case 53: - case 54: - case 55: - case 56: - case 57: - if (!held) { - seekByKey(); - } - break; - // Space and K key - case 32: - case 75: - if (!held) { - _togglePlay(); - } - break; - // Arrow up - case 38: - _increaseVolume(); - break; - // Arrow down - case 40: - _decreaseVolume(); - break; - // M key - case 77: - if (!held) { - _toggleMute(); - } - break; - // Arrow forward - case 39: - _forward(); - break; - // Arrow back - case 37: - _rewind(); - break; - // F key - case 70: - _toggleFullscreen(); - break; - // C key - case 67: - if (!held) { - _toggleCaptions(); - } - break; - } - - // Escape is handle natively when in full screen - // So we only need to worry about non native - if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) { - _toggleFullscreen(); - } - - // Store last code for next cycle - last = code; - } else { - last = null; - } - } - - // Focus/tab management - _on(window, 'keyup', function(event) { - var code = getKeyCode(event), - focused = getFocusElement(); - - if (code === 9) { - checkTabFocus(focused); - } - }); - _on(document.body, 'click', onBodyClick); - for (var button in plyr.buttons) { - var element = plyr.buttons[button]; - - _on(element, 'blur', function() { - _toggleClass(element, 'tab-focus', false); - }); - } - - // Play - _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay); - - // Pause - _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay); - - // Restart - _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek); - - // Rewind - _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind); - - // Fast forward - _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward); - - // Seek - _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); - - // Set volume - _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() { - _setVolume(plyr.volume.input.value); - }); - - // Mute - _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute); - - // Fullscreen - _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen); - - // Handle user exiting fullscreen by escaping etc - if (fullscreen.supportsFullScreen) { - _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); - } - - // Captions - _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions); - - // Seek tooltip - _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip); - - // Toggle controls visibility based on mouse movement - if (config.hideControls) { - // Toggle controls on mouse events and entering fullscreen - _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls); - - // Watch for cursor over controls so they don't hide when trying to interact - _on(plyr.controls, 'mouseenter mouseleave', function(event) { - plyr.controls.hover = event.type === 'mouseenter'; - }); - - // Watch for cursor over controls so they don't hide when trying to interact - _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { - plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type); - }); - - // Focus in/out on controls - _on(plyr.controls, 'focus blur', _toggleControls, true); - } - - // Adjust volume on scroll - _on(plyr.volume.input, 'wheel', function(event) { - event.preventDefault(); - - // Detect "natural" scroll - suppored on OS X Safari only - // Other browsers on OS X will be inverted until support improves - var inverted = event.webkitDirectionInvertedFromDevice, - step = config.volumeStep / 5; - - // Scroll down (or up on natural) to decrease - if (event.deltaY < 0 || event.deltaX > 0) { - if (inverted) { - _decreaseVolume(step); - } else { - _increaseVolume(step); - } - } - - // Scroll up (or down on natural) to increase - if (event.deltaY > 0 || event.deltaX < 0) { - if (inverted) { - _increaseVolume(step); - } else { - _decreaseVolume(step); - } - } - }); - } - - // Listen for media events - function _mediaListeners() { - // Time change on media - _on(plyr.media, 'timeupdate seeking', _timeUpdate); - - // Update manual captions - _on(plyr.media, 'timeupdate', _seekManualCaptions); - - // Display duration - _on(plyr.media, 'durationchange loadedmetadata', _displayDuration); - - // Handle the media finishing - _on(plyr.media, 'ended', function() { - // Show poster on end - if (plyr.type === 'video' && config.showPosterOnEnd) { - // Clear - if (plyr.type === 'video') { - _setCaption(); - } - - // Restart - _seek(); - - // Re-load media - plyr.media.load(); - } - }); - - // Check for buffer progress - _on(plyr.media, 'progress playing', _updateProgress); - - // Handle native mute - _on(plyr.media, 'volumechange', _updateVolume); - - // Handle native play/pause - _on(plyr.media, 'play pause ended', _checkPlaying); - - // Loading - _on(plyr.media, 'waiting canplay seeked', _checkLoading); - - // Click video - if (config.clickToPlay && plyr.type !== 'audio') { - // Re-fetch the wrapper - var wrapper = _getElement('.' + config.classes.videoWrapper); - - // Bail if there's no wrapper (this should never happen) - if (!wrapper) { - return; - } - - // Set cursor - wrapper.style.cursor = 'pointer'; - - // On click play, pause ore restart - _on(wrapper, 'click', function() { - // Touch devices will just show controls (if we're hiding controls) - if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) { - return; - } - - if (plyr.media.paused) { - _play(); - } else if (plyr.media.ended) { - _seek(); - _play(); - } else { - _pause(); - } - }); - } - - // Disable right click - if (config.disableContextMenu) { - _on(plyr.media, 'contextmenu', function(event) { - event.preventDefault(); - }); - } - - // Proxy events to container - // Bubble up key events for Edge - _on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) { - _triggerEvent(plyr.container, event.type, true); - }); - } - - // Cancel current network requests - // See https://github.com/sampotts/plyr/issues/174 - function _cancelRequests() { - if (!_inArray(config.types.html5, plyr.type)) { - return; - } - - // Remove child sources - var sources = plyr.media.querySelectorAll('source'); - for (var i = 0; i < sources.length; i++) { - _remove(sources[i]); - } - - // Set blank video src attribute - // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error - // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection - plyr.media.setAttribute('src', config.blankUrl); - - // Load the new empty source - // This will cancel existing requests - // See https://github.com/sampotts/plyr/issues/174 - plyr.media.load(); - - // Debugging - _log('Cancelled network requests'); - } - - // Destroy an instance - // Event listeners are removed when elements are removed - // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory - function _destroy(callback, restore) { - // Bail if the element is not initialized - if (!plyr.init) { - return null; - } - - // Type specific stuff - switch (plyr.type) { - case 'youtube': - // Clear timers - window.clearInterval(timers.buffering); - window.clearInterval(timers.playing); - - // Destroy YouTube API - plyr.embed.destroy(); - - // Clean up - cleanUp(); - - break; - - case 'vimeo': - // Destroy Vimeo API - // then clean up (wait, to prevent postmessage errors) - plyr.embed.unload().then(cleanUp); - - // Vimeo does not always return - timers.cleanUp = window.setTimeout(cleanUp, 200); - - break; - - case 'video': - case 'audio': - // Restore native video controls - _toggleNativeControls(true); - - // Clean up - cleanUp(); - - break; - } - - function cleanUp() { - clearTimeout(timers.cleanUp); - - // Default to restore original element - if (!_is.boolean(restore)) { - restore = true; - } - - // Callback - if (_is.function(callback)) { - callback.call(original); - } - - // Bail if we don't need to restore the original element - if (!restore) { - return; - } - - // Remove init flag - plyr.init = false; - - // Replace the container with the original element provided - plyr.container.parentNode.replaceChild(original, plyr.container); - - // Free container in order for GC to remove it and prevent memory leaks due to added events - plyr.container = null; - - // Allow overflow (set on fullscreen) - document.body.style.overflow = ''; - - //remove events - _off(document.body, 'click', onBodyClick); - - // Event - _triggerEvent(original, 'destroyed', true); - } - } - - // Setup a player - function _init() { - // Bail if the element is initialized - if (plyr.init) { - return null; - } - - // Setup the fullscreen api - fullscreen = _fullscreen(); - - // Sniff out the browser - plyr.browser = _browserSniff(); - - // Bail if nothing to setup - if (!_is.htmlElement(plyr.media)) { - return; - } - - // Load saved settings from localStorage - _setupStorage(); - - // Set media type based on tag or data attribute - // Supported: video, audio, vimeo, youtube - var tagName = media.tagName.toLowerCase(); - if (tagName === 'div') { - plyr.type = media.getAttribute('data-type'); - plyr.embedId = media.getAttribute('data-video-id'); - - // Clean up - media.removeAttribute('data-type'); - media.removeAttribute('data-video-id'); - } else { - plyr.type = tagName; - config.crossorigin = media.getAttribute('crossorigin') !== null; - config.autoplay = config.autoplay || media.getAttribute('autoplay') !== null; - config.loop = config.loop || media.getAttribute('loop') !== null; - } - - // Check for support - plyr.supported = supported(plyr.type); - - // If no native support, bail - if (!plyr.supported.basic) { - return; - } - - // Wrap media - plyr.container = _wrap(media, document.createElement('div')); - - // Allow focus to be captured - plyr.container.setAttribute('tabindex', 0); - - // Add style hook - _toggleStyleHook(); - - // Debug info - _log('' + plyr.browser.name + ' ' + plyr.browser.version); - - // Setup media - _setupMedia(); - - // Setup interface - // If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now - if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) { - // Setup UI - _setupInterface(); - - // Call ready - _ready(); - - // Set title on button and frame - _setTitle(); - } - - // Successful setup - plyr.init = true; - } - - // Setup the UI - function _setupInterface() { - // Don't setup interface if no support - if (!plyr.supported.full) { - _warn('Basic support only', plyr.type); - - // Remove controls - _remove(_getElement(config.selectors.controls.wrapper)); - - // Remove large play - _remove(_getElement(config.selectors.buttons.play)); - - // Restore native controls - _toggleNativeControls(true); - - // Bail - return; - } - - // Inject custom controls if not present - var controlsMissing = !_getElements(config.selectors.controls.wrapper).length; - if (controlsMissing) { - // Inject custom controls - _injectControls(); - } - - // Find the elements - if (!_findElements()) { - return; - } - - // If the controls are injected, re-bind listeners for controls - if (controlsMissing) { - _controlListeners(); - } - - // Media element listeners - _mediaListeners(); - - // Remove native controls - _toggleNativeControls(); - - // Setup fullscreen - _setupFullscreen(); - - // Captions - _setupCaptions(); - - // Set volume - _setVolume(); - _updateVolume(); - - // Reset time display - _timeUpdate(); - - // Update the UI - _checkPlaying(); - - // Display duration - _displayDuration(); - } - - api = { - getOriginal: function() { - return original; - }, - getContainer: function() { - return plyr.container; - }, - getEmbed: function() { - return plyr.embed; - }, - getMedia: function() { - return plyr.media; - }, - getType: function() { - return plyr.type; - }, - getDuration: _getDuration, - getCurrentTime: function() { - return plyr.media.currentTime; - }, - getVolume: function() { - return plyr.media.volume; - }, - isMuted: function() { - return plyr.media.muted; - }, - isReady: function() { - return _hasClass(plyr.container, config.classes.ready); - }, - isLoading: function() { - return _hasClass(plyr.container, config.classes.loading); - }, - isPaused: function() { - return plyr.media.paused; - }, - on: function(event, callback) { - _on(plyr.container, event, callback); - return this; - }, - play: _play, - pause: _pause, - stop: function() { - _pause(); - _seek(); - }, - restart: _seek, - rewind: _rewind, - forward: _forward, - seek: _seek, - source: _source, - poster: _updatePoster, - setVolume: _setVolume, - togglePlay: _togglePlay, - toggleMute: _toggleMute, - toggleCaptions: _toggleCaptions, - toggleFullscreen: _toggleFullscreen, - toggleControls: _toggleControls, - isFullscreen: function() { - return plyr.isFullscreen || false; - }, - support: function(mimeType) { - return _supportMime(plyr, mimeType); - }, - destroy: _destroy, - }; - - // Everything done - function _ready() { - // Ready event at end of execution stack - window.setTimeout(function() { - _triggerEvent(plyr.media, 'ready'); - }, 0); - - // Set class hook on media element - _toggleClass(plyr.media, defaults.classes.setup, true); - - // Set container class for ready - _toggleClass(plyr.container, config.classes.ready, true); - - // Store a refernce to instance - plyr.media.plyr = api; - - // Autoplay - if (config.autoplay) { - _play(); - } - } - - // Initialize instance - _init(); - - // If init failed, return null - if (!plyr.init) { - return null; - } - - return api; - } - - // Load a sprite - function loadSprite(url, id) { - var x = new XMLHttpRequest(); - - // If the id is set and sprite exists, bail - if (_is.string(id) && _is.htmlElement(document.querySelector('#' + id))) { - return; - } - - // Create placeholder (to prevent loading twice) - var container = document.createElement('div'); - container.setAttribute('hidden', ''); - if (_is.string(id)) { - container.setAttribute('id', id); - } - document.body.insertBefore(container, document.body.childNodes[0]); - - // Check for CORS support - if ('withCredentials' in x) { - x.open('GET', url, true); - } else { - return; - } - - // Inject hidden div with sprite on load - x.onload = function() { - container.innerHTML = x.responseText; - }; - - x.send(); - } - - // Check for support - function supported(type) { - var browser = _browserSniff(), - isOldIE = browser.isIE && browser.version <= 9, - isIos = browser.isIos, - isIphone = browser.isIphone, - audioSupport = !!document.createElement('audio').canPlayType, - videoSupport = !!document.createElement('video').canPlayType, - basic = false, - full = false; - - switch (type) { - case 'video': - basic = videoSupport; - full = basic && (!isOldIE && !isIphone); - break; - - case 'audio': - basic = audioSupport; - full = basic && !isOldIE; - break; - - // Vimeo does not seem to be supported on iOS via API - // Issue raised https://github.com/vimeo/player.js/issues/87 - case 'vimeo': - basic = true; - full = !isOldIE && !isIos; - break; - - case 'youtube': - basic = true; - full = !isOldIE && !isIos; - - // YouTube seems to work on iOS 10+ on iPad - if (isIos && !isIphone && browser.version >= 10) { - full = true; - } - - break; - - case 'soundcloud': - basic = true; - full = !isOldIE && !isIphone; - break; - - default: - basic = audioSupport && videoSupport; - full = basic && !isOldIE; - } - - return { - basic: basic, - full: full, - }; - } - - // Setup function - function setup(targets, options) { - // Get the players - var players = [], - instances = [], - selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); - - // Select the elements - if (_is.string(targets)) { - // String selector passed - targets = document.querySelectorAll(targets); - } else if (_is.htmlElement(targets)) { - // Single HTMLElement passed - targets = [targets]; - } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) { - // No selector passed, possibly options as first argument - // If options are the first argument - if (_is.undefined(options) && _is.object(targets)) { - options = targets; - } - - // Use default selector - targets = document.querySelectorAll(selector); - } - - // Convert NodeList to array - if (_is.nodeList(targets)) { - targets = Array.prototype.slice.call(targets); - } - - // Bail if disabled or no basic support - // You may want to disable certain UAs etc - if (!supported().basic || !targets.length) { - return false; - } - - // Add to container list - function add(target, media) { - if (!_hasClass(media, defaults.classes.hook)) { - players.push({ - // Always wrap in a
for styling - //container: _wrap(media, document.createElement('div')), - // Could be a container or the media itself - target: target, - // This should be the