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

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.

Jorge Maldonado Ventura

This plugin lets you easily use the official <a href="https://github.com/asciinema/asciinema-player" rel="nofollow ugc">asciinema-player</a>.
<h4>Usage</h4>
An asciicast is a recording made with asciinema. Upload your asciicast 
anywhere in your web server; you can do that within 
Wordpress (just go to the “Media>Add New” menu and upload your asciicast).
Enter the HTML editor to write a post or a page. Then add the 
following HTML tag: <code><asciinema-player src="/demo.json"></asciinema-player></code>. 
Remember to replace the value of the <code>src</code> attribute with the location of 
your asciicast.
You can use every option of asciinema-player. Check out 
<a href="https://github.com/asciinema/asciinema-player/blob/master/README.md#asciinema-player" rel="nofollow ugc">its readme</a> 
to find out every option.

Video.js HLS Player vs asciiplayer