Hi Everyone, This post explains how to manually setup and call the Plyr player if needed. New Plyr Player aMember recently switched to Plyr as their newly supported media player. Supported v Unsupported File Locations If you are calling your media (audio & video) files from aMember's supported location you don't need these instructions but if you are calling your media files from a unsupported location then you need to manually setup the Plyr player to work with your files. Supported Location Protect Content > Video > JavaScript Code (click to expand) You get to choose your player parameters (audio, video, custom) with aMember's admin interface and the embed code is auto-generated for you. Example: Just insert the code they give you on any page Code: <!-- the following code you may insert into any HTML, PHP page of your website or into WP post --> <!-- you may skip including Jquery library if that is already included on your page --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- end of JQuery include --> <!-- there is aMember video JS code starts --> <!-- you can use GET variable width and height in src URL below to customize these params for specific entity eg. https://www.yourdomain.com/members/audio/js/id/8?width=550&height=30 --> <script type="text/javascript" async id="am-audio-8" src="https://www.yourdomain.com/members/audio/js/id/8"> </script> <!-- end of aMember video JS code --> Unsupported Location Protect Content > Files > (aMember created file links) Example https://www.yourdomain.com/members/content/f/id/762 You have loads of audio & video files saved as files and you want to play them from this location. aMember doesn't support this ability officially. To get around this you can manually setup and embed using modified code. Disclaimer: This is nothing official, only my best attempt at getting this to work. The code is offered in "as is" and use at your own risk, without support or guarantees. Plyr Player Manual Setup There are three setup parts: Plyr CSS & Player Construction Plyr JS Embed Code Part One - Plyr CSS & Player Construction The simplest way is to add the Plyr CSS & Player Construction is to add this custom JavaScript to your /members/configs/site.js This way the needed code will appear on every page and won't be overwritten by future updates to aMember. You get to choose the Plyr Player controls, by adding or removing options in this code, as fully documented: https://github.com/sampotts/plyr/blob/master/README.md Code: // On document load Plyr Player document.addEventListener('DOMContentLoaded', () => { function addStylesheet() { // Load Plyr CSS stylesheet in head const link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '/members/application/default/views/public/js/plyr/plyr.css'; document.getElementsByTagName('head')[0].appendChild(link); } addStylesheet(); // Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control // to the settings, ALL default controls are removed and you have to add them back in by defining those below. // For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default. // Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed, // meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again. const controls = [ 'play-large', // The large play button in the center 'restart', // Restart playback 'rewind', // Rewind by the seek time (default 10 seconds) 'play', // Play/pause playback 'fast-forward', // Fast forward by the seek time (default 10 seconds) 'progress', // The progress bar and scrubber for playback and buffering 'current-time', // The current time of playback 'duration', // The full duration of the media 'mute', // Toggle mute 'volume', // Volume control 'captions', // Toggle captions 'settings', // Settings menu 'pip', // Picture-in-picture (currently Safari only) 'airplay', // Airplay (currently Safari only) 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options 'fullscreen' // Toggle fullscreen ]; // Sets up multiple players on page with class .js-player const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, { controls })); }); Part Two - Plyr JS This script needs to be added at the bottom of your content page, before the </body> tag or as close to as you can. The Plyr documentation states this is the location to use. I tried my hardest to include this script in the head after the DOMContentLoaded event to be able to incorporate calling this script in the site.js from the document <head> but it just wouldn't work in this location for whatever reason... Code: <script defer src = "https://www.yourdomain.com/members/application/default/views/public/js/plyr/plyr.min.js"></script> Part Three In the content section of your page, wherever you wish an audio or video player to appear use the following code. The class was given the name "js-player" to distinguish it from aMember generated player names, to avoid confusion. The magic juice here is passing the file types to Plyr for without them the files won't play. type="audio/mpeg" type="audio/mp4" Audio Embed Code: <audio class="js-player"> <source src="https://www.yourdomain.com/members/content/f/id/762" type="audio/mpeg"/> </audio> Video Embed Code: <video class="js-player"> <source src="https://www.yourdomain.com/members/content/f/id/765" type="audio/mp4"/> </video> Hope this helps everyone out, it took several days to figure this out and I give thanks to aMember's tech support team for helping me work the problem. Aly
Small Phone Screen - Display Issue Found a display issue on small screens (mobile phone) when adding all the player controls. If there isn't enough screen width, some of the controls are outside the viewable area. Modified the site.js code to test for screen width and adjust how many controls are setup: If the screen width is greater than 400px wide, => setup all the player controls Else if the screen width is less than 400px wide => setup fewer player controls Just commented out the controls not needed in the modified code so you can see what is going on. Code: // On document load Plyr Player document.addEventListener('DOMContentLoaded', () => { function addStylesheet() { // Load Plyr CSS stylesheet in head const link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '/members/application/default/views/public/js/plyr/plyr.css'; document.getElementsByTagName('head')[0].appendChild(link); } addStylesheet(); // If screen has room for all controls set them up if (window.matchMedia('(min-width: 400px)').matches) { // Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control // to the settings, ALL default controls are removed and you have to add them back in by defining those below. // For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default. // Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed, // meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again. const controls = [ 'play-large', // The large play button in the center 'restart', // Restart playback 'rewind', // Rewind by the seek time (default 10 seconds) 'play', // Play/pause playback 'fast-forward', // Fast forward by the seek time (default 10 seconds) 'progress', // The progress bar and scrubber for playback and buffering 'current-time', // The current time of playback 'duration', // The full duration of the media 'mute', // Toggle mute 'volume', // Volume control 'captions', // Toggle captions 'settings', // Settings menu 'pip', // Picture-in-picture (currently Safari only) 'airplay', // Airplay (currently Safari only) 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options 'fullscreen' // Toggle fullscreen ]; // Sets up multiple players on page with class .js-player const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, { controls })); } else { // If screen smaller in size and does not have room // Then set up fewer controls const controls = [ 'play-large', // The large play button in the center //'restart', // Restart playback //'rewind', // Rewind by the seek time (default 10 seconds) 'play', // Play/pause playback //'fast-forward', // Fast forward by the seek time (default 10 seconds) 'progress', // The progress bar and scrubber for playback and buffering 'current-time', // The current time of playback //'duration', // The full duration of the media 'mute', // Toggle mute 'volume', // Volume control 'captions', // Toggle captions 'settings', // Settings menu 'pip', // Picture-in-picture (currently Safari only) 'airplay', // Airplay (currently Safari only) 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options 'fullscreen' // Toggle fullscreen ]; // Sets up multiple players on page with class .js-player const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, { controls })); } }); Portrait All Controls (overflows screen) Portrait Fewer Controls (fits in screen) Now if you enter the website in landscape all the controls will be setup. Then if you rotate the screen to portrait it will still show all the player controls and overflow. You can rewrite the site.js code to test for screen width on a resize event to cover this scenario. I am not bothering to do so as nearly always people enter the website in portrait mode. Plyr documentation says you need to disable the player before reconstructing it. Something like this... Code: <video id="js-player" data-plyr-config='{ "enabled": "false" }'></video> Hope all this helps. Aly
Solution - Full Automation A good way of fully automating the inclusion the Plyr JS on every page without manually having to insert before the end body tag </body> it is to modify the _layout.phtml file stored at the following location: Code: /members/application/default/views/_layout.phtml The _layout.phtml file is used by aMember to adjust page layout. Code Example The code example below, shows just the bottom part of the _layout.phtml file code to give placement context. Code: <div class="am-footer"> <div class="am-footer-content-wrapper am-main"> <div class="am-footer-content"> <div class="am-footer-actions"> <a href="#top" id="am-action-move-to-top"></a> </div> <div class="am-credits">Built on <a href="http://www.amember.com/" style="text-decoration: none;" title="flexible, user-friendly membership software (subscription script)">aMember Pro™ membership software</a></div> <div class="am-footer-text"><?php echo str_replace( ['%site_title%', '%year%'], [$di->config->get('site_title'), date('Y')], $theme->getConfig('footer', "© %year% - {$di->config->get('site_title')}")); ?></div> </div> </div> </div> <?php echo $this->placeholder('body-finish'); ?> <script src = "/members/application/default/views/public/js/plyr/plyr.min.js"></script> </body> </html> Automation & Manual Code So now you only have to add the <audio> and <video> tag codes manually on your pages where you wish the Plyr player to be used, automating everything else needed by adding the appropriate Plyr code in these two locations. /members/configs/site.js /members/application/default/views/_layout.phtml Aly