WordPress如何在页面插入本站内的视频

PHP wes 17 days ago (2026-07-04) 35 views

WordPress 插入服务器本地视频/media/b056.mp4 三种方案。


前置操作（必须先做）

  1. 确认目录/var/www/wordpress/media存在、权限正常
mkdir -p /var/www/wordpress/media 
# 权限统一 chown -R nginx:nginx /var/www/wordpress/media chmod -R 775 /var/www/wordpress/media
  1. 把b056.mp4上传到/var/www/wordpress/media/
  2. 访问地址：https://你的域名/media/b056.mp4，能直接打开播放说明路径正常；404 则是 Nginx 拦截静态文件，看文末修复。

方案 1：古腾堡编辑器「视频」区块（最简单，自带播放器）

  1. 文章编辑页点+搜索 视频 区块
  2. 选择「从 URL 插入」
  3. 填入完整地址；设置宽度、自动播放、循环、静音，发布即可。
底层自动生成 HTML：
<video controls src=”https://aaa.net/media/b056.mp4″></video>

方案 2：自定义 HTML 区块（自定义播放器样式、自适应、封面）

插入「自定义 HTML」，粘贴代码，自适应全屏：
<div style=”margin:20px 0;”> 
<video width="100%" controls preload="metadata" poster="封面图片地址"> <source src="https://aaa.net/media/b056.mp4" type="video/mp4"> 您的浏览器不支持MP4视频播放 </video> </div>
参数可选配置：
  • controls：显示播放按钮、进度条（删掉就无控件）
  • autoplay muted：静音自动播放
  • loop：循环播放
  • poster=”xxx.jpg”：视频封面图
  • preload=”metadata”：只预加载视频信息，不缓冲完整视频，省流量

方案 3：自定义简码 Shortcode（大量本地视频推荐，简化输入）

1、添加简码函数

外观 → 主题编辑器 → 打开functions.php，底部添加：
php
运行 
 function local_video_shortcode($atts){ $attr = shortcode_atts([ 'file' => '', 'poster' => '', 'loop' => 0, 'autoplay' => 0 ], $atts); if(empty($attr['file'])) return '请填写视频文件名'; $video_url = site_url('/media/'.$attr['file']); $loop = $attr['loop'] ? 'loop' : ''; $autoplay = $attr['autoplay'] ? 'autoplay muted' : ''; $poster = !empty($attr['poster']) ? 'poster="'.site_url('/media/'.$attr['poster']).'"' : ''; return ' <div style="margin:1.5rem 0;"> <video width="100%" controls preload="metadata" '.$loop.' '.$autoplay.' '.$poster.'> <source src="'.$video_url.'" type="video/mp4"> 浏览器不支持视频 </video> </div> '; } add_shortcode('localvideo','local_video_shortcode');

2、文章直接使用

基础调用：
[localvideo file=”b056.mp4″]
带封面 + 循环播放：
[localvideo file=”b056.mp4″ poster=”cover056.jpg” loop=”1″]

常见问题修复

问题 1：访问 /media/b056.mp4 报 404

Nginx 伪静态拦截了静态文件，修改站点配置wp.conf，在server{}内添加媒体目录放行规则：
nginx 
location ~* ^/media/ { root /var/www/wordpress; expires 30d; add_header Cache-Control public; }
重载 Nginx：
nginx -t && systemctl reload nginx

问题 2：视频无法播放 / 加载缓慢

  1. MP4 编码必须是 H.264，浏览器通用；MKV/AVI 无法直接播放，转码为 mp4
  2. 服务器带宽小：压缩视频码率，降低分辨率
  3. 权限不足：重新执行 media 目录权限命令

问题 3：页面加载卡顿

添加preload=”metadata”，只预加载基础信息，不缓存完整视频； 大型视频建议开启云存储 / OSS，不要放服务器本地。

问题 4：视频宽度超出页面、手机拉伸

上面所有代码都写了width=”100%”自适应容器，不要手动设置固定 px 宽高。

安全补充

不要把视频放到wp-content/uploads以外可执行目录，/media纯静态资源，Nginx 禁止解析 php：
nginx 
location ~* ^/media/.*\.php$ { deny all; }

↑