MENU

php版 简洁好看的随机图片和视频 支持 ajax 刷新 自适应

January 8, 2025 • Read: 36 • More

原版：https://blog.syylw.com/159.html

在此基础上增加了：

  • 启动初始画面
  • 视频和图片双按钮切换
  • 视频暂停与开始
  • 视频和图片加载失败默认图

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Media Display with Ajax</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 现有样式 */
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            text-align: center;
        }
        img, video {
            max-width: 100%;
            max-height: 80vh;
            position: relative; /* 使子元素可以绝对定位 */
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #buttonGroup {
            display: flex;
            gap: 10px;
        }
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none; /* 默认隐藏 */
        }
        #loadingOverlay i {
            font-size: 2em;
            color: white;
        }
        #splashScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #fff;
            z-index: 1001;
            transition: opacity 0.5s ease;
        }
        #splashScreen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        #mediaContainer {
            display: none; /* 默认隐藏 */
        }
        #buttonGroup {
            display: none; /* 默认隐藏 */
        }
        /* 新增图标和提示词样式 */
        #videoControlIcon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 25px; /* 设置图标大小为25px */
            color: white;
            border-radius: 50%;
            padding: 5px;
            display: none; /* 默认隐藏 */
            z-index: 1002;
        }
        #videoControlHint {
            position: absolute;
            top: calc(66% + 40px); /* 在图标下方 */
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: white;
            display: none; /* 默认隐藏 */
            z-index: 1002;
            border: 0.8px solid #d3d3d3; /* 添加灰白色边框 */
            padding: 2px 5px; /* 添加内边距 */
            border-radius: 5px; /* 添加圆角 */
          /*    background-color: rgba(0, 0, 0, 0.5);添加半透明黑色背景 
        }
    </style>
</head>
<body>
    <!-- 现有HTML -->
    <div id="splashScreen">
        <img id="randomImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Random Image will appear here">
        <!-- 修改按钮，添加Font Awesome图标 -->
        <button id="startButton">
           <i class="fa-solid fa-power-off"></i> <!-- 刷新图标 -->
            点击开始
        </button>
    </div>
    <div id="loadingOverlay">
        <i class="fa-solid fa-spinner fa-spin"></i> <!-- 加载图标 -->
    </div>
    <div id="mediaContainer">
        <img id="defaultImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Default Image">
    </div>
    <div id="buttonGroup">
        <button id="changeToImage">图片</button>
        <button id="changeToVideo">视频</button>
        <button id="changeMediaButton">
            <i class="fa-solid fa-rotate-right"></i>
            点击换一张
        </button>
    </div>
    <i id="videoControlIcon" class="fa-solid fa-play"></i> <!-- 视频控制图标 -->
    <div id="videoControlHint"></div> <!-- 提示词 -->

    <script>
        const MediaLoader = (function() {
            const defaultImageUrl = 'https://www.baidu.com/img/flexible/logo/pc/result.png';
            const mediaContainer = document.getElementById('mediaContainer');
            const loadingOverlay = document.getElementById('loadingOverlay');
            const splashScreen = document.getElementById('splashScreen');
            const buttonGroup = document.getElementById('buttonGroup');
            const videoControlIcon = document.getElementById('videoControlIcon');
            const videoControlHint = document.getElementById('videoControlHint');
            let currentVideoElement = null;
            let timeoutId;

            function loadMedia(url) {
                loadingOverlay.style.display = 'flex'; // 显示加载状态

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.type && data.url) {
                            createMediaElement(data);
                        } else {
                            handleError();
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching new media:', error);
                        handleError();
                    })
                    .finally(() => {
                        loadingOverlay.style.display = 'none'; // 隐藏加载状态
                    });
            }

            function createMediaElement(data) {
                mediaContainer.innerHTML = ''; // 清空容器
                if (data.type === 'image') {
                    const img = document.createElement('img');
                    img.src = data.url;
                    img.onerror = () => handleError(); // 图片加载失败处理
                    img.alt = 'Random Image';
                    mediaContainer.appendChild(img);
                } else if (data.type === 'video') {
                    const video = document.createElement('video');
                    video.autoplay = true;
                    video.loop = true;
                    video.playsInline = true;
                    video.controls = false; // 移除默认控件
                    video.src = data.url;
                    video.onerror = () => handleError(); // 视频加载失败处理
                    video.addEventListener('click', togglePlayPause); // 添加点击事件监听器
                    mediaContainer.appendChild(video);
                    currentVideoElement = video;
                }
                mediaContainer.style.display = 'block'; // 显示媒体容器
                buttonGroup.style.display = 'flex'; // 显示按钮组
            }

            function handleError() {
                mediaContainer.innerHTML = ''; // 清空容器
                const img = document.createElement('img');
                img.src = defaultImageUrl;
                img.alt = 'Default Image';
                mediaContainer.appendChild(img);
                mediaContainer.style.display = 'block'; // 显示媒体容器
                buttonGroup.style.display = 'flex'; // 显示按钮组
            }

            function hideSplashScreen() {
                splashScreen.classList.add('hidden');
            }

            function togglePlayPause() {
                if (currentVideoElement && !currentVideoElement.paused) {
                    currentVideoElement.pause();
                    videoControlIcon.classList.replace('fa-pause', 'fa-play');
                    videoControlHint.textContent = '▶️ 暂停';
                } else if (currentVideoElement) {
                    currentVideoElement.play();
                    videoControlIcon.classList.replace('fa-play', 'fa-pause');
                    videoControlHint.textContent = '⏸️ 开始';
                }
                showVideoControlIconAndHint(); // 显示视频控制图标和提示词
            }

            function showVideoControlIconAndHint() {
                // 清除之前可能存在的定时器
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }

                // 显示图标和提示词
                videoControlIcon.style.display = 'block';
                videoControlHint.style.display = 'block';

                // 设置新的定时器，在2秒后隐藏图标和提示词
                timeoutId = setTimeout(() => {
                    videoControlIcon.style.display = 'none';
                    videoControlHint.style.display = 'none';
                }, 2000); // 2秒后隐藏视频控制图标和提示词
            }

            return {
                loadMedia: loadMedia,
                handleError: handleError,
                hideSplashScreen: hideSplashScreen
            };
        })();

        // 为按钮添加点击事件监听器
        document.getElementById('changeMediaButton').addEventListener('click', () => MediaLoader.loadMedia('get_random_media.php'));
        document.getElementById('changeToImage').addEventListener('click', () => MediaLoader.loadMedia('get_random_image.php'));
        document.getElementById('changeToVideo').addEventListener('click', () => MediaLoader.loadMedia('get_random_video.php'));

        // 为启动页的按钮添加点击事件监听器
        document.getElementById('startButton').addEventListener('click', function() {
            MediaLoader.hideSplashScreen();
            MediaLoader.loadMedia('get_random_media.php'); // 开始加载混合内容
        });

        // 页面加载时默认只显示启动页
        window.onload = function() {
            // 不再在此处调用loadMedia，改为等待用户点击“点击开始”
        };
    </script>
</body>
</html>

get_random_media.php

<?php
header('Content-Type: application/json');

$mediaFile = 'images.txt';
$lines = file($mediaFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

if (empty($lines)) {
    echo json_encode(['error' => 'No media available']);
    exit;
}

$randomLine = $lines[array_rand($lines)];
list($type, $url) = explode('|', $randomLine, 2); // 假设用'|'分隔类型和URL

echo json_encode([
    'type' => trim($type),
    'url' => trim($url)
]);
?>

get_random_image.php

<?php
header('Content-Type: application/json');

$mediaFile = 'img.txt';
$lines = file($mediaFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

if (empty($lines)) {
    echo json_encode(['error' => 'No images available']);
    exit;
}

$url = $lines[array_rand($lines)];

echo json_encode([
    'type' => 'image',
    'url' => trim($url)
]);
?>

get_random_video.php

<?php
header('Content-Type: application/json');

$mediaFile = 'video.txt';
$lines = file($mediaFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

if (empty($lines)) {
    echo json_encode(['error' => 'No videos available']);
    exit;
}

$url = $lines[array_rand($lines)];

echo json_encode([
    'type' => 'video',
    'url' => trim($url)
]);
?>

images.txt

image|https://img0.baidu.com/it/u=4245391110,2737142142&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422
image|https://img0.baidu.com/it/u=4096475799,483816106&fm=253&app=138&f=JPEG?w=800&h=1422
video|https://pic.seotool.vip/v1/2024/03/13380777792039797.mp4

img.txt

https://img0.baidu.com/it/u=4245391110,2737142142&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422
https://img0.baidu.com/it/u=4096475799,483816106&fm=253&app=138&f=JPEG?w=800&h=1422

video.txt

https://pic.seotool.vip/v1/2024/03/13380777792039797.mp4
https://pic.seotool.vip/v1/2024/03/13380777792032129797.mp4

新增修复版【1】index.php

点击了图片或视频按钮后，再次点击“换一个”按钮时，仅在图片或视频文件中随机切换，而不是混合显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Media Display with Ajax</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 
    <style>
        /* 现有样式 */
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            text-align: center;
        }
        img, video {
            max-width: 100%;
            max-height: 80vh;
            position: relative; /* 使子元素可以绝对定位 */
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #buttonGroup {
            display: flex;
            gap: 10px;
        }
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none; /* 默认隐藏 */
        }
        #loadingOverlay i {
            font-size: 2em;
            color: white;
        }
        #splashScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #fff;
            z-index: 1001;
            transition: opacity 0.5s ease;
        }
        #splashScreen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        #mediaContainer {
            display: none; /* 默认隐藏 */
        }
        #buttonGroup {
            display: none; /* 默认隐藏 */
        }
        /* 新增图标和提示词样式 */
        #videoControlIcon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 25px; /* 设置图标大小为25px */
            color: white;
            border-radius: 50%;
            padding: 5px;
            display: none; /* 默认隐藏 */
            z-index: 1002;
        }
        #videoControlHint {
            position: absolute;
            top: calc(66% + 40px); /* 在图标下方 */
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: white;
            display: none; /* 默认隐藏 */
            z-index: 1002;
            border: 0.8px solid #d3d3d3; /* 添加灰白色边框 */
            padding: 2px 5px; /* 添加内边距 */
            border-radius: 5px; /* 添加圆角 */
        }
    </style>
