简单易用的代码嵌入法 和 功能强大的独立页面法。
（图片来源网络，侵删）
简单代码嵌入法（推荐新手使用）
这种方法的核心是直接修改织梦自带的404页面模板,将视频代码直接嵌入进去，优点是快速、简单，缺点是如果织梦系统升级，可能会被覆盖。
操作步骤：
-
找到404页面模板文件
- 登录您的网站FTP或主机文件管理器。
- 找到织梦的模板目录,通常位于
/templets/或/dede/templets/下。 - 在该目录下找到
htm文件，这就是织梦默认的404页面模板。
-
准备视频资源
- 您需要一个视频文件。强烈建议使用MP4格式，因为它兼容性最好。
- 重要： 将您的视频文件上传到网站服务器上，为了管理方便，建议在网站根目录下创建一个专门的文件夹，
/static/video/或/assets/video/。 - 假设您上传的视频文件名为
my_404_video.mp4，那么它的完整地址就是https://www.yourdomain.com/static/video/my_404_video.mp4。
-
编辑
htm文件
（图片来源网络，侵删）- 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开
htm文件。 - 您可以清空原有内容,然后使用以下代码进行替换，这段代码创建了一个全屏播放的视频背景，并添加了一个友好的提示信息。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面未找到 - 404 - {dede:global.cfg_webname/}</title> <style> /* CSS样式：让视频全屏，文字居中显示 */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; /* 防止出现滚动条 */ } .video-container { width: 100vw; height: 100vh; position: relative; } .video-container video { width: 100%; height: 100%; object-fit: cover; /* 让视频覆盖整个区域，可能会被裁剪 */ } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，让文字更清晰 */ padding: 30px 50px; border-radius: 10px; } .content h1 { font-size: 48px; margin-bottom: 20px; } .content p { font-size: 20px; margin-bottom: 20px; } .content a { display: inline-block; padding: 12px 25px; background-color: #007bff; color: #ffffff; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s; } .content a:hover { background-color: #0056b3; } </style> </head> <body> <div class="video-container"> <!-- 请将下面的视频地址替换为您自己的视频地址。 muted: 静音播放，因为很多浏览器不允许自动播放带声音的视频。 autoplay: 自动播放。 loop: 循环播放。 playsinline: 在移动端内播放，而不是全屏。 --> <video autoplay muted loop playsinline> <source src="/static/video/my_404_video.mp4" type="video/mp4"> <!-- 如果浏览器不支持MP4，可以添加其他格式，如 webm --> <!-- <source src="/static/video/my_404_video.webm" type="video/webm"> --> 您的浏览器不支持视频播放。 </video> <div class="content"> <h1>哎呀！迷路了</h1> <p>抱歉，您访问的页面不存在或已被移除。</p> <a href="/">返回首页</a> </div> </div> </body> </html> - 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开
-
修改并保存
- 将代码中的
/static/video/my_404_video.mp4替换为您自己视频的实际地址。 - 保存
htm文件。
- 将代码中的
-
测试404页面
- 在浏览器地址栏中输入一个您网站上肯定不存在的页面地址,
https://www.yourdomain.com/this-page-does-not-exist.html。 - 如果一切正常,您应该就能看到带有视频的404页面了。
- 在浏览器地址栏中输入一个您网站上肯定不存在的页面地址,
独立页面法（更灵活、更推荐）
这种方法不修改织梦核心文件,而是创建一个独立的HTML页面，然后通过修改服务器配置，将所有404请求都重定向到这个新页面，这是更专业、更稳妥的做法。
操作步骤：
-
创建独立的404页面
（图片来源网络，侵删）- 在您的网站根目录下,创建一个新的HTML文件，
html。 - 将上面方案一中的完整HTML代码复制并粘贴到这个
html文件中。 - 同样,记得修改视频地址为您自己的。
- 保存这个文件。
- 在您的网站根目录下,创建一个新的HTML文件，
-
配置服务器将404错误指向新页面
- 这一步是关键,需要根据您的服务器类型进行配置。
对于 Apache 服务器:
- 找到网站根目录下的
.htaccess文件。 - 在文件中添加或修改以下行：
ErrorDocument 404 /404.html
- 保存
.htaccess文件。
对于 Nginx 服务器:
- 找到您网站的Nginx配置文件（通常在
/etc/nginx/sites-available/目录下）。 - 在
server块内添加以下配置：error_page 404 /404.html;
- 保存文件,然后执行
nginx -s reload命令重新加载配置。
-
测试
- 和方案一一样,访问一个不存在的页面，检查是否正确跳转到您新创建的
html页面。
- 和方案一一样,访问一个不存在的页面，检查是否正确跳转到您新创建的
视频资源获取建议
如果您没有自己的视频,可以考虑以下几种方式获取：
-
免费视频素材网站：
- Pexels Videos: 提供大量免费可商用的视频素材，质量很高。
- Pixabay: 类似Pexels，提供各种类型的免费视频。
- Videvo: 有免费和付费素材，使用时请注意查看授权协议。
-
使用GIF动画：
- 如果视频太大,或者想用更轻量的资源，可以使用GIF动画。
- 将
<video>标签替换为<img>标签，并添加animate.css等CSS动画库来实现动态效果。 <img src="/static/images/your_cool_animation.gif" alt="动画">
-
使用Lottie动画：
- Lottie 是由 Airbnb 推出的一种用 JSON 格式定义的动画，体积小、效果好、可交互，需要引入
lottie-web库来播放。
- Lottie 是由 Airbnb 推出的一种用 JSON 格式定义的动画，体积小、效果好、可交互，需要引入
总结与注意事项
- 视频格式：优先使用
MP4(H.264编码)，兼容性最广。 - 视频大小：404页面的视频不宜过大，否则会影响加载速度，建议控制在几MB以内。
- 静音与自动播放：
muted和autoplay属性对于现代浏览器实现视频背景至关重要，否则视频可能无法自动播放。 - 品牌化：在404页面上加入您的Logo、网站名称和返回首页的链接，强化品牌形象。
- SEO：虽然404页面不是主要页面，但一个好的404页面可以引导用户继续浏览，降低跳出率，对SEO有间接的正面影响。
希望这份详细的指南能帮助您成功打造一个酷炫的404页面！
