织梦怎么添加MP4视频？-织梦建站-盈思创科技

页插入HTML代码（最常用、最灵活）

这是最直接、最灵活的方法，适用于任何情况,尤其是当你需要精确控制视频播放器时。

（图片来源网络，侵删）

步骤 1：准备你的视频文件

上传视频：将你的MP4视频文件通过FTP或主机控制面板上传到你的网站服务器上，为了管理方便，建议在网站根目录下创建一个专门的文件夹，/uploads/video/。
获取视频路径：上传成功后，记下该视频文件的完整URL地址。http://www.yourdomain.com/uploads/video/myvideo.mp4

步骤 2：在文章内容中插入HTML代码

登录后台：登录你的织梦后台。
编辑文章：进入“核心” -> “内容管理” -> “普通文章”，找到你需要添加视频的文章，点击“编辑”。
切换到源码模式编辑器中，点击“源码”按钮（通常是一个 </> 图标），切换到HTML编辑模式，这是关键一步,否则织梦可能会过滤掉你输入的代码。
插入视频代码：在源码模式下，粘贴以下HTML代码，你需要将代码中的 src 属性值替换为你自己视频的URL。

<!-- 基础版HTML5视频播放器 -->
<video width="100%" height="auto" controls="controls">
    <source src="http://www.yourdomain.com/uploads/video/myvideo.mp4" type="video/mp4">
    <!-- 可以添加多个source标签以兼容不同格式的视频 -->
    <!-- <source src="movie.webm" type="video/webm"> -->
    <!-- <source src="movie.ogv" type="video/ogg"> -->
    您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>

代码解释：

<video>: 定义视频播放器。
width="100%": 设置播放器宽度为100%，自适应内容区域，你也可以设置固定宽度，如 width="640"。
height="auto": 高度自动调整,保持视频比例。
controls="controls": 显示播放器控制栏（播放、暂停、音量、进度条等），如果去掉这个属性，视频将静音自动播放（通常不推荐）。
<source>: 指定视频源。
- src: 你的MP4视频文件的完整URL。
- type="video/mp4": 指定视频文件的MIME类型,帮助浏览器正确识别。
您的浏览器不支持 HTML5 视频...: 这是当浏览器不支持<video>标签时显示的备选文本。

保存文章：点击“保存”按钮。

前台的文章页面就会显示一个可以播放MP4视频的播放器了。

使用第三方视频播放器插件（功能更强大）

如果你希望获得更美观、功能更丰富的播放器（如自定义皮肤、广告位、弹幕等）,可以使用第三方播放器插件。

常见播放器选择：

DPlayer: 一个简洁、强大的HTML5弹幕视频播放器。
Video.js: 一个非常流行的、高度可定制的视频播放器库。
阿里云/腾讯云播放器: 如果你的视频托管在云服务上，它们通常会提供官方的JS-SDK,集成体验最好。

这里以 DPlayer 为例,说明如何集成。

（图片来源网络，侵删）

步骤 1：下载并上传播放器文件

下载DPlayer的文件（包含JS和CSS文件）,可以从其GitHub仓库获取。
将下载的 dplayer 文件夹通过FTP上传到你的网站主题目录下，/templets/default/dplayer/。

步骤 2：修改文章模板文件

在织梦后台，进入“模板” -> “默认模板管理”。
找到并点击“页模板”（通常是 article_article.htm）进行编辑。
在 <head> 标签内,引入DPlayer的CSS和JS文件：

<head>
    <!-- 其他head内容 -->
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/dplayer/DPlayer.min.css">
    <script src="{dede:global.cfg_templets_skin/}/dplayer/DPlayer.min.js"></script>
</head>

步骤 3：在文章内容页中添加播放器容器

在 article_article.htm 文件中，你希望视频出现的位置（在文章标题下方），添加一个 <div> 作为播放器的容器。

<!-- 文章标题 -->
<h1>{dede:field.title/}</h1>
<!-- 视频播放器容器 -->
<div id="dplayer1" style="width: 100%; height: 500px;"></div>
<!-- 文章内容 -->
{dede:field.body/}

步骤 4：初始化播放器

在 <body> 标签的末尾（在 </body> 之前）,添加JavaScript代码来初始化DPlayer。

