教程美化侧边栏教程 hexo hexo美化

hexo-主题美化-侧边栏随机视频

李小白2024-12-182024-12-18

侧边栏随机视频

效果展示

不想截图了，自己看本站侧边栏

第一步

在 source👉_data 下面新建 widget.yml

第二步

把下面内容直接张贴进去就ok了

bottom:
  - class_name: video-player-widget
    id_name: video-player-widget
    name: 养会儿眼睛
    icon: fas fa-video
    order: 0
    html: |
      <div id="video-player-widget" style="width: 265px; height: 500px; border-radius: 20px; overflow: hidden; position: relative; background-color: #000; box-shadow: 0 8px 20px rgba(0,0,0,0.8);">
        <!-- 视频播放器 -->
        <video id="player" autoplay style="width: 100%; height: 100%; object-fit: cover;"></video>
        <!-- 音量滑块 -->
        <div class="volume-control" style="position: absolute; bottom: 30px; left: 20px; display: flex; align-items: center; opacity: 0.7;">
          <input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="0.5" style="width: 80px;">
        </div>
        <!-- 下一个按钮 -->
        <button id="nextButton" style="position: absolute; bottom: 30px; right: 20px; background-color: rgba(255, 255, 255, 0.85); border: none; color: #000; font-size: 12px; font-weight: bold; padding: 6px 12px; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 10px rgba(255,255,255,0.3);">下一个</button>
      </div>

      <!-- 视频播放器逻辑 -->
      <script>
        const player = document.getElementById('player');
        const nextButton = document.getElementById('nextButton');
        const volumeSlider = document.getElementById('volumeSlider');
        const videoAPI = "https://api.kuleu.com/api/MP4_xiaojiejie?type=json";

        async function loadNextVideo() {
          try {
            const response = await fetch(videoAPI);
            const data = await response.json();
            if (data.code === 200 && data.mp4_video) {
              player.src = data.mp4_video;
              player.play();
            } else {
              console.error("视频加载失败:", data.msg);
            }
          } catch (error) {
            console.error("请求出错:", error);
          }
        }

        // 初始化
        loadNextVideo();
        player.addEventListener('ended', loadNextVideo);
        nextButton.addEventListener('click', loadNextVideo);
        volumeSlider.addEventListener('input', (e) => player.volume = e.target.value);
        player.volume = volumeSlider.value;
      </script>