FAX Free

Want to replace the Webflow Video Element / HTML5 Video, YouTube/Vimeo embeds, and any third-party audio player? Learn how to integrate plyr.io, a custom media player made by Sam Potts, to extend the functionality of the normal video and audio players found on everyday websites! Adobe Flash Player EOL General Information Page. Since Adobe no longer supports Flash Player after December 31, 2020 and blocked Flash content from running in Flash Player beginning January 12, 2021, Adobe strongly recommends all users immediately uninstall Flash Player to help protect their systems.

1. Player Player Meme
2. Plyr Player Example
3. Player Player Clothing
4. Plyr Video Player

tl;dr:

If you can manage your way around Javascript and don't give a damn about how this project is built and just want to get started, I don't blame you — you just want to build. You can clone the entire project onto your Webflow Dashboard by clicking here.

With its straight-forward and on-point approach, Plyr is definitely one of the cleanest and lightest online video players with an enterprise-level backend. It can handle high traffic, long HD video streaming and live streaming while having a user-friendly and intuitive UI/UX, making it immensely scalable. How to Integrate Plyr.io's Video Player with Custom Controls. The tutorial for this project (to re-create it yourself) can be found here. If you're just wanting to see how a replacement to HTML5 Video and YouTube/Vimeo embeds WITH CUSTOM CONTROLS, clone away and mess around with this project here.

Introduction

Look: there are times where the standard HTML5 Video and Audio elements just don't cut it, plain-and-simple. The same look across every website ever can get old, and sometimes, you want more control than you can get with this media player default. Furthermore, third-party media player embeds leave little room for customization. SoundCloud has the same embedded player, and you can really only get a different audio player from them if you upgrade your account to the highest tier. It's a similar story with Vimeo's player, and the YouTube player is quite far from customizable in general.

Want to change it? Plyr.io is your new best friend — a big shout-out to Sam Potts for building this! Plyr is a simple, accessible, and customizable media player that replaces HTML5 Video/Audio elements, YouTube embeds, and Vimeo Embeds.

Player Player Meme

Some Notes

• While this tutorial is built on static pages within Webflow, it can be used with the CMS. (The only difference is that your media source needs to come from the CMS, whether that be a link to an MP4 or audio file or the ID of a YouTube/Vimeo video.)
• The GitHub documentation can be found here.
• IMPORTANT: This tutorial assumes that your page is somewhat set-up and designed. Not a requirement by any means, but we're not going to be walking through designing your page. Clone my project to get started quick.

Get Started (Default Controls)

Regardless of whether you want to integrate Plyr's video or audio player, you'll need to reference some required files found in the Plyr.io docs.

• The Plyr.io Library itself (Javascript)
• The Plyr.io Stylesheet (CSS)

The former is the Javascript files that actually do most of the heavy lifting that we don't see, and the latter is the stylesheet that designs the Plyr.io player for us. We just need to reference these via the CDN resource provided. (Meaning the files are hosted elsewhere.)

In the Custom Code settings: within the {% code-line %}Inside < head > tag{% code-line-end%}, add the following snippet:

{% code-block language='js' %}
<link href='https://cdn.plyr.io/3.5.6/plyr.css' />
{% code-block-end %}

In the same panel, one field below in the {% code-line %}Before < body > tag{% code-line-end %} , add this snippet:

{% code-block language='js' %}
<script src='https://cdn.plyr.io/3.5.6/plyr.js'></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const player = Plyr.setup('.js-player');
});
</script>
{% code-block-end %}

Note: you'll see here that we defined the class of the player as {% code-line %}.js-player{% code-line-end %} . While this is the class name I used, you can really use whatever you'd like. Just be sure to replace the class throughout the code!

Integrating Plyr for HTML5 Video

