Question 295543 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – playing videos in loop/shuffle with php through shortcode

below code play video in page using shortcode : [single_video]

how to make it play shuffle all the videos at that folder in a loop using short code that can pass folder name like : [shuffle_play_gallery folder="naturevideos"]

function display_single_video() {
    $video_url = 'https://website.com/videos/test.mp4';

    // Generate the video element
    $video_element = '<video width="320" height="240" controls>
        <source src="' . $video_url . '" type="video/mp4">
        Your browser does not support the video tag.
        </video>';

    return $video_element;
}

// Register the shortcode to display the single video
add_shortcode('single_video', 'display_single_video');

any help appreciated and

thanks for help

Tags:

2

Answers


  1. 0

    The client (web browser) will need to know a list of available files. You can either:

    1. Embed filenames with the first response
    2. Expose an index somewhere for the client to download

    Afterwards, it’s a client-side task. I would do it like this:

    1. Listen for the ended event (documentation)
    2. Swap out the src attribute on your <video> element with the next URL
    3. Call .play() on the element
    Login or Signup to reply.
  2. 0

    To achieve the functionality of playing all videos in a folder in shuffle mode using a shortcode, you can make use of PHP’s glob function to get a list of all video files in the specified folder. Additionally, you can use JavaScript to handle the shuffle and loop functionality.

    Here’s an example of how you can modify your code:

    function display_shuffled_videos($atts) {
    // Get folder name from the shortcode attribute
    $folder_name = isset($atts['folder']) ? $atts['folder'] : '';

    // Get all video files in the specified folder
    $video_files = glob(ABSPATH . 'wp-content/uploads/' . $folder_name . '/*.mp4');

    // Shuffle the array of video files
    shuffle($video_files);

    // Generate the video elements
    $videos = '';
    foreach ($video_files as $video_file) {
        $video_url = site_url(str_replace(ABSPATH, '', $video_file));

        $videos .= '<video width="320" height="240" controls>
                        <source src="' . $video_url . '" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>';
    }

    // JavaScript for shuffling and looping videos
    $script = '<script>
                    document.addEventListener("DOMContentLoaded", function() {
                        var videos = document.querySelectorAll("video");
                        var currentIndex = 0;

                        function playNextVideo() {
                            videos[currentIndex].style.display = "none";
                            currentIndex = (currentIndex + 1) % videos.length;
                            videos[currentIndex].style.display = "block";
                            videos[currentIndex].play();
                        }

                        // Hide all videos except the first one
                        for (var i = 1; i < videos.length; i++) {
                            videos[i].style.display = "none";
                        }

                        // Play the first video
                        videos[currentIndex].play();

                        // Event listener for video ended
                        videos[currentIndex].addEventListener("ended", playNextVideo);
                    });
                </script>';

    return $videos . $script;
}

// Register the shortcode to display shuffled videos
add_shortcode('shuffle_play_gallery', 'display_shuffled_videos');

    This code defines a new shortcode [shuffle_play_gallery] that takes a folder attribute. It retrieves all video files in the specified folder, shuffles them, and generates video elements for each file. The JavaScript part handles the shuffle and loop functionality by hiding and playing videos based on events. Please replace ‘wp-content/uploads/’ with the actual path to your video folder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search