如何搭建按时段自动播放的跨端响应式视频排期播单（适配WordPress）

核心实现逻辑 #

整套方案完全基于原生JavaScript实现，不需要编写PHP、Java代码，不管是嵌入WordPress页面还是独立静态网页都能直接用，所有逻辑靠前端时间匹配完成：

• 排期规则自定义配置，支持全天任意时段的视频切换
• 自带响应式适配，兼容iOS、Android、Windows全端的浏览器运行环境
• 避开主流浏览器的自动播放限制，不需要额外浏览器插件

分步操作指引 #

1. 排期规则配置方法 #

直接用JavaScript数组定义全天的节目单，每条节目包含三个核心字段：

• startTime：节目开始时间，统一用24小时制的HH:mm格式（比如上午9点写"09:00"，晚上9点写"21:00"）
• videoUrl：对应要播放的视频文件地址
• title：可选的节目名称展示项

匹配逻辑非常直观：系统每30秒读取一次用户设备的当前时间，把时间转成HH:mm格式后，自动从排期表里找到「开始时间小于等于当前时间、且时间最接近当前点」的节目，只要当前播放的视频和匹配到的节目不一样，就自动切换加载新视频。

举个覆盖全天的排期例子：

const scheduleList = [
  { startTime: "00:00", videoUrl: "你的夜间档视频地址", title: "午夜影院" },
  { startTime: "06:00", videoUrl: "你的早间视频地址", title: "早间剧场" },
  { startTime: "09:00", videoUrl: "你的movie1.mp4地址", title: "上午档节目" },
  { startTime: "11:00", videoUrl: "你的movie2.mp4地址", title: "午间档节目" },
  { startTime: "14:00", videoUrl: "你的下午节目地址", title: "下午茶档" },
  { startTime: "18:00", videoUrl: "你的晚间新闻地址", title: "民生资讯" },
  { startTime: "21:00", videoUrl: "你的黄金档视频地址", title: "黄金剧场" }
]

2. 跨端兼容适配配置 #

为了适配不同系统的浏览器规则，视频标签需要加上三个固定属性，不然会出现自动播放被拦截、iOS强制全屏的问题：

• muted属性是必须加的：现在所有现代浏览器都不允许未静音的视频自动播放，加了这个属性就能绕开拦截，用户可以手动点取消音量解锁声音
• playsinline属性必须配置：解决iOS Safari打开视频强制跳全屏的问题，让视频在网页内嵌位置播放
• controls：显示基础的播放、进度条、音量控件，方便用户手动操作

3. 响应式样式配置 #

只需要几行CSS就能实现全端自适应，不需要额外的响应式框架：

.schedule-video-player {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  max-width: 1200px;
  margin: 0 auto;
}

这段样式会让视频跟着容器宽度自动缩放，不管是手机竖屏、平板还是电脑大屏，都不会出现拉伸或者溢出的问题。

可直接复用的完整代码 #

把下面的代码复制之后，只要改改排期表里的时间和视频地址，就能直接用：

<!-- 页面容器 -->
<div class="video-schedule-container">
  <video 
    class="schedule-video-player" 
    muted 
    playsinline 
    controls
  ></video>
  <p id="now-playing-title" style="text-align: center; margin-top: 8px;"></p>
</div>

<style>
.schedule-video-player {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.video-schedule-container {
  padding: 16px;
}
</style>

<script>
// --------------------------
// 只需要改下面这段排期内容就行
// --------------------------
const scheduleList = [
  { startTime: "00:00", videoUrl: "https://你的视频地址/night.mp4", title: "午夜影院" },
  { startTime: "06:00", videoUrl: "https://你的视频地址/morning.mp4", title: "早间剧场" },
  { startTime: "09:00", videoUrl: "https://你的视频地址/movie1.mp4", title: "上午档" },
  { startTime: "11:00", videoUrl: "https://你的视频地址/movie2.mp4", title: "午间档" },
  { startTime: "14:00", videoUrl: "https://你的视频地址/afternoon.mp4", title: "下午茶档" },
  { startTime: "18:00", videoUrl: "https://你的视频地址/evening-news.mp4", title: "晚间资讯" },
  { startTime: "21:00", videoUrl: "https://你的视频地址/prime.mp4", title: "黄金剧场" }
]
// --------------------------
// 以下是自动运行的核心逻辑，不需要改动
// --------------------------
const videoEl = document.querySelector('.schedule-video-player');
const titleEl = document.querySelector('#now-playing-title');

// 把当前时间转成HH:mm格式
function getCurrentTimeStr() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
}

// 匹配当前应该播放的节目
function getCurrentSchedule() {
  const currentTime = getCurrentTimeStr();
  // 把排期表按时间从早到晚排序
  const sortedSchedule = [...scheduleList].sort((a,b) => a.startTime.localeCompare(b.startTime));
  // 从后往前找第一个开始时间小于等于当前时间的节目
  for(let i = sortedSchedule.length -1; i >=0; i--) {
    if(sortedSchedule[i].startTime <= currentTime) {
      return sortedSchedule[i];
    }
  }
  // 如果当前时间比最早的节目还早，就播最后一个（也就是午夜档的内容）
  return sortedSchedule[sortedSchedule.length -1];
}

// 切换视频
function updateCurrentPlay() {
  const targetSchedule = getCurrentSchedule();
  // 如果要播的视频和当前视频地址一样，就不重复加载
  if(videoEl.getAttribute('src') === targetSchedule.videoUrl) return;
  // 加载新视频并自动播放
  videoEl.src = targetSchedule.videoUrl;
  titleEl.textContent = `正在播放：${targetSchedule.title}`;
  videoEl.play().catch(err => {
    // 播放失败的容错，用户点一下播放就行
  })
}

// 页面加载完成第一次执行
updateCurrentPlay();
// 每30秒检查一次排期，触发自动切换
setInterval(updateCurrentPlay, 30000);
</script>

不同场景的部署方法 #

• 嵌入WordPress网站：不管用古腾堡编辑器还是经典编辑器，只要加一个「自定义HTML」块，把上面的完整代码粘进去，保存发布就可以正常显示，不需要改主题文件、不需要装PHP插件
• 独立静态网页：直接把代码粘到网页的<body>标签内部，不需要任何第三方依赖，打开就能运行

常见问题处理 #

• 自动播放被浏览器拦截：检查视频标签有没有加muted属性，这是全端通用的浏览器规则，加了之后就不会拦截，用户可以手动点击取消静音
• 切视频的时候出现黑屏：代码里已经做了源地址重复判断，只有真正换视频的时候才会重新加载，不会出现反复黑屏的问题
• 跨天排期异常：匹配逻辑已经做了兜底，如果当前时间在当天第一个节目之前，会自动播放前一天最后一个排期的内容，覆盖凌晨时段的播放需求

内容的提问来源于stack exchange，提问作者John Bonzo