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

anghelalexandra

cborodescu

jamesgpearce

<p><strong><a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack</a> is a mobile plugin that helps you transform your website’s content into a progressive mobile web application. It comes with multiple mobile app themes that you can purchase individually or as a bundle.</strong></p>
<p>WordPress Mobile Pack is <strong>supported on</strong> iOS and Android smartphones and tablets. <strong>Compatible browsers</strong>: Safari, Google Chrome, Android – Native Browser.</p>
<p>The pack has been tested on WordPress 3.6 and later. Please read the <a href="https://wordpress.org/plugins/wordpress-mobile-pack/other_notes/" rel="ugc">Known issues and limitations</a> list before installing.</p>
<p>What the WordPress Mobile Pack 3.0+ enables you to do:</p>
<ul>
<li>
<p><strong>Progressive Web Apps</strong>. Some of the key features of progressive web apps are:</p>
<ol>
<li>Apps load nearly instantly and are reliable, no matter what kind of network connection your user is on.</li>
<li>Web app install banners give users the ability to quickly and seamlessly add your mobile app to their home screen, making it easy to launch and return to your app.</li>
<li>Web push notifications makes it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed.</li>
<li>Smooth animations, scrolling, and navigations keep the experience silky smooth.</li>
<li>Secured via HTTPS.</li>
<li>Responsive UI.</li>
</ol>
</li>
<li>
<p><strong>Responsive UI</strong>. The mobile web application is sensitive to various screen sizes and orientation changes: landscape, portrait. In other words, the look and feel of the mobile web app seamlessly morphs into the screen size of users’ devices.</p>
</li>
<li>
<p><strong>App Themes</strong>. You can offer your users an exceptional reading experience by giving them a mobile web application with a native app-like look & feel. The default theme comes with 6 abstract covers that are randomly displayed on the loading screen to give the app a magazine flavour. More app themes available in <a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack PRO</a>.</p>
</li>
<li>
<p><strong>Customize appearance</strong>. Once a favorite theme has been selected, you can customize the colors & fonts, add your logo and graphic elements that can relate to your blog’s identity. More customization options available in <a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack PRO</a>.</p>
</li>
<li>
<p><strong>Posts Sync</strong>. The articles/posts inside the mobile web application are organized into their corresponding categories, thus readers can simply swipe through articles and jump from category to category in a seamless way.</p>
</li>
<li>
<p><strong>Pages Sync</strong>. Choose what pages you want to display on your mobile web application. You can edit, show/hide different pages and order them according to your needs.</p>
</li>
<li>
<p><strong>Comments Sync</strong>. All the comments that are displayed in the blog are also synchronized into the mobile web application. On top of that, comments that are posted from within the app are also displayed on the blog. Social media features are available in <a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack PRO</a>.</p>
</li>
<li>
<p><strong>Analytics</strong>. WordPress Mobile Pack easily integrates with Google Analytics.</p>
</li>
<li>
<p><strong>Add to Homescreen</strong>. Readers can add the mobile web application to their homescreen and run it in full-screen mode.</p>
</li>
</ul>
<p>WordPress Mobile Pack also comes with a  <strong>PRO version</strong> suitable for <strong>professional bloggers, publishing companies with multiple publications</strong> in their portfolio or web agencies. Some of the benefits of using <a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack PRO</a> are:</p>
<ul>
<li>
<p><strong>Customize your mobile web app’s appearance</strong> to resemble your brand identity.</p>
</li>
<li>
<p>Since mobile web apps don’t have any shared revenue constraints, you can <strong>take full control of your income</strong>. <a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack PRO</a> allows you to easily connect with your Google DFP & AdSense campaigns.</p>
</li>
<li>
<p>We take pride in offering fantastic <a href="https://wpmobilepack.com" rel="nofollow ugc">WordPress Mobile Pack PRO</a> <strong>maintenance and hands-on support</strong>. Our team of friendly mobile web experts makes sure technology doesn’t stand in your way.</p>
</li>
<li>
<p><strong>Access to multiple app themes</strong> that can be purchased individually or as a bundle: BASE, MOSAIC, OBLIQ, ELEVATE, FOLIO, INVISION, POPSICLE, PULSE, GHOST, PHANTOM, LUCID, EXTRUDE, VEDI, BLEND, PURE, GOTHAM, FUTURE & PALM.</p>
</li>
<li>
<p>Your mobile users will be able to benefit from a rich mobile reading experience on their favorite mobile device without needing to go through an App Store and install anything.</p>
</li>
</ul>
<p>Here are some walkthrough videos that can get you started with WordPress Mobile Pack PRO:</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/JSjhK8YI98M?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"></iframe></span>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/elxjfdbAoqM?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"></iframe></span>
<p>For previous versions, check out the ‘Change log’ page.</p>
<p>We enjoy writing and maintaining this plugin. If you like it too, please rate us. But if you don’t, let us know how we can improve it.</p>
<p>Have fun on your mobile adventures.</p>
<h3>Setting up cache plugins for working with WordPress Mobile Pack</h3>
<p>If your site uses a cache plugin, please note that a series of issues can occur if that plugin wasn’t configured to work with WordPress Mobile Pack. Some examples are:</p>
<ul>
<li>Loading the mobile web application on desktop browsers</li>
<li>Loading the desktop theme on a supported mobile device (even though the WordPress Mobile Pack plugin is active)</li>
<li>Inconsistent switching between the desktop and the WordPress Mobile Pack theme</li>
</ul>
<p>If you find yourself in one of these situations, please read <a href="http://support.appticles.com/optimizing-cache-plugins-wordpress-mobile-pack/" rel="nofollow ugc">the docs</a> and make the appropriate settings on your cache plugin.</p>
<h3>Roadmap</h3>
<p>Our roadmap currently includes:</p>
<ul>
<li>Fully customizable menus with categories, posts, pages and links</li>
<li>Integrating with the most popular multi-language plugins</li>
<li>Localization. Please contact us if you can help by translating the mobile web application’s text into your language.</li>
<li>Support for password protected posts.</li>
<li>Integrating with the most popular forms plugins</li>
<li>Integrating with Disqus</li>
</ul>
<h3>Known issues and limitations for v2.0+</h3>
<ul>
<li>V2.0+ of the mobile web app doesn’t include support for forms. We are looking for a way to recreate forms inside the mobile web application and integrate with various plugins.</li>
<li>Iframes and embed codes are partially supported. Embed codes are allowed for YouTube, Vimeo, Daily Motion, Soundcloud, Instagram, Wistia, Flickrit and Spreaker. If you need support for other media content embed codes, please contact us.</li>
<li>The mobile web app doesn’t include user authentication. If your blog settings enable comments only for logged in users, they will be disabled in the mobile web app.</li>
<li>For now, supported mobile browsers include Safari, Google Chrome, Android’s native browser, Internet Explorer 10 and Firefox (as of 2.0.2).</li>
<li>Only featured images from your blog posts are displayed as thumbnails in the list of posts. Images integrated in a post’s content are displayed only on the details page for that post.</li>
</ul>
<h3>Repositories</h3>
<p>We currently have two Github development repositories:</p>
<ul>
<li><a href="https://github.com/appticles/wordpress-mobile-pack" rel="nofollow ugc">https://github.com/appticles/wordpress-mobile-pack</a> – The plugin files, same as you will find for download on WordPress.org, plus unit tests.</li>
<li><a href="https://github.com/appticles/pwa-theme-obliq" rel="nofollow ugc">https://github.com/appticles/pwa-theme-obliq</a> – Development files for the new version of theme Obliq (Javascript & CSS).</li>
</ul>
<h3>Contributors</h3>
<p>A big thanks to all contributors that helped us translate the mobile web application:</p>
<ul>
<li>Na LI (Chinese / zh_CN)</li>
<li>John Haverkate (Dutch)</li>
<li>Bernhard Steinbichler (German)</li>
<li>Péter Ágoston (Hungarian)</li>
<li>Fabiola Sguassero (Italian)</li>
<li>Emmanuel Andriulo (Italian)</li>
<li>Miru Yamashiro (Japanese)</li>
<li>Sandra Gorgan (Romanian)</li>
<li>Agnieszka Bugajska (Polish)</li>
<li>Mathias Wideroth (Swedish)</li>
<li>Diogo Desiderati (Portuguese)</li>
</ul>


WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps

Mobile plugin to package your content into a progressive web app, build a hybrid mobile app and submit it to App Stores. Multiple mobile app themes.

Able Player, accessible HTML5 media player vs WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps