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

Jorge Maldonado Ventura

asciiplayer

Bruce

<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.
<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>
In order to embed a video create a new post/page and use the following shortcode:
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8"]
</code></pre>
Here, “url” is the location of the HLS video package file.
<h4>Video Shortcode Options</h4>
The following options are supported in the shortcode.
MP4
You can specify an MP4 video file in addition to the source HLS video file. This parameter is optional.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" mp4="http://example.com/wp-content/uploads/videos/myvid.mp4"]
</code></pre>
WebM
You can specify a WebM video file in addition to the source HLS video file. This parameter is optional.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" webm="http://example.com/wp-content/uploads/videos/myvid.webm"]
</code></pre>
Ogv
You can specify a Ogv video file in addition to the source HLS video file. This parameter is optional.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" ogv="http://example.com/wp-content/uploads/videos/myvid.ogv"]
</code></pre>
Width
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.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" width="480"]
</code></pre>
Preload
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:
<ul>
<li>“metadata” – only metadata should be loaded when the page loads</li>
<li>
“none” – the video should not be loaded when the page loads
[videojs_hls url=”https://player.vimeo.com/external/xxxxxxxxx.m3u8″ preload=”metadata”]
</li>
</ul>
Controls
Specifies if video controls should be displayed. Defaults to “true”. In order to hide controls set this parameter to “false”.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" controls="false"]
</code></pre>
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.
Autoplay
Causes the video file to automatically play when the page loads.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" autoplay="true"]
</code></pre>
Poster
Defines image to show as placeholder before the video plays.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]
</code></pre>
Loop
Causes the video file to loop to beginning when finished and automatically continue playing.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" loop="true"]
</code></pre>
Muted
Specifies that the audio output of the video should be muted.
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" muted="true"]
</code></pre>
iOS Inline
Force the video to play inline on iOS 10+
<pre><code>[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" inline="true"]
</code></pre>
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

Alternatives to Video.js HLS Player

Top alternatives