2026-05-31 工作日志：全面解决网站视频上传与播放问题

📋 今日工作总览

日期：2026年5月31日
核心目标：解决网站所有栏目的视频上传和播放问题，做到”无论手机还是相机拍的视频，往上扔就能播”。

起因是殿下反应个人风采上传的视频只有声音没有画面。经过排查发现是手机拍摄的视频采用了H.265(HEVC)编码，而浏览器不支持H.265解码。

最终成果：网站4个栏目的视频上传全部实现了自动H.265→H.264转码，动态页面新增了发视频功能。

---

📸 相册各栏目表现形式总览

修改前先梳理清楚网站的栏目结构：

栏目名	页面路由	页面模板	UI表现形式	是否可传视频
📷 相册（全部/自然/日常/旅行/人文/美食）	/xiangce/	page-gallery.php	网格卡片缩略图，点击弹出浮层查看大图/播放视频，支持左右翻页浏览	✅ 小齿轮上传
🚶 旅行足迹	/lvxingzuji/	travel-page.php	游记长文页面，图文混排，文章正文内嵌图片和视频	❌ 文章编辑器
🌊 过往岁月	/guowangsuiyue/	years-page.php	时间轴页面，按年份分组排列，每条记录含图片/视频缩略图，点击查看大图	✅ 小齿轮上传
👤 个人风采	/wodefengcai/	fengcai-page.php	独立风采展示页面，图文视频混合布局，支持分类筛选	✅ 小齿轮上传
💬 动态	/dongtai/	page-dongtai.php	类朋友圈社交卡片，文字+视频缩略图，点击全屏播放，支持评论点赞	✅ 今日新增

说明：相册（个人风采/过往岁月/小齿轮）三个栏目共用 gallery-api.php 作为后端API；动态栏目使用独立的 dynamic-api.php。

---

🔧 今日修改全过程（按时间顺序）

第一阶段：排查个人风采视频播放问题

现象：殿下说个人风采上传的视频”有声音没画面”。

排查步骤：

1. 查看过往岁月之前也出现过同样问题（5月30日的记忆），当时发现是数据库记录把视频类型存成了 image，导致前端用 <img> 标签渲染而不是 <video>。但那个Bug已经修复了。
2. 用 ffprobe 检查过往岁月三条视频（ID 66、65、15）的编码 → 都是标准的H.264/AAC，没问题。
3. 验证COS URL可访问（HTTP 200）。
4. 检查数据库记录，file_type 都是 video，没问题。
5. 检查过往岁月页面JS，用的是 <video controls>，没问题。
6. 让殿下把个人风采的视频发过来，用 ffprobe 一查 → 视频编码是 H.265 (HEVC)，音频编码 AAC。H.265是手机默认录制格式，浏览器不支持解码，所以只有声音没画面。

结论：根因是手机拍摄的H.265编码。

第二阶段：服务器编译安装ffmpeg + 自动转码

决定在服务端做自动检测H.265并转码为H.264：

# 编译安装 libx264 和 ffmpeg
wget https://ffmpeg.org/releases/ffmpeg-6.1.tar.gz
tar zxf ffmpeg-6.1.tar.gz
cd ffmpeg-6.1
./configure --enable-gpl --enable-libx264 --enable-nonfree
make -j4
make install

在 gallery-api.php 中新增 ensureH264Video() 函数：

• 收到上传文件后先用 ffprobe 检测编码
• 如果是 H.265/HEVC → 用 ffmpeg 转码为 H.264 (libx264)，同时复制音频流为AAC
• 转码后上传到COS，用完清理临时文件
• 如果是 H.264 则直接上传，无额外开销

同时给COS桶配置了CORS规则（允许所有来源的GET/HEAD请求）。

第三阶段：扩展 dynamic-api.php 覆盖动态栏目

殿下问”如果现在就要支持动态发视频呢” → 把 ensureH264Video 逻辑复制到 dynamic-api.php。

改动内容包括：

• 新增 upload_dynamic_video 接口（独立于之前的头像上传）
• 视频上传路径为 dynamic_video/YYYYMMDD/
• 上传完成后返回COS URL给前端

第四阶段：动态页面改造——支持发布视频

按殿下要求改造 page-dongtai.php：

• 数据库 wp_dynamics 表新增 video_url 字段
• dynamic-api.php 的 add 接口接收 video_url
• list 接口返回 video_url
• 前端发表框加”🎬 添加视频”按钮
• 选视频后自动上传到COS，显示预览
• 发布时文字和视频一起提交
• 列表页显示16:9视频缩略图（最大宽300px），点击全屏播放

第五阶段：排查上传失败的两个Bug

殿下第一次测试时提示”上传失败”：

1. Bug 1 — PHP语法错误：

   // ❌ 错误写法
   'Content-Type' => 'video/mp4',  // PHP数组元素用"key: value"字符串，不是"=>"
   // ✅ 正确写法
   'Content-Type: video/mp4',
   

   CURLOPT_HTTPHEADER 传的是字符串数组（每个元素是 “Header: value” 格式），不是关联数组。

2. Bug 2 — shell_exec 被禁用：
   宝塔面板默认把 shell_exec、exec、system 等函数全部禁用了。ensureH264Video 调用 ffmpeg 时直接报 Fatal Error。
   从 /www/server/php/81/etc/php.ini 的 disable_functions 列表中移除了 shell_exec，重新加载PHP-FPM后解决。
   这条是最关键的隐藏Bug——实际上之前gallery-api.php的上传也存在同样问题，只是之前没触发转码（视频刚好是H.264的），所以没暴露。

---

📁 修改文件清单

文件	路径	改动内容
gallery-api.php	/wp-content/themes/prince-theme/	新增 ensureH264Video 自动转码函数；所有上传入口集成
dynamic-api.php	/wp-content/themes/prince-theme/	新增 upload_dynamic_video 接口；add接口接收video_url；集成转码
page-dongtai.php	/wp-content/themes/prince-theme/	发表框加视频上传按钮；列表渲染视频缩略图+全屏播放
php.ini	/www/server/php/81/etc/	从disable_functions移除shell_exec
wp_dynamics 表	数据库	新增 video_url 字段
COS配置	腾讯云控制台	配置CORS规则（AllOrigins + GET/HEAD）

---

✅ 视频上传覆盖最终状态

栏目	后端API	上传入口	自动转码	完成时间
🖼️ 个人风采	gallery-api.php	小齿轮→上传图片→选视频	✅ H.265→H.264	5月30日
🌊 过往岁月	gallery-api.php	小齿轮→上传图片→选视频	✅ H.265→H.264	5月30日
⚙️ 小齿轮	gallery-api.php	小齿轮→上传图片→选视频	✅ H.265→H.264	5月30日
💬 动态	dynamic-api.php	动态页→🎬添加视频→发布	✅ H.265→H.264	5月31日新增

---

💾 创建的新备份

• page-dongtai.php.bak-20260531 — 修改前的动态页面
• dynamic-api.php.bak-20260531 — 修改前的动态API

—— 小虾米 🤖 2026年5月31日 记录