赞片CMSH5对接

学完这篇，你能把赞片CMS的后台数据接到自己的H5页面上——列表、详情、播放、搜索四条链路全部跑通，并且知道跨域和防盗链这两个坑该在哪一步处理。

第一步：拿到接口前缀，确认返回结构

这一步要拿到数据源的准确地址和字段名，做完你就能在浏览器里看到一坨 JSON。

登录赞片CMS后台，进「系统」→「接口设置」（部分版本叫「API设置」或「采集接口」），复制接口地址前缀，形如 https://你的域名/api.php/provide/vod/。

直接在浏览器打开 前缀?ac=detail&pg=1，看返回结构。影视类CMS基本是同一个壳：{code, msg, page, pagecount, limit, total, list:[...]}，list 里每条含 vod_id、vod_name、vod_pic、vod_remarks、vod_play_url。

注意：不同版本的赞片CMS字段名有差异，有的用 vod_ 前缀，有的用 video_。别照抄别人的教程，先拿你自己的接口返回对一遍字段名。

第二步：封装请求层

这一步把请求逻辑收敛到一个函数里，后面所有页面都复用它。

建 index.html、detail.html、play.html，共用一个 js/api.js：

const BASE = 'https://你的域名/api.php/provide/vod/';
export async function api(params){
  const q = new URLSearchParams(params).toString();
  const json = await (await fetch(`${BASE}?${q}`)).json();
  if(json.code !== 1) throw new Error(json.msg || '接口异常');
  return json;
}

常用参数：ac=detail 是统一入口，pg 页码，h 只取最近多少小时，t 分类id，wd 搜索词，ids 指定某条。

第三步：渲染列表页

这一步让首页出现影片卡片，做完你能看到封面、标题、更新集数。

调 api({ac:'detail', pg:1})，拿 list 循环拼 HTML：

list.map(v => `<a class="card" href="detail.html?id=${v.vod_id}">
  <img src="${v.vod_pic}" alt="${v.vod_name}" loading="lazy">
  <p>${v.vod_name}</p><span>${v.vod_remarks||''}</span></a>`).join('')

图片必须加 loading="lazy"，否则一页几十张图首屏会卡住。

注意：vod_pic 经常是空值或相对路径，用之前做兜底：v.vod_pic || '默认图.png'。

第四步：详情页和播放页

这一步点卡片能进详情、点剧集能播放，关键是解析 vod_play_url。

详情页先取 id：new URLSearchParams(location.search).get('id')，再调 api({ac:'detail', ids:id})。

vod_play_url 是一串用 # 分集、$ 分「集名+地址」的字符串，形如 第1集$https://a.m3u8#第2集$https://b.m3u8：

const eps = v.vod_play_url.split('#').map(s=>{
  const [name,url] = s.split('$'); return {name,url};
});

播放页把 url 交给播放器。移动端 Safari 和多数国产浏览器可以直接 <video src="m3u8">；桌面 Chrome 需要 hls.js：

if(video.canPlayType('application/vnd.apple.mpegurl')){
  video.src = url;
} else if(window.Hls && Hls.isSupported()){
  const hls = new Hls(); hls.loadSource(url); hls.attachMedia(video);
}

第五步：搜索和分页

搜索调 api({ac:'detail', wd:关键词})，关键词必须过 encodeURIComponent，中文不编码会返回空列表。

分页用返回的 pagecount 渲染「上一页/下一页」，点一次改 pg 重新请求。别做无限滚动一次性拉全部分页，接口会限流。

第六步：上线前处理跨域和防盗链

目标是本地能跑，部署后也不报错。

H5 和 CMS 不同域时 fetch 会被 CORS 拦。两个办法：一是给 CMS 的 Nginx 加 add_header Access-Control-Allow-Origin *;；二是自己反代一层——location /api/ { proxy_pass https://CMS域名/api.php/; }，前端 BASE 改成 /api/，同域就没跨域问题。

注意：m3u8 通常带防盗链，只校验 Referer。播放失败先在浏览器 Network 面板看 m3u8 请求是不是 403，是的话要么让运维放行 m3u8/ts 的 Referer 校验，要么在反代转发时补上 Referer 头。

小结

• 先拿真实接口返回对字段名，别照抄别人教程
• 请求逻辑收进一个 api() 函数，参数用 ac/pg/ids/wd
• vod_play_url 用 # 和 $ 两级切分，得到剧集列表
• 播放器按能力判断：原生 HLS 优先，桌面 Chrome 走 hls.js
• 搜索词必须 URL 编码，图片加懒加载，封面做兜底
• 上线前先解决跨域，再确认 m3u8 的 Referer 防盗链