</head>
<body>
    <!-- 现有HTML -->
    <div id="splashScreen">
        <img id="randomImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Random Image will appear here">
        <!-- 修改按钮，添加Font Awesome图标 -->
        <button id="startButton">
           <i class="fa-solid fa-power-off"></i> <!-- 刷新图标 -->
            点击开始
        </button>
    </div>
    <div id="loadingOverlay">
        <i class="fa-solid fa-spinner fa-spin"></i> <!-- 加载图标 -->
    </div>
    <div id="mediaContainer">
        <img id="defaultImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Default Image">
    </div>
    <div id="buttonGroup">
        <button id="changeToImage">图片</button>
        <button id="changeToVideo">视频</button>
        <button id="changeMediaButton">
            <i class="fa-solid fa-rotate-right"></i>
            换一个
        </button>
    </div>
    <i id="videoControlIcon" class="fa-solid fa-play"></i> <!-- 视频控制图标 -->
    <div id="videoControlHint"></div> <!-- 提示词 -->

    <script>
        const MediaLoader = (function() {
            const defaultImageUrl = 'https://www.baidu.com/img/flexible/logo/pc/result.png'; 
            const mediaContainer = document.getElementById('mediaContainer');
            const loadingOverlay = document.getElementById('loadingOverlay');
            const splashScreen = document.getElementById('splashScreen');
            const buttonGroup = document.getElementById('buttonGroup');
            const videoControlIcon = document.getElementById('videoControlIcon');
            const videoControlHint = document.getElementById('videoControlHint');
            let currentVideoElement = null;
            let timeoutId;
            let selectedMediaType = null; // 新的状态变量

            function loadMedia(url) {
                loadingOverlay.style.display = 'flex'; // 显示加载状态

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.type && data.url) {
                            createMediaElement(data);
                        } else {
                            handleError();
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching new media:', error);
                        handleError();
                    })
                    .finally(() => {
                        loadingOverlay.style.display = 'none'; // 隐藏加载状态
                    });
            }

            function createMediaElement(data) {
                mediaContainer.innerHTML = ''; // 清空容器
                if (data.type === 'image') {
                    const img = document.createElement('img');
                    img.src = data.url;
                    img.onerror = () => handleError(); // 图片加载失败处理
                    img.alt = 'Random Image';
                    mediaContainer.appendChild(img);
                } else if (data.type === 'video') {
                    const video = document.createElement('video');
                    video.autoplay = true;
                    video.loop = true;
                    video.playsInline = true;
                    video.controls = false; // 移除默认控件
                    video.src = data.url;
                    video.onerror = () => handleError(); // 视频加载失败处理
                    video.addEventListener('click', togglePlayPause); // 添加点击事件监听器
                    mediaContainer.appendChild(video);
                    currentVideoElement = video;
                }
                mediaContainer.style.display = 'block'; // 显示媒体容器
                buttonGroup.style.display = 'flex'; // 显示按钮组
            }

            function handleError() {
                mediaContainer.innerHTML = ''; // 清空容器
                const img = document.createElement('img');
                img.src = defaultImageUrl;
                img.alt = 'Default Image';
                mediaContainer.appendChild(img);
                mediaContainer.style.display = 'block'; // 显示媒体容器
                buttonGroup.style.display = 'flex'; // 显示按钮组
            }

            function hideSplashScreen() {
                splashScreen.classList.add('hidden');
            }

            function togglePlayPause() {
                if (currentVideoElement && !currentVideoElement.paused) {
                    currentVideoElement.pause();
                    videoControlIcon.classList.replace('fa-pause', 'fa-play');
                    videoControlHint.textContent = '▶️ 暂停';
                } else if (currentVideoElement) {
                    currentVideoElement.play();
                    videoControlIcon.classList.replace('fa-play', 'fa-pause');
                    videoControlHint.textContent = '⏸️ 开始';
                }
                showVideoControlIconAndHint(); // 显示视频控制图标和提示词
            }

            function showVideoControlIconAndHint() {
                // 清除之前可能存在的定时器
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }

                // 显示图标和提示词
                videoControlIcon.style.display = 'block';
                videoControlHint.style.display = 'block';

                // 设置新的定时器，在2秒后隐藏图标和提示词
                timeoutId = setTimeout(() => {
                    videoControlIcon.style.display = 'none';
                    videoControlHint.style.display = 'none';
                }, 2000); // 2秒后隐藏视频控制图标和提示词
            }

            return {
                loadMedia: loadMedia,
                handleError: handleError,
                hideSplashScreen: hideSplashScreen,
                setSelectedMediaType: function(type) {
                    selectedMediaType = type;
                },
                getSelectedMediaType: function() {
                    return selectedMediaType;
                }
            };
        })();

        // 为按钮添加点击事件监听器
        document.getElementById('changeMediaButton').addEventListener('click', function() {
            if (MediaLoader.getSelectedMediaType()) {
                MediaLoader.loadMedia(`get_random_${MediaLoader.getSelectedMediaType()}.php`);
            } else {
                MediaLoader.loadMedia('get_random_media.php');
            }
        });

        document.getElementById('changeToImage').addEventListener('click', function() {
            MediaLoader.setSelectedMediaType('image');
            MediaLoader.loadMedia('get_random_image.php');
        });

        document.getElementById('changeToVideo').addEventListener('click', function() {
            MediaLoader.setSelectedMediaType('video');
            MediaLoader.loadMedia('get_random_video.php');
        });

        // 为启动页的按钮添加点击事件监听器
        document.getElementById('startButton').addEventListener('click', function() {
            MediaLoader.hideSplashScreen();
            MediaLoader.loadMedia('get_random_media.php'); // 开始加载混合内容
        });

        // 页面加载时默认只显示启动页
        window.onload = function() {
            // 不再在此处调用loadMedia，改为等待用户点击“点击开始”
        };
    </script>
</body>
</html>

新增修复版【2】index.php

在点击“图片”或“视频”按钮后，在右侧显示一个“混合”图标。当用户点击这个图标时，将加载随机混合的媒体内容，并且之后点击“换一个”按钮会继续加载随机混合的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Media Display with Ajax</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 
    <style>
        /* 现有样式 */
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            text-align: center;
        }
        img, video {
            max-width: 100%;
            max-height: 80vh;
            position: relative; /* 使子元素可以绝对定位 */
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #buttonGroup {
            display: flex;
            gap: 10px;
        }
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none; /* 默认隐藏 */
        }
        #loadingOverlay i {
            font-size: 2em;
            color: white;
        }
        #splashScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #fff;
            z-index: 1001;
            transition: opacity 0.5s ease;
        }
        #splashScreen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        #mediaContainer {
            display: none; /* 默认隐藏 */
        }
        #buttonGroup {
            display: none; /* 默认隐藏 */
        }
        /* 新增图标和提示词样式 */
        #videoControlIcon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 25px; /* 设置图标大小为25px */
            color: white;
            border-radius: 50%;
            padding: 5px;
            display: none; /* 默认隐藏 */
            z-index: 1002;
        }
        #videoControlHint {
            position: absolute;
            top: calc(66% + 40px); /* 在图标下方 */
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: white;
            display: none; /* 默认隐藏 */
            z-index: 1002;
            border: 0.8px solid #d3d3d3; /* 添加灰白色边框 */
            padding: 2px 5px; /* 添加内边距 */
            border-radius: 5px; /* 添加圆角 */
        }
        #mixButton {
            display: none;
            margin-left: auto;
        }
    </style>
</head>
<body>
    <!-- 现有HTML -->
    <div id="splashScreen">
        <img id="randomImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Random Image will appear here">
        <!-- 修改按钮，添加Font Awesome图标 -->
        <button id="startButton">
           <i class="fa-solid fa-power-off"></i> <!-- 刷新图标 -->
            点击开始
        </button>
    </div>
    <div id="loadingOverlay">
        <i class="fa-solid fa-spinner fa-spin"></i> <!-- 加载图标 -->
    </div>
    <div id="mediaContainer">
        <img id="defaultImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Default Image">
    </div>
    <div id="buttonGroup">
        <button id="changeToImage">图片</button>
        <button id="changeToVideo">视频</button>
        <button id="mixButton">
            <i class="fa-solid fa-random"></i>
            混合
        </button>
        <button id="changeMediaButton">
            <i class="fa-solid fa-rotate-right"></i>
            换一个
        </button>
    </div>
    <i id="videoControlIcon" class="fa-solid fa-play"></i> <!-- 视频控制图标 -->
    <div id="videoControlHint"></div> <!-- 提示词 -->

    <script>
        const MediaLoader = (function() {
            const defaultImageUrl = 'https://www.baidu.com/img/flexible/logo/pc/result.png'; 
            const mediaContainer = document.getElementById('mediaContainer');
            const loadingOverlay = document.getElementById('loadingOverlay');
            const splashScreen = document.getElementById('splashScreen');
            const buttonGroup = document.getElementById('buttonGroup');
            const mixButton = document.getElementById('mixButton');
            const videoControlIcon = document.getElementById('videoControlIcon');
            const videoControlHint = document.getElementById('videoControlHint');
            let currentVideoElement = null;
            let timeoutId;
            let selectedMediaType = null; // 新的状态变量

            function loadMedia(url) {
                loadingOverlay.style.display = 'flex'; // 显示加载状态

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.type && data.url) {
                            createMediaElement(data);
                        } else {
                            handleError();
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching new media:', error);
                        handleError();
                    })
                    .finally(() => {
                        loadingOverlay.style.display = 'none'; // 隐藏加载状态
                    });
            }

            function createMediaElement(data) {
                mediaContainer.innerHTML = ''; // 清空容器
                if (data.type === 'image') {
                    const img = document.createElement('img');
                    img.src = data.url;
                    img.onerror = () => handleError(); // 图片加载失败处理
                    img.alt = 'Random Image';
                    mediaContainer.appendChild(img);
                } else if (data.type === 'video') {
                    const video = document.createElement('video');
                    video.autoplay = true;
                    video.loop = true;
                    video.playsInline = true;
                    video.controls = false; // 移除默认控件
                    video.src = data.url;
                    video.onerror = () => handleError(); // 视频加载失败处理
                    video.addEventListener('click', togglePlayPause); // 添加点击事件监听器
                    mediaContainer.appendChild(video);
                    currentVideoElement = video;
                }
                mediaContainer.style.display = 'block'; // 显示媒体容器
                buttonGroup.style.display = 'flex'; // 显示按钮组
            }

            function handleError() {
                mediaContainer.innerHTML = ''; // 清空容器
                const img = document.createElement('img');
                img.src = defaultImageUrl;
                img.alt = 'Default Image';
                mediaContainer.appendChild(img);
                mediaContainer.style.display = 'block'; // 显示媒体容器
                buttonGroup.style.display = 'flex'; // 显示按钮组
            }

            function hideSplashScreen() {
                splashScreen.classList.add('hidden');
            }

            function togglePlayPause() {
                if (currentVideoElement && !currentVideoElement.paused) {
                    currentVideoElement.pause();
                    videoControlIcon.classList.replace('fa-pause', 'fa-play');
                    videoControlHint.textContent = '▶️ 暂停';
                } else if (currentVideoElement) {
                    currentVideoElement.play();
                    videoControlIcon.classList.replace('fa-play', 'fa-pause');
                    videoControlHint.textContent = '⏸️ 开始';
                }
                showVideoControlIconAndHint(); // 显示视频控制图标和提示词
            }

            function showVideoControlIconAndHint() {
                // 清除之前可能存在的定时器
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }

                // 显示图标和提示词
                videoControlIcon.style.display = 'block';
                videoControlHint.style.display = 'block';

                // 设置新的定时器，在2秒后隐藏图标和提示词
                timeoutId = setTimeout(() => {
                    videoControlIcon.style.display = 'none';
                    videoControlHint.style.display = 'none';
                }, 2000); // 2秒后隐藏视频控制图标和提示词
            }

            return {
                loadMedia: loadMedia,
                handleError: handleError,
                hideSplashScreen: hideSplashScreen,
                setSelectedMediaType: function(type) {
                    selectedMediaType = type;
                    if (type) {
                        mixButton.style.display = 'inline-block'; // 显示混合按钮
                    } else {
                        mixButton.style.display = 'none'; // 隐藏混合按钮
                    }
                },
                getSelectedMediaType: function() {
                    return selectedMediaType;
                }
            };
        })();

        // 为按钮添加点击事件监听器
        document.getElementById('changeMediaButton').addEventListener('click', function() {
            if (MediaLoader.getSelectedMediaType()) {
                MediaLoader.loadMedia(`get_random_${MediaLoader.getSelectedMediaType()}.php`);
            } else {
                MediaLoader.loadMedia('get_random_media.php');
            }
        });

        document.getElementById('changeToImage').addEventListener('click', function() {
            MediaLoader.setSelectedMediaType('image');
            MediaLoader.loadMedia('get_random_image.php');
        });

        document.getElementById('changeToVideo').addEventListener('click', function() {
            MediaLoader.setSelectedMediaType('video');
            MediaLoader.loadMedia('get_random_video.php');
        });

        document.getElementById('mixButton').addEventListener('click', function() {
            MediaLoader.setSelectedMediaType(null); // Reset to mixed mode
            MediaLoader.loadMedia('get_random_media.php');
        });

        // 为启动页的按钮添加点击事件监听器
        document.getElementById('startButton').addEventListener('click', function() {
            MediaLoader.hideSplashScreen();
            MediaLoader.loadMedia('get_random_media.php'); // 开始加载混合内容
        });

        // 页面加载时默认只显示启动页
        window.onload = function() {
            // 不再在此处调用loadMedia，改为等待用户点击“点击开始”
        };
    </script>
</body>
</html>


本文链接：https://blog.syylw.com/160.html
ajax随机视频随机图标
Last Modified: January 14, 2025
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment