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

Noor Alam

<p><a href="https://wphowto.net/videojs-html5-player-for-wordpress-757" rel="nofollow ugc">Video.js HTML5 Player</a> is a user-friendly plugin that supports video playback on desktop and mobile devices. It makes super easy for you to embed both self-hosted video files or video files that are externally hosted using Video.js library.</p>
<p><iframe loading="lazy" title="How to Embed a Video with Video.js Player in WordPress" width="750" height="422" src="https://www.youtube.com/embed/uF-V6qGvcu8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>Video.js HTML5 Player Add-ons</h3>
<ul>
<li><a href="https://wphowto.net/videojs-html5-player-for-wordpress-757" rel="nofollow ugc">Disable Right Click</a></li>
<li><a href="https://wphowto.net/videojs-player-plugin-themes-7042" rel="nofollow ugc">Themes</a></li>
</ul>
<h3>Video.js HTML5 Player Features</h3>
<ul>
<li>Embed MP4 video files into a post/page or anywhere on your WordPress site</li>
<li>Embed responsive videos for a better user experience while viewing from a mobile device</li>
<li>Embed HTML5 videos which are compatible with modern browsers</li>
<li>Embed videos with poster images</li>
<li>Embed videos using videojs player</li>
<li>Automatically play a video when the page is rendered if the device and browser support it</li>
<li>Embed videos uploaded to your WordPress media library using direct links in the shortcode</li>
<li>Clean and sleek player with no watermark</li>
<li>fallbacks for other HTML5-supported filetypes (WebM, Ogv)</li>
<li>HTTP streaming</li>
</ul>
<h3>How to Use Video.js HTML5 Player</h3>
<p>In order to embed a video create a new post/page and use the following shortcode:</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4"]
</code></pre>
<p>Here, “url” is the location of the MP4 video source file (H.264 encoded). You need to replace the sample URL with the actual URL of the video file.</p>
<h4>Video Shortcode Options</h4>
<p>The following options are supported in the shortcode.</p>
<p><strong>WebM</strong></p>
<p>You can specify a WebM video file in addition to the source MP4 video file. This parameter is optional.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm"]
</code></pre>
<p><strong>Ogv</strong></p>
<p>You can specify a Ogv video file in addition to the source MP4 & WebM video files. This parameter is optional.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm" ogv="https://example.com/wp-content/uploads/videos/myvid.ogv"]
</code></pre>
<p><strong>Width</strong></p>
<p>Defines the width of the video file (Height is automatically calculated). This option is not required unless you want to limit the maximum width of the video.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" width="480"]
</code></pre>
<p><strong>Preload</strong></p>
<p>Specifies if and how the video should be loaded when the page loads. Defaults to “auto” (the video should be loaded entirely when the page loads). Other options:</p>
<ul>
<li>“metadata” – only metadata should be loaded when the page loads</li>
<li>
<p>“none” – the video should not be loaded when the page loads</p>
<p>[videojs_video url=”https://example.com/wp-content/uploads/videos/myvid.mp4″ preload=”metadata”]</p>
</li>
</ul>
<p><strong>Controls</strong></p>
<p>Specifies that video controls should be displayed. Defaults to “true”. In order to hide controls set this parameter to “false”.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" controls="false"]
</code></pre>
<p>When you disable controls users will not be able to interact with your videos. So It is recommended that you enable autoplay for a video with no controls.</p>
<p><strong>Autoplay</strong></p>
<p>Causes the video file to automatically play when the page loads.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" autoplay="true"]
</code></pre>
<p><strong>Poster</strong></p>
<p>Defines image to show as placeholder before the video plays.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" poster="https://example.com/wp-content/uploads/poster.jpg"]
</code></pre>
<p><strong>Loop</strong></p>
<p>Causes the video file to loop to beginning when finished and automatically continue playing.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" loop="true"]
</code></pre>
<p><strong>Muted</strong></p>
<p>Specifies that the audio output of the video should be muted.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" muted="true"]
</code></pre>
<p></p>
<h3>Video.js HTTP Streaming</h3>
<p>The plugin supports the m3u8 file format that can be used for Video.js HTTP Streaming. It allows you to play HLS, DASH, and other HTTP streaming protocols with Video.js, even where they are not natively supported.</p>
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.m3u8"]
</code></pre>
<p>For detailed documentation please visit the <a href="https://wphowto.net/videojs-html5-player-for-wordpress-757" rel="nofollow ugc">Videojs HTML5 Player</a> plugin page</p>


Videojs HTML5 Player

Embed video file beautifully in WordPress using Video.js HTML5 Player. Embed HTML5 compatible responsive video in your post/page with Video.js.

Able Player, accessible HTML5 media player vs Videojs HTML5 Player