<script>
    // 注意：这里使用jQuery的ready函数确保DOM加载完成
    jQuery(document).ready(function($) {
        // dp1 是播放器容器的ID
        const dp1 = new DPlayer({
            container: document.getElementById('dplayer1'),
            screenshot: true, // 开启截图功能
            video: {
                url: 'http://www.yourdomain.com/uploads/video/myvideo.mp4', // 视频URL
                // type: 'auto' // 可以指定类型，如 'mp4', 'hls', 'flv' 等
            }
        });
    });
</script>

问题来了：视频URL是固定的，但每篇文章的视频都不同,如何动态获取？

步骤 5：动态获取视频URL（关键）

我们需要在后台的文章模型中添加一个自定义字段来存储视频URL。

（图片来源网络，侵删）

添加模型字段：
- 进入“核心” -> “内容模型管理” -> “普通文章” -> “字段管理”。
- 点击“添加新字段”。
- 字段名: video_url (必须为小写,不含空格)
- : 视频地址
- 字段类型: 单行文本
- 保存。
修改文章编辑页面：
- 进入“模板” -> “默认模板管理” -> “内容模型管理” -> “普通文章模板” -> “article_add.htm和article_edit.htm`。
- 在合适的位置添加一个输入框,让编辑者可以填写视频地址。
- 在 article_add.htm 中添加：
```
<tr>
    <td height="24" colspan="2" style="background-color:#f5f5f5; text-align:center;">视频地址</td>
</tr>
<tr>
    <td class="bline" height="24" style="width:**;">视频URL:</td>
    <td class="bline"><input name="video_url" type="text" id="video_url" size="80" class="alltxt" value="{dede:field.video_url/}"></td>
</tr>
```
- 同样，在 article_edit.htm 中也添加相同的代码。

修改前台模板：

回到 article_article.htm，修改JavaScript部分，使用织梦的标签 {dede:field.video_url/} 来动态获取后台填写的视频URL。

<script>
    jQuery(document).ready(function($) {
        const videoUrl = '{dede:field.video_url/}';
        if (videoUrl) { // 只有当视频地址不为空时才创建播放器
            const dp1 = new DPlayer({
                container: document.getElementById('dplayer1'),
                video: {
                    url: videoUrl
                }
            });
        }
    });
</script>

更新文章：重新编辑一篇已有文章，或者发布一篇新文章，在“视频地址”字段中填入你的MP4文件URL，保存，刷新前台页面,就能看到DPlayer播放器了。

使用在线视频平台（最简单、最省心）

如果你不希望视频流量消耗自己的服务器带宽,可以使用在线视频平台。

上传视频：将你的MP4视频上传到B站、YouTube、腾讯视频等平台。
获取代码：在视频页面找到“分享”或“嵌入”功能，复制提供的 <iframe> 嵌入代码。
粘贴到文章：在织梦后台编辑文章时，同样需要切换到“源码”模式，然后将复制的 <iframe> 代码直接粘贴进去即可。

优点：

节省带宽：视频由平台播放,不占用你的服务器资源。
加载速度快：大型CDN加速,播放体验好。
无需技术维护：播放器由平台提供,功能稳定。

缺点：

依赖第三方：平台政策变化或视频下架会影响你的网站。
有广告：平台播放器可能会插入自己的广告。
品牌感不强：播放器样式由平台决定,难以自定义。

总结与推荐

方法	优点	缺点	适用场景
直接插入HTML	简单、直接、无依赖、完全控制	功能基础，样式单一	临时使用、对播放器无要求的个人博客
第三方插件	功能强大、可定制、体验好	需要修改模板、有一定技术门槛	专业网站、对播放体验有较高要求的商业项目
在线平台	极其简单、省心、省带宽	依赖第三方、有广告、品牌感弱	新手、流量大但服务器带宽有限的网站

对于大多数用户，我首先推荐方法一，因为它最直接，能满足基本需求，如果你希望网站更专业、体验更好，方法二是更好的选择。方法三则适合追求极致简单和省心的用户。

织梦怎么添加MP4视频？

页插入HTML代码（最常用、最灵活）

步骤 1：准备你的视频文件

步骤 2：在文章内容中插入HTML代码

使用第三方视频播放器插件（功能更强大）

常见播放器选择：

步骤 1：下载并上传播放器文件

步骤 2：修改文章模板文件

步骤 3：在文章内容页中添加播放器容器

步骤 4：初始化播放器

步骤 5：动态获取视频URL（关键）

使用在线视频平台（最简单、最省心）

总结与推荐

相关文章

目录[+]