功能简介

在WordPress侧边栏添加一个随机视频播放器，可以增加网站的趣味性和互动性。本文将介绍如何使用HTML、CSS和JavaScript实现一个支持随机切换、播放/暂停及关闭功能的侧边栏视频组件。

实现步骤

1. HTML 结构

首先，我们需要构建播放器的HTML结构，包含视频容器和控制按钮。

<div id="random-video-widget" class="rv-widget">
  <div class="rv-header">
    <span>随机视频</span>
    <button class="rv-close">关闭</button>
  </div>
  <div class="rv-content">
    <video id="rv-player" controls>您的浏览器不支持Video标签。</video>
  </div>
  <div class="rv-controls">
    <button id="rv-play">播放/暂停</button>
    <button id="rv-next">下一个</button>
  </div>
</div>

2. CSS 样式

添加简单的CSS样式，使其适应侧边栏宽度并美化界面。

.rv-widget {
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.rv-header {
  padding: 10px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rv-content video {
  width: 100%;
  display: block;
}
.rv-controls {
  padding: 10px;
  display: flex;
  gap: 10px;
}
.rv-controls button {
  flex: 1;
  padding: 5px;
  cursor: pointer;
}

3. JavaScript 逻辑

编写JS脚本实现视频列表管理、随机切换及控制功能。

document.addEventListener('DOMContentLoaded', function() {
  const videoList = [
    'https://example.com/video1.mp4',
    'https://example.com/video2.mp4',
    'https://example.com/video3.mp4'
  ];
  const player = document.getElementById('rv-player');
  const btnPlay = document.getElementById('rv-play');
  const btnNext = document.getElementById('rv-next');
  const btnClose = document.querySelector('.rv-close');
  const widget = document.getElementById('random-video-widget');

  function playRandom() {
    const randomIndex = Math.floor(Math.random() * videoList.length);
    player.src = videoList[randomIndex];
    player.play();
  }

  btnPlay.addEventListener('click', () => {
    if (player.paused) player.play(); else player.pause();
  });

  btnNext.addEventListener('click', playRandom);

  btnClose.addEventListener('click', () => {
    widget.style.display = 'none';
  });

  // 初始化播放
  playRandom();
});

集成到 WordPress

1. 添加代码： 将上述HTML、CSS和JS代码整合。
2. 使用小工具： 登录WordPress后台，进入 外观 > 小工具。
3. 添加自定义HTML： 找到“自定义HTML”小工具，将其拖入侧边栏区域。
4. 粘贴代码： 将整合后的代码粘贴到小工具内容框中并保存。

注意事项

• 视频源： 请确保视频链接有效且允许跨域引用（CORS），建议使用自建服务器或稳定的CDN链接。
• 性能： 视频加载可能会影响页面速度，建议对视频文件进行压缩。
• 兼容性： 确保主题的侧边栏宽度足够容纳视频播放器。