Video Loop

/ Web Development / By

I created a test page in this theme where I had a header with a video background set to loop using the video tag "loop" attribute. I found to my frustration that this does not work correctly in Chrome and Edge with the video stopping instead of looping. Note that it does work in Safari Technology Preview.

I realized that I had solved this problem in the past, in that case looping a series of videos with a small script. I created a simple jQuery plugin to handle this. Below is the code:

tn-video-list-loop.js:

/**
 * Teeehn Video List Loop plugin
 * @author: Thomas Nicolosi
 * @version: 1.0.0
 * @license: GPL 3.0
 */
(function ($) {
    /**
     * If a video element is selected this will play the videos in sequence.
     * 
     * @param {array} list - list of video files.
     */
    $.fn.videoListLoop = function(list) {
        var playList = list || [];
        return this.each(function(){
            if ($(this).prop('tagName') != 'VIDEO') {
                return;
            }
            // Set the first video src.
            $(this).attr('src', playList[0]);
            // Find the length of the playlist.
            var length = playList.length;
            // Set the index to point to the second video.
            var index = 1;
            // When the video ends load the next one.
            $(this).on('ended', function() {
                $(this).attr('src', playList[index]);
                // Point the index to the next video in the play list.
                index += 1;
                // Reset the index to zero at the end in order to loop.
                index = index === length ? 0 : index;
            });
        });
    };
})(jQuery);

I realized that this never made it to github and in retrospect I want to make this a more generic plugin and also incorporate as a WordPress plugin.

I used it on a site where I used it to load 3 videos in sequence and then start back at the beginning to provide a continuous loop.

I can do better than hard coding the videos in functions.php, but I didn't at the time for whatever reason.

functions.php:

<?php
/**
 * Gather data to be exposed JavaScript
 */
function hls_get_js_data() {
    $rootUri = get_stylesheet_directory_uri();
    return array(
        $rootUri . '/assets/HLS-clip-walkingIn.mp4',
        $rootUri . '/assets/HLS-clip-sold.mp4',
        $rootUri . '/assets/HLS-clip-movingBoxes.mp4'
    );
}
/**
 * Enqueue javascript libraries
 */
 function hls_custom_scripts() {
    wp_enqueue_script(
        'tn-video-list-loop',
        get_stylesheet_directory_uri() . '/js/lib/tn-video-list-loop.js',
        array('jquery')
    );
    wp_enqueue_script(
        'hls-data', 
        get_stylesheet_directory_uri() . '/js/hls-data.js' 
    );
    wp_localize_script(
        'hls-data',
        'hlsVideos',
        hls_get_js_data()
    );
 }
 add_action('wp_enqueue_scripts', 'hls_custom_scripts');

I added a script to use as a hook for the localized script. Is this still necessary?

hls-data.js:

// HLS data
// Script hook for wphls-data.js_localize_script

The last piece is to fire the plugin code after the DOM loads.

(function($) {
    $(function() {
        // Load the videos
        $('.home #hls-home-video video').videoListLoop(hlsVideos);
    });
})(jQuery);

I still need to investigate why the loop attribute does not work across all modern browsers. It seems like it should work...

Can I use screen cap for the video loop attribute. It shows it should work in all common, modern browsers.
<video loop> should work.

Soon I will write a quick plugin to do this on demand in WordPress.

Scroll to Top