wordpress 播放视频循环/ Shuffle 与php通过简码

qcbq4gxm  于 9个月前  发布在  WordPress
关注(0)|答案(2)|浏览(148)

下面的代码播放视频页使用简码:[single_video]
如何让它播放 Shuffle 所有的视频在该文件夹在一个循环中使用短代码,可以通过文件夹名称一样:[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');

字符串
感谢任何帮助,
谢谢帮忙

ssgvzors

ssgvzors1#

客户端(Web浏览器)需要知道可用文件的列表。您可以:
1.在第一个响应中嵌入文件名
1.在某处公开一个索引供客户端下载
然后,这是一个客户端任务。我会这样做:
1.监听ended事件(文档)
1.将<video>元素上的src属性替换为下一个URL
1.在元素上调用.play()

rjee0c15

rjee0c152#

要使用短代码实现以随机播放模式播放文件夹中所有视频的功能,您可以使用PHP的glob函数获取指定文件夹中所有视频文件的列表。此外,您可以使用JavaScript处理随机播放和循环功能。
下面是一个如何修改代码的示例:

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');

字符串
此代码定义了一个新的短代码**[shuffle_play_gallery]**,它带有一个folder属性。它检索指定文件夹中的所有视频文件,对它们进行 Shuffle ,并为每个文件生成视频元素。JavaScript部分通过基于事件隐藏和播放视频来处理 Shuffle 和循环功能。请将“wp-content/uploads/”替换为您的视频文件夹的实际路径。

相关问题