HTML5 Video elements use the {% code-line %}< video >{% code-line-end %} tag to embed a video on the page. We're going to still be using the {% code-line %}< video >{% code-line-end %} tag to pull in our video, but we're going to add the class of {% code-line %}.js-player{% code-line-end %} as mentioned above. Drag an HTML Embed onto the page, and inside of it, paste the following:

{% code-block language='html' %}
<video poster='https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg'><source src='https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4'/></video>
{% code-block-end %}

Note: the poster element is not required, but recommended. It's the thumbnail image shown prior to the video being played. Further, you would replace the {% code-line %}src{% code-line-end %} with a link/path to your video, and same with the {% code-line %}poster{% code-line-end %} URL.

And... that's actually it! Hit Publish and then watch as the standard HTML5 Video element is replaced with Plyr's media player.

Integrating Plyr for YouTube/Vimeo Videos

According to the docs, Plyr has a few methods of doing this - including a method that uses Progressive Enhancement, but I should note that we are not using the Progressive Enhancement method.

You're more than welcome to use it though, as you just have to make a simple {% code-line %}class{% code-line-end %} change in your embedded code snippet. (Change it from {% code-line %}.js-player{% code-line-end %} to {% code-line %}.plyr__video-embed{% code-line-end %} and Progressive Enhancement will kick in. Be sure to change this in the Javascript snippet above!)

Drag an HTML Embed onto the page, and inside of your HTML embed, add the following snippet:

{% code-block language='js' %}
<div></div>
{% code-block-end %}

When you look at any YouTube video, the URL generally looks like this:

{% code-line %}https://www.youtube.com/watch?v=v1M4ydNlgP0{% code-line-end %}

The {% code-line %}v1M4ydNlgP0{% code-line-end %} part of the URL is the ID that YouTube has assigned to that video. Grab the ID of the video you want to embed, and replace the {% code-line %}data-plyr-embed-id{% code-line-end %} with that same ID.

—

What if I want to use Vimeo? Simply replace {% code-line %}data-plyr-provider='youtube'{% code-line-end %} with {% code-line %}data-plyr-provider='vimeo'{% code-line-end %} , and replace the {% code-line %}data-plyr-embed-id='v1M4ydNlgP0'{% code-line-end %} with the the ID of the Vimeo video. (They use a similar URL structure.)

—

IMPORTANT: In order for this to work for YouTube videos, you must first define the size of either the HTML Embed itself OR an ancestor element. What do I mean by this? When you drop in your HTML Embed element in Webflow, you'll need to either give that element a defined width/height (px, vw, vh - whatever floats your boat) OR give any of the ancestors (parent, parent of the parent, etc.) a defined size. This is because the code below needs some size parameters when the page loads to determine the video size. (Please view the read-only to see how I did this.)

Once you've:

• Added in the CSS Stylesheet Link
• Added in the JS Snippet
• Added in the HTML Embed with the snippet inside
• Defined the size of the HTML Embed OR an ancestor

You're done! Hit Publish and you'll be set.

Integrating Plyr for Audio (HTML5, SoundCloud, etc.)

Plyr Player Example

HTML5 Audio elements use the {% code-line %}< audio >{% code-line-end %} tag to embed a video on the page. We can use the {% code-line %}< audio >{% code-line-end %} tag for SoundCloud embeds and other third-party audio sources as well. Just like we did with the integrations above, we're going to add the class of {% code-line %}.js-player{% code-line-end %} as mentioned above. Drag an HTML Embed onto the page, and inside of it, paste the following:

{% code-block language='html' %}
<audio>
<source src='https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3'/>
</audio>
{% code-block-end %}

Done! Hit Publish and then watch as the standard HTML5 Audio element is replaced with Plyr's media player.

'Okay... but I want custom controls.'

Cool! We can do that too. Plyr is customizable enough to allow you to control a variety of settings within the player itself. Here are the controls we can either hide or show to the user. (Some are browser- and device-specific, like Airplay.)

{% code-block language='js' %}
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
];
{% code-block-end %}

