Joe Dolson

terrillthompson

<p>This plug-in uses Able Player, an open-source fully-accessible cross-browser HTML5 media player, to embed audio or video within your WordPress page.</p>
<h3>Instructions for Use</h3>
<p>There are currently three ways to add an Able Player instance to a WordPress site:</p>
<ol>
<li>Go to Settings > Able Player > Settings and enable the options to use Able Player for all video, audio, and playlists. Able Player will automatically replace MediaElement.jss or the default WordPress video/audio blocks with Able Player.</li>
<li>Go to Settings > Able Player > Shortcodes to generate an <code>[ableplayer]</code> shortcode.</li>
<li>Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the <a href="http://ableplayer.github.io/ableplayer" rel="nofollow ugc">Able Player</a> project page on GitHub.</li>
</ol>
<p>Using the media rewriting in option #1, Able Player will replace any <code>audio</code> or <code>video</code> block. Any tracks added to that block will be automatically handled, giving you support for all the standard Able Player features: captions, navigable transcripts, subtitles, chapters, and audio description.</p>
<p>Using option #2, you can create Able Player shortcodes that support most of the basic Able Player features, with support for Vimeo, YouTube, or local video.</p>
<p>Option #3 supports the full scope of Able Player features.</p>
<h3>The [ableplayer] shortcode</h3>
<p>The <code>[ableplayer]</code> shortcode supports the following attributes.</p>
<h4>Required attributes (one of these)</h4>
<ul>
<li><code>youtube-id</code> – 11-character YouTube ID or YouTube URL.</li>
<li><code>vimeo-id</code> – Vimeo ID or URL.</li>
<li>`media-id’ – An attachment ID for a media file in your WordPress media library or the URL to a hosted video.</li>
</ul>
<h4>Additional Player Content</h4>
<ul>
<li><code>captions</code> – Attachment ID or URL to <code>.vtt</code> captions file. Optional pipe separator for language code and label.</li>
<li><code>subtitles</code> – Attachment ID or URL to <code>.vtt</code> subtitles file. Optional pipe separator for language code and label.</li>
<li><code>chapters</code> – Attachment ID or URL to <code>.vtt</code> chapters file. Optional pipe separator for language code and label.</li>
<li><code>descriptions</code> – Attachment ID or URL to <code>.vtt</code> audio descriptions file. Optional pipe separator for language code and label.</li>
<li><code>youtube-desc-id</code> – YouTube URL or ID of a described version of the video</li>
<li><code>youtube-sign-src</code> – YouTube URL or ID of a sign language interpreted accompanying video</li>
<li><code>vimeo-desc-id</code> – Vimeo URL or ID of a described version of the video</li>
</ul>
<p>All captions, subtitles, chapters, and descriptions tracks must be in <code>.vtt</code> format. The shortcode only supports a single set of values for each type of data; to add multiple tracks of the same type you can use the Video block or add custom HTML.</p>
<p>Either an attachment ID or a URL for your track <code>.vtt</code> is required; you can optionally add a language code and a custom label:</p>
<pre><code>captions="/path/to/file.vtt|es|Español"
</code></pre>
<p>By default, the language will be your WordPress installation language, with the labels “Captions”, “Subtitles”, “Chapters” or “Audio Description”.</p>
<h4>Player Options</h4>
<ul>
<li><code>youtube-nocookie</code> – “true” or “false” (use “true” to embed YouTube untracked, for added privacy)</li>
<li><code>autoplay</code> – “true” or “false” (default is “false”)</li>
<li><code>loop</code> – “true” or “false” (default is “false”)</li>
<li><code>playsinline</code> – “true” or “false” (default is “true”). By setting to “false”, some devices (e.g., iPhones) will play the video in their own media player rather than in Able Player.</li>
<li><code>hidecontrols</code> – “true” or “false” (default is “false”). Set to “true” to enable the player controls to fade away during playback. They will appear again if the user hovers over the player or pressing a key, and they are always accessible to screen reader users.</li>
<li><code>poster</code> – the URL of a poster image, displayed before the user presses Play</li>
<li><code>width</code> – a value in pixels (by default, the player will be sized to fit its container)</li>
<li><code>height</code> – a value in pixels (by default, the height of the player will be in proportion to the width)</li>
<li><code>heading</code> – The HTML heading level (1-6) of the visually hidden “Media Player” heading that precedes the player (for the benefit of screen reader users). If omitted, a heading level will be intelligently assigned based on context.</li>
<li><code>speed</code> – “animals” or “arrows” (default is “animals”)</li>
<li><code>start</code> – start time at which to start playing the media, in seconds. Some browsers do not support this.</li>
<li><code>volume</code> – “0” to “10” (default is “7” to avoid overpowering screen reader audio). Some browsers do not support this.</li>
<li><code>seekinterval</code> – number of seconds to forward/rewind with the Forward and Rewind buttons. If omitted, the interval will be intelligently assigned based on length of the video.</li>
<li><code>nowplaying</code> – “true” or “false” to include a “Selected Track” section within the media player (default is “false”).</li>
<li><code>transcript-div</code> – ID attribute of a target element that will contain the video transcript</li>
<li><code>id</code> – a unique id for the player (if omitted, one will be automatically assigned)</li>
</ul>
<h3>Examples</h3>
<h4>Example 1</h4>
<p>This example uses HTML to add an audio player to the page, with one source (an MP3 file).<br />
    <code>html<br />
  <audio id="audio1" preload="auto" data-able-player src="path_to_audio.mp3"></audio></code></p>
<h4>Example 2</h4>
<p>This example uses HTML to add a video player to the page, with one source (an MP4 file) and four tracks (for captions, descriptions, and chapters in English; and subtitles in Spanish).<br />
    <code>html<br />
  <video id="able-player-1" data-able-player preload="auto" poster="path_to_image.jpg"><br />
    <source type="video/mp4" src="path_to_video.mp4"><br />
    <track kind="captions" src="path_to_captions.vtt" srclang="en" label="English"><br />
    <track kind="subtitles" src="path_to_subtitles.vtt" srclang="es" label="Español"><br />
    <track kind="descriptions" src="path_to_descriptions.vtt" srclang="en"><br />
    <track kind="chapters" src="path_to_chapters.vtt" srclang="en"><br />
  </video></code></p>
<h4>Example 3</h4>
<p>This example uses the shortcode to add a video player to the page, with one source (an MP4 file) and four tracks (for captions, descriptions, and chapters in English; and subtitles in Spanish). All sources are fetched as WordPress media attachments.<br />
    <code>html<br />
  [ableplayer poster="21" media-id="24" captions="25|en|English" subtitles="26|es|Español" descriptions="27" chapters="28"]</code></p>
<h4>Example 4</h4>
<p>This example uses a shortcode to add a YouTube player to the page, with two versions of the video, one with audio description and the other without (the user can toggle between the two versions using the D button).<br />
    <code>[ableplayer youtube-id="XXXXXXXXXXX" youtube-desc-id="YYYYYYYYYYY"]</code></p>
<h4>Example 5</h4>
<p>This example uses a shortcode to add a Vimeo player to the page, with two versions of the video, one with audio description and the other without (the user can toggle between the two versions using the D button).<br />
    <code>[ableplayer vimeo-id="XXXXXXXXX" vimeo-desc-id="YYYYYYYYY"]</code></p>
<p>The Able Player plugin was originally created by <a href="https://terrillthompson.com" rel="nofollow ugc">Terrill Thompson</a>.</p>


Able Player, accessible HTML5 media player

pupunzi

<p>A Chrome-less Youtube® video player that let you play any YouTube® video as background of your WordPress® page or post.<br />
You can activate it for your home page from the settings panel (no license needed) or on any post or page using the short code (need the <a href="https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL" rel="nofollow ugc">Plus version</a>) as described in the Reference section of the settings.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/lTW937ld02Y?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>If you prefer to use a Vimeo video you can take a look at <a href="https://wordpress.org/plugins/wp-vimeoplayer/" rel="ugc">mb.VimeoPlayer WordPress plug-in</a></p>
<p>note:<br />
If you don’t want ADs on your background video and you are the owner of it you can disable this on your Youtube channel as explained here: http://candidio.com/blog/how-to-remove-ads-from-your-youtube-videos .</p>
<ul>
<li>demo: <a href="http://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html" rel="nofollow ugc">See the Youtube background video in action!</a></li>
<li>video: <a href="http://www.youtube.com/watch?v=lTW937ld02Y" rel="nofollow ugc">See a short video tutorial</a></li>
<li>pupunzi blog: <a href="http://pupunzi.open-lab.com" rel="nofollow ugc">Go to my blog</a></li>
<li>pupunzi site: <a href="http://pupunzi.com" rel="nofollow ugc">Go to my site</a></li>
</ul>
<p>This plug in has been tested successfully on:</p>
<ul>
<li>Chrome 11+, Firefox 7+, Opera 9+    on Mac OsX, Windows and Linux</li>
<li>Safari 5+    on Mac OsX</li>
<li>IE7+    on Windows (via Adobe Flash player)</li>
</ul>
<h3>To set your homepage background video:</h3>
<ol>
<li>Go to the mbYTPlayer settings panel (you can find it under the “settings” section of the WP backend.</li>
<li>set the complete YT video url</li>
<li>set all the other parameters as you need.</li>
</ol>
<p>You can also set it by placing a shortcode in the home page via the YTPlayer shortcode window (<a href="https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL" rel="nofollow ugc">Plus version</a>).<br />
You can open it by clicking on the YTPlayer button in the top toolbar of the page editor.</p>
<h3>To set a video as background of a post or a page:</h3>
<p>Use the editor button or write the below shortcode into the content of your post or page (<a href="https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL" rel="nofollow ugc">Plus version</a>):</p>
<p>[mbYTPlayer url=”http://www.youtube.com/watch?v=V2rifmjZuKQ” ratio=”4/3″ mute=”false” loop=”true” showcontrols=”true” opacity=1]</p>
<ul>
<li>@ url = the YT url of the video you want as background</li>
<li>@ ratio = the aspect ratio of the video 4/3 or 16/9</li>
<li>@ mute = a boolean to mute the video</li>
<li>@ loop = a boolean to loop the video on its end</li>
<li>@ showcontrols = a boolean to show or hide controls and progression of the video</li>
<li>@ opacity = a value from 0 to 1 that set the opacity of the background video</li>
<li>@ id = The ID of the element in the DOM where you want to target the player (default is the BODY)</li>
<li>@ quality:
<ul>
<li>small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.</li>
<li>medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).</li>
<li>large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).</li>
<li>hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).</li>
<li>hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).</li>
<li>highres: Player height is greater than 1080px, which means that the player’s aspect ratio is greater than 1920px by 1080px.</li>
<li>default: YouTube selects the appropriate playback quality.</li>
</ul>
</li>
</ul>
<h3>mb.YTPlayer Plus</h3>
<p>With the <a href="https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL" rel="nofollow ugc">Plus version</a> you’ll get:</p>
<ul>
<li>Remove the water-mark from the video</li>
<li>Set the video opacity</li>
<li>Set the video quality</li>
<li>Set the video aspect ratio</li>
<li>Set the video start point</li>
<li>Set the video end point</li>
<li>Show the control bar</li>
<li>Choose the full screen behavior</li>
<li>Set the starting audio volume</li>
<li>Choose if the video should start mute or not</li>
<li>Choose if the video should loop</li>
<li>Add a raster image over the video</li>
<li>Track the video views on Google Analytics</li>
<li>Choose if the player should pause if the windows blur</li>
<li>Add any YTPlayer video as background of any page or as backgraund of any element of your page enabling the short-code editor.</li>
<li>Use the YTPlayer to display a clean Youtube video as player (via short-code).</li>
</ul>
<h3>What about mobile</h3>
<p>The mb.YTPlayer now works on mobile devices!<br />
The video starts as soon the device screen is touched.</p>


mb.YTPlayer for background videos

Play any Youtube video as background of your page or as custom player inside an element of the page.

Able Player, accessible HTML5 media player vs mb.YTPlayer for background videos