johndyer

<p>Video and audio plugin for WordPress built on the MediaElement.js HTML5 media player library. Provides Flash or Silverlight fallback players for non-HTML5 browsers. Supports iPhone, iPad, and Andriod.<br />
Supports MP4, OGG, WebM, WMV, MP3, WAV, WMA files as well as captions with WebSRT files.</p>
<p>Check out <a href="http://mediaelementjs.com/" rel="nofollow ugc">mediaElementjs.com</a> for more information and examples.</p>
<h3>Typical Usage for video</h3>
<pre><code>[video src="http://mysite.com/mymedia.mp4" width="640" height="360"]
</code></pre>
<h3>Typical Usage for audio</h3>
<pre><code>[audio src="http://mysite.com/mymedia.mp3"]
</code></pre>
<h3>Shortcode Options</h3>
<h4>Alternatives</h4>
<p>If you have a plugin that conflicts with MediaElement.js, you can also use the short codes</p>
<pre><code>[mejsvideo src="http://mysite.com/mymedia.mp4" width="640" height="360"]
[mejsaudio src="http://mysite.com/mymedia.mp3"]
</code></pre>
<h4>src</h4>
<p>This location of any audio or video file</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4"]
</code></pre>
<p>You can also leave off the extention and MediaElement.js will look for all media files matching the filename (mymedia.mp4, mymedia.webm, etc.)</p>
<pre><code>[video src="http://mysite.com/mymedia"]
</code></pre>
<h4>type</h4>
<p>The media type of the resource</p>
<pre><code>[video src="http://mysite.com/mymedia?xyz" type="video/mp4"]
</code></pre>
<h4>mp4</h4>
<p>The location of the h.264/MP4 source for the video.</p>
<pre><code>[video mp4="http://mysite.com/mymedia.mp4"]
</code></pre>
<h4>mp3</h4>
<p>The location of an MP3 file for video</p>
<pre><code>[audio mp3="http://mysite.com/mymedia.mp3"]
</code></pre>
<h4>ogg</h4>
<p>The location of the Theora/Ogg source for the video.</p>
<pre><code>[video ogg="http://mysite.com/mymedia.ogg"]
</code></pre>
<h4>webm</h4>
<p>The location of the VP8/WebM source for the video.</p>
<pre><code>[video webm="http://mysite.com/mymedia.webm"]
</code></pre>
<h4>poster</h4>
<p>The location of the poster frame for the video.</p>
<pre><code>[video poster="http://mysite.com/mymedia.png"]
</code></pre>
<h4>width</h4>
<p>The width of the video</p>
<pre><code>[video width="640"]
</code></pre>
<h4>height</h4>
<p>The height of the video</p>
<pre><code>[video height="264"]
</code></pre>
<h4>loop</h4>
<p>Loops the video or audio when it ends</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" loop="true"]
</code></pre>
<h4>preload</h4>
<p>Start loading the video as soon as possible, before the user clicks play.</p>
<pre><code>[video preload="true"]
</code></pre>
<h4>autoplay</h4>
<p>Start playing the video as soon as it’s ready.</p>
<pre><code>[video autoplay="true"]
</code></pre>
<h4>fullscreen</h4>
<p>Disables the fullscreen button</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" fullscreen="false"]
</code></pre>
<h4>duration</h4>
<p>Disables the duration output</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" duration="false"]
</code></pre>
<h4>volume</h4>
<p>Disables the volume slider</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" volume="false"]
</code></pre>
<h4>progress</h4>
<p>Disables the progress bar</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" progress="false"]
</code></pre>
<h4>captions</h4>
<p>URL to a WebSRT captions file</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" captions="http://mysite.com/mymedia.srt"]
</code></pre>
<h4>Simple Video</h4>
<p>Basic playback options</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" width="640" height="360"]
</code></pre>
<h4>All Attributes Video</h4>
<p>All options enabled</p>
<pre><code>[video mp4="http://mysite.com/mymedia.mp4" ogg="http://mysite.com/mymedia.ogg" webm="http://mysite.com/mymedia.webm" poster="http://mysite.com/mymedia.png" preload="true" autoplay="true" width="640" height="264"]
</code></pre>
<h4>Simple Audio</h4>
<p>Basic playback options</p>
<pre><code>[audio src="http://mysite.com/mymedia.mp3"]
</code></pre>
<h4>All Attributes Audio</h4>
<p>All options enabled</p>
<pre><code>[audio mp3="http://mysite.com/mymedia.mp3" ogg="http://mysite.com/mymedia.ogg" preload="true" autoplay="true"]
</code></pre>
<h3>Use in a template</h3>
<p>You can use WordPress shortcodes in your templates using the do_shortcode function.</p>
<pre><code><?php echo do_shortcode('[video src="myvfile.mp4"]'); ?>
</code></pre>


MediaElement.js – HTML5 Video & Audio Player

MediaElement.js is an HTML5 video and audio player with Flash fallback and captions. Supports IE,…

Bruce

<p><a href="https://www.socialite-media.com/videojs-hls-player-for-wordpress" rel="nofollow ugc">Video.js HLS Player</a> is a user-friendly plugin that allows you to easily embed responsive/fluid (or fixed width) HLS videos into WordPress posts and pages using this customized video.js player. Embedding externally hosted .m3u8 HLS video files couldn’t be easier.</p>
<h4>Video.js HLS Player Features</h4>
<ul>
<li>Embed HLS video package 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 all major 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</li>
<li>Embed fallback videos uploaded to your WordPress media library using direct links in the shortcode</li>
<li>No setup required, simply install and start embedding videos</li>
<li>Lightweight and compatible with the latest version of WordPress</li>
<li>Clean and sleek player with no watermark</li>
<li>Fallback for other HTML5-supported filetypes (MP4, WebM, Ogv)</li>
</ul>
<h4>Video.js HLS Player Plugin Usage</h4>
<p>In order to embed a video create a new post/page and use the following shortcode:</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8"]
</code></pre>
<p>Here, “url” is the location of the HLS video package file.</p>
<h4>Video Shortcode Options</h4>
<p>The following options are supported in the shortcode.</p>
<p><strong>MP4</strong></p>
<p>You can specify an MP4 video file in addition to the source HLS video file. This parameter is optional.</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" mp4="http://example.com/wp-content/uploads/videos/myvid.mp4"]
</code></pre>
<p><strong>WebM</strong></p>
<p>You can specify a WebM video file in addition to the source HLS video file. This parameter is optional.</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" webm="http://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 HLS video file. This parameter is optional.</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" ogv="http://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_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" 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_hls url=”https://player.vimeo.com/external/xxxxxxxxx.m3u8″ preload=”metadata”]</p>
</li>
</ul>
<p><strong>Controls</strong></p>
<p>Specifies if video controls should be displayed. Defaults to “true”. In order to hide controls set this parameter to “false”.</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" 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_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" autoplay="true"]
</code></pre>
<p><strong>Poster</strong></p>
<p>Defines image to show as placeholder before the video plays.</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" poster="http://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_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" 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_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" muted="true"]
</code></pre>
<p><strong>iOS Inline</strong></p>
<p>Force the video to play inline on iOS 10+</p>
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" inline="true"]
</code></pre>
<p>For detailed documentation please visit the <a href="https://www.socialite-media.com/videojs-hls-player-for-wordpress" rel="nofollow ugc">Video.js HLS Player</a> plugin page</p>


Video.js HLS Player

Perfect

Easily embed responsive/fluid (or fixed width) HLS videos into WordPress posts and pages using this customized video.js player.

MediaElement.js – HTML5 Video & Audio Player vs Video.js HLS Player