'OK, so what do I do differently?'

You'll still follow the steps exactly as written above for your desired player, with just one modification — a modified Javascript snippet!

In lieu of the first Javascript snippet at the very top of this document, paste the following in to the {% code-line %}Before < body > tag{% code-line-end %} :

Player Player Clothing

{% code-block language='js' %}
<script src='https://cdn.plyr.io/3.5.6/plyr.js'></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 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
];
const player = Plyr.setup('.js-player', { controls });
});
</script>
{% code-block-end %}

IMPORTANT: Plyr.io works in such a way that as soon as you modify any of the controls at all using the custom snippet, ALL controls are gone and you need to manually specify the controls you want. This means that if you're literally just looking to add in the {% code-line %}rewind{% code-line-end %} button on top of the default controls but specify just rewind in controls, your player will literally only have the {% code-line %}rewind{% code-line-end %} button - no play button, no progress bar, volume, etc.

When you paste in that above snippet, your player should have the full array of controls that player allows for. If you're looking for a snippet that just shows you {% code-line %}play{% code-line-end %} , {% code-line %}progress{% code-line-end %} , and {% code-line %}restart{% code-line-end %} , you'll simply specify that as follows:

{% code-block language='js' %}
<script src='https://cdn.plyr.io/3.5.6/plyr.js'></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 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 = [
'restart', // Restart playback
'play', // Play/pause playback
'progress' // The progress bar and scrubber for playback and buffering
];
const player = Plyr.setup('.js-player', { controls });
});
</script>
{% code-block-end %}

It's that simple! Add-and-remove what you need, hit publish, and you're set!

'Can I use this with the CMS?'

Sure! The only difference is that you'll need to replace the {% code-line %}src{% code-line-end %} in all of these players with the path or ID to the media from your CMS item.

Hopefully this helped! If it did, I would love to hear from you. Comment below, DM me on Twitter, or send me a good ol' fashioned email at matt@visualdev.fm.

‍

‍

Tools for Splitting, Applying and Combining Data

A set of tools that solves a common set ofproblems: you need to break a big problem down into manageable pieces,operate on each piece and then put all the pieces back together. Forexample, you might want to fit a model to each spatial location ortime point in your study, summarise data by panels or collapsehigh-dimensional arrays to simpler summary statistics. The developmentof 'plyr' has been generously supported by 'Becton Dickinson'.

Readme

plyr is a set of tools for a common set of problems: you need to split up a big data structure into homogeneous pieces, apply a function to each piece and then combine all the results back together. For example, you might want to:

• fit the same model each patient subsets of a data frame
• quickly calculate summary statistics for each group
• perform group-wise transformations like scaling or standardising

It's already possible to do this with base R functions (like split and the apply family of functions), but plyr makes it all a bit easier with:

• totally consistent names, arguments and outputs
• convenient parallelisation through the foreach package
• input from and output to data.frames, matrices and lists
• progress bars to keep track of long running operations
• built-in error recovery, and informative error messages
• labels that are maintained across all transformations

Considerable effort has been put into making plyr fast and memory efficient, and in many cases plyr is as fast as, or faster than, the built-in equivalents.

A detailed introduction to plyr has been published in JSS: 'The Split-Apply-Combine Strategy for Data Analysis', http://www.jstatsoft.org/v40/i01/. You can find out more at http://had.co.nz/plyr/, or track development at http://github.com/hadley/plyr. You can ask questions about plyr (and data manipulation in general) on the plyr mailing list. Sign up at http://groups.google.com/group/manipulatr.

Status

plyr is retired: this means only changes necessary to keep it on CRAN will be made. We recommend using dplyr (for data frames) or purrr (for lists) instead.

Functions in plyr

Last month downloads

Details

Include our badge in your README

Plyr Video Player

[![Rdoc](http://www.rdocumentation.org/badges/version/plyr)](http://www.rdocumentation.org/packages/plyr)