Noor Alam

<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.
<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>
<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>
In order to embed a video create a new post/page and use the following shortcode:
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4"]
</code></pre>
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.
<h4>Video Shortcode Options</h4>
The following options are supported in the shortcode.
WebM
You can specify a WebM video file in addition to the source MP4 video file. This parameter is optional.
<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>
Ogv
You can specify a Ogv video file in addition to the source MP4 & WebM video files. This parameter is optional.
<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>
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_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" 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_video url=”https://example.com/wp-content/uploads/videos/myvid.mp4″ preload=”metadata”]
</li>
</ul>
Controls
Specifies that video controls should be displayed. Defaults to “true”. In order to hide controls set this parameter to “false”.
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" 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_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" autoplay="true"]
</code></pre>
Poster
Defines image to show as placeholder before the video plays.
<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>
Loop
Causes the video file to loop to beginning when finished and automatically continue playing.
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" loop="true"]
</code></pre>
Muted
Specifies that the audio output of the video should be muted.
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" muted="true"]
</code></pre>

<h3>Video.js HTTP Streaming</h3>
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.
<pre><code>[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.m3u8"]
</code></pre>
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

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.

Jose Conti

VideoZen is an integrated plugin using VideoJS player, Zencoder.com and Amazon S3 services.
By VideoZen, put Self hosted video on your WordPress or WordPress multisite, be as simple as activating the plugin, get an account at Amazon S3 and Zencoder, upload a video in Media and put a simple WordPress shortcode in a page or post.
When the page or post is viewed, the plugin will build everything you need with all the videos formats needed to be reproduced in any browser, tablet or mobile from Amazon S3. And with Flash fallback.
The Plugin also supports subtitles type VTT, which are the standard HTML5 . Just have to upload it to WordPress media with the name that indicate you the plugin and will be automatically inserted into the video.
The existing Shortcode are:
Simple shortcode will display the original size of the video
<pre><code>[VIDEOZEN: id_media]
</code></pre>
Shortcode for the width, the height will be calculated automatically:
<pre><code>[VIDEOZEN: id_media W:234]
</code></pre>
Shortcode full specified width and height:
<pre><code>[VIDEOZEN: id_media W:234 H:120]
</code></pre>
The plugin is compatible with WordPress and WordPress Multisite.
On WordPress Multisite, can be activated in different ways.
<ul>
<li>For the Network: VideoZen be activated for the entire network and can be configured from the Network menu. All sites have access to the plugin and can upload videos.</li>
<li>Site by site: Site by site and add different configurations on each site.</li>
<li>Site by site with global settings: Selectable site by site and use DEFINES sets in the file wp-config.php</li>
</ul>
The define to add in the wp-config.php file to configure as globally are the following:
<pre><code>define("CONST_VIDEOZEN_USE_DEFINES" , TRUE);
define("CONST_VIDEOZEN_API_KEY" , "123ag"); //ZenCoder API key
define("CONST_VIDEOZEN_BUCKET" , "bucketname"); //do not include the s3:// prefix
define("CONST_VIDEOZEN_S3WEB" , "s3.amazonaws.com/bucket"); //URL to access via web the Amazon S3 bucket, do not include the http:// prefix
define("CONST_VIDEOZEN_AUTH" , "31415926abc123ABC"); //Secret passphrase between your site and zencoder, use a random letters and number string larger than 16 characters
define("CONST_VIDEOZEN_LANG" , "en|English\nes|Spanish"); // Available languages, each language should be formatted as "code|language name", MUST USE DOUBLE QUOTES, separate multiple languages using \n (carriage return), eg: "en|English\nes|Spanish"
</code></pre>
The global configuration is very interesting for WordPress Multisite sites that want to offer free or paid video service for network sites.

VideoZen

VideoZen is fully compatible with Standard WordPress (non-multisite) and WordPress Multisite. The integrated plugin for play and encode videos.

Videojs HTML5 Player vs VideoZen