Categories
PHP WordPress WordPress Plugins

Better Video Plugin – for WordPress

Elevate Your WordPress Video Experience!

The Better Video & Playlist Plugin is designed to enhance the video capabilities of your WordPress website while adding a sophisticated video playlist feature. This plugin ensures that your site’s visitors enjoy a seamless and engaging video-watching experience.

Key Features:

  • Resume Video Playback: Never lose progress – our plugin remembers where you left off.
  • Video Progress Storage: Store video progress in the WordPress database and local browser storage.
  • Customized Start Time: Start your videos at specific times using the ?t=SECONDS parameter (e.g., ?t=120 starts at 2 minutes).
  • Video Playlists: Create and manage video playlists effortlessly using block editor.
  • Autoplay Next Video: Keep viewers engaged with automatic playback of the next video.
  • Emoji Customization: Add a personal touch with custom video emojis.
  • Background Color: Tailor the video player’s background color to match your site’s aesthetics.

Why Choose Better Video & Playlist?

  • User-Friendly: Seamlessly integrate advanced video features into your WordPress site.
  • Progress Tracking: Never make viewers start from scratch; they can pick up right where they left off.
  • Playlist Management: Create and organize video playlists with ease.
  • Community Support: Join a community of users benefiting from this plugin’s capabilities.

A bit of development background:

Almost a year ago I created some JS to improve the video capabilities for WordPress. See here and here.

I’ve decided to create a WordPress plugin. You can find the plugin at GitHub repo and as WordPress plugin.

I needed my shared videos in WordPress to have the ability to ?remember? the position where the client has paused the video, or if he has closed the browser accidentally, so when he comes back he can resume form the position where he was at in that moment.

I thought this will be something native to the HTML5 video player, but it?s not? we have many excellent features, but this one which is really simple it?s missing.

I also needed a simple playlist of videos, so when one video ended next one will be played automatically, that stored the progress…

That’s why I have created this simple yet powerful WordPress plugin… to make my life lot easier!

100% free to use and open source.

Features

  • Resume video from last position. Saves progress in DB and browser storage.
  • On pause or window close, stores progress
  • Start playing video at custom time using ?t=SECONDS ex ?t=120 will start at 2 minutes

Playlist Features

  • Create playlist video from a HTML5 list or JS array
  • Resume on last played video
  • Autoplay next video on video end
  • Mark video as played
  • Start playing from video via url parameter using ?start_video=ID_VIDEO
  • Stored in user browser storage, not in DB

How to use

To enable the video features just add a video from the post editor or add HTML video tag. You can have as many video tags as you want.

Video Play list

You can create a list on your editor and then in the side panel in advanced, anchor set it to bvideo_playlist. Currently only supports 1 playlist per page.

Also you can edit the HTML and create List with id = bvideo_playlist:

<ol id="bvideo_playlist">
    <li><a href="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/earth_night_rotate_1080.mov">Animation: Rotating Earth at Night</a></li>
    <li><a href="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/rbsp_launch_1080p.mp4">Radiation Belt Storm Probes Launch</a></li>
    <li><a href="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/curiosity_lands.mov">Dropping in on Mars in High-Res</a></li>
    <li><a href="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/GRAIL_launch_1080.mov">GRAIL Launches on Mission to Moon</a></li>
    <li><a href="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/HLV_Launch_anim.mov">Space Launch System Animation</a></li>
</ol>

You can also add in your HTML/JS file a playlist array and will create your list magically, the size field it?s optional:

<script>
var video_playlist = [
    {
        "name": "Animation: Rotating Earth at Night",
        "link": "http://s3.amazonaws.com/akamai.netstorage/HD_downloads/earth_night_rotate_1080.mov",
        "size": 55000000,
    },
    {
        "name": "Radiation Belt Storm Probes Launch",
        "link": "http://s3.amazonaws.com/akamai.netstorage/HD_downloads/rbsp_launch_1080p.mp4",
        "size": 475000000,
    },
    {
        "name": "Dropping in on Mars in High-Res",
        "link": "http://s3.amazonaws.com/akamai.netstorage/HD_downloads/curiosity_lands.mov",
        "size": 105000000,
    },
    {
        "name": "GRAIL Launches on Mission to Moon",
        "link": "http://s3.amazonaws.com/akamai.netstorage/HD_downloads/GRAIL_launch_1080.mov",
        "size": 1113000000,
    },
    {
        "name": "Space Launch System Animation",
        "link": "http://s3.amazonaws.com/akamai.netstorage/HD_downloads/HLV_Launch_anim.mov",
        "size": 642570000,
    },

];
</script>

To add the JS to your post / page you can use a plugin like https://es.wordpress.org/plugins/header-and-footer-scripts/