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

dj_force

hearthis

<p>The hearthis.at plugin allows you to integrate a player widget from hearthis.at into your WordPress Blog by using a WordPress shortcodes.<br />
this is how it works:<br />
    [hearthis]https://hearthis.at/LINK_TO_TRACK_SET_OR_ARTIST/[/hearthis]</p>
<p>These Shortcodes do also supports several optional parameters. These parameters will pass its given value as option on to the player widget.<br />
At the moment the hearthis Shortcode accepts the following parameter and options:</p>
<ul>
<li><code>width</code> define the width of the widget (number value and if <= 100 means in %  and above 100 is in pixels. default is 100)</li>
<li><code>height</code> define the height of the widget (integer value or empty for default )<br />
if this value is less 100 it will passed as percent if it is higher than 100 it will parsed as pixels</li>
<li><code>theme</code> you can choose between these 2 options transparent (default) or transparent_black</li>
<li><code>hcolor</code> button and passed time color for the waveform (not set or a hex color with or without a prepending #)</li>
<li><code>color</code> highlight color for the waveform (not set or a hex color with or without a prepending #)</li>
<li><code>style</code> style ‘1’ is default waveform and value ‘2’ is the digitized waveform</li>
<li><code>background</code> shows the background if set (values not set, 1 or 0, if is 1 the height is 170px)</li>
<li><code>waveform</code> hides the waveform if you set to ‘1’, change track height fixed to 95px (values 0 off, 1 on)</li>
<li><code>cover</code> hides the cover image if its set (values 0 off, 1 on)</li>
<li><code>block_size</code> size of the waveform blocks (number, steps from 1 to 10, default is 2, works only if style is set to 2)</li>
<li><code>block_space</code> space size between the waveform blocks (integer, steps from 1 to 10, default is 1, works only if style is set to 2)</li>
<li><code>liststyle</code> only available on playlists or profile urls, this will display a list as single tracks but works only if you provide value ‘single’. If you enter a profile uri from hearthis.at this listing is limited by 50 tracks.</li>
<li><code>css</code> string, should contain a valid uri that will load an additional css file link the link tag</li>
</ul>
<p><strong>IMPORTANT NOTE</strong></p>
<p>This Version <strong>is now stable</strong> and provides also a fallback for some old hearthis Shortcode params.<br />
So these params could also being used because they will passed to the their new names.</p>
<ul>
<li><code>color2</code> the old name of the hcolor property</li>
<li><code>params</code> a params string with the namend values </li>
<li><code>digitized_size</code> old name of the waveform block size (see block_size)</li>
<li><code>digitized_space</code> old name of the waveform block space (see block_space)</li>
</ul>
<h3>Examples</h3>
<p>Embed a single track without any params.<br />
        [hearthis]https://hearthis.at/shawne/shawne-pornbass-12-06042013-2300-0200-uhr/[/hearthis]</p>
<p>Embed a playlist or setlist without params.<br />
        [hearthis]https://hearthis.at/crecs/set/tbase-feat-charlotte-haining-oscar-michael-unspoken-words-ep/[/hearthis]</p>
<p>Embed a user profile with a blue hightlight color.<br />
        [hearthis hcolor=”0000ff”]https://hearthis.at/crecs/[/hearthis]</p>
<p>Embed a user without color params.<br />
        [hearthis hcolor=”#ff5c24″ color=”#33fd11″]http://hearthis.at/djforce/[/hearthis]</p>
<p>Embeds a track with a black theme and a background image (if set) and hides the cover.<br />
        [hearthis theme=”transparent” background=”1″ cover=”1″]https://hearthis.at/djforce/baesser-forcesicht-dnbmix/[/hearthis]</p>
<p>Embeds a track player with 50% width and a green button color.<br />
        [hearthis width=”50″ color=”#33fd11″]https://hearthis.at/crec/maverick-krl-c-recordings-guestmix/[/hearthis]</p>
<p>Embeds a track player with 500px width and hides the waveform and has the transparent_black theme. Remember this will change track height to 95 pixels.<br />
        [hearthis width=”500″ waveform=”1″ params=”color2=00ff00&theme=transparent_black”]https://hearthis.at/djforce/dj-force-is-breaking-the-habit-electrobreaks-bass-dubstep-mix-052014/[/hearthis]</p>
<p>Embeds a playlist or set with 400px height.<br />
        [hearthis height=”400″]https://hearthis.at/set/51-7/[/hearthis]</p>
<p>This is not a real option, its more like a hook and works only with playlists or profile urls.<br />
So if you want to display a playlist or user profile as single tracks and not as a list you can set this option.<br />
For users we limited this by 50 tracks. Does only take effect if the value single is inside the liststyle tag.<br />
        [hearthis liststyle=”single”]https://hearthis.at/djforce/set/dubstep-mixes/[/hearthis]</p>
<h3>special thanks and credits</h3>
<h4>hearthis.at – music is our passion</h4>
<p><strong>thx for using and supporting</strong> <a href="https://hearthis.at/" rel="nofollow ugc">hearthis.at</a></p>


hearthis.at

works good and now you have more control over all possible options



works

Embed hearthis.at audio players with shortcodes. Supports tracks, playlists, profiles with customizable colors, themes, and waveforms.

Able Player, accessible HTML5 media player vs hearthis.at