织梦如何添加视频播放器？-织梦建站-盈思创科技

使用DedeCMS自带的“频道模型”功能（最推荐、最规范）

这是织梦官方提供的标准方法,可以让你像管理文章一样管理视频，非常灵活和强大，它通过创建一个“视频”模型，并集成一个播放器插件来实现。

（图片来源网络，侵删）

步骤1：创建新的内容模型（视频模型）

登录后台：进入你的织梦后台。
进入模型管理：在左侧菜单栏找到 核心 -> 内容模型管理。
增加新模型：点击右上角的 增加新模型 按钮。
填写模型信息：
- 模型名称：填写 视频 或 vod。
- 模型表前缀：系统会自动生成，如 dede_addonvideo，无需修改。
- 附加表：与表前缀对应，也无需修改。
- 内容导出命名规则：可以留空或使用默认规则。
- 列表显示条数：设置你在后台管理一个栏目时，默认显示多少条视频信息。
- 简介最大长度：设置视频简介的字数限制。
- 是否启用：务必勾选！
- 图片目录：设置视频封面图的存放目录，如 uploads/video/。
- 是否启用远程无图：根据需要选择。
- 是否启用内容图片：根据需要选择。
保存模型：点击 确定 保存。

步骤2：为模型添加字段

这一步是核心,决定了你的视频可以包含哪些信息（如视频地址、封面图、演员、导演等）。

进入字段管理：在 内容模型管理 页面，找到你刚刚创建的“视频”模型，点击右侧的 管理字段。
添加必要字段：
- 视频播放地址（最重要）：
  （图片来源网络，侵删）
  - 字段名：video_url (必须用英文小写)
  - 字段类型：多媒体 (这是关键！)
  - 字段提示：请上传视频或输入视频地址
  - 默认值：留空
  - 是否为空：否 (这样发布时就必须填写)
  - 其他选项：保持默认即可。
  - 保存。
- 视频封面图：
  - 字段名：litpic (这是织梦系统默认的封面图字段，可以直接用)
  - 如果系统中没有，可以新建一个：
    - 字段名：video_cover
    - 字段类型：图片
    - 字段提示：视频封面图
    - 是否为空：是 (封面图可选)
    - 保存。
- 演员/导演等其他字段：
  - 你可以继续添加,如 actor (演员, 文本类型), director (导演, 文本类型), duration (时长, 数字类型) 等。

步骤3：创建栏目并绑定模型

进入栏目管理：在 核心 -> 栏目管理 中，创建一个新栏目（电影”、“电视剧”）。
设置栏目：
- 栏目名称：填写你的栏目名。
- 模型：选择你刚刚创建的“视频”模型，这是最关键的一步！
- 其他选项：如栏目目录、列表模板、文章模板等，根据你的需要设置。
- 保存。

步骤4：修改模板文件，调用播放器

你的后台已经可以发布和管理视频了,但前台页面还不会显示播放器，你需要修改模板文件来调用你上传的视频。

找到文章模板：在 模板 -> 默认模板管理 中，找到你刚才创建的栏目所绑定的文章模板（通常是 article_article.htm），为了不覆盖默认模板，最好复制一份并重命名，video_play.htm，然后在栏目设置中选择这个新模板。
在模板中添加播放器代码：打开 video_play.htm 文件，在你想显示播放器的位置（通常是 {dede:field.body/} 的前面或里面）添加以下代码。

代码示例（使用HTML5的 video 标签）：

这是最简单、最现代的方式，无需额外插件。

<!-- 获取你自定义的video_url字段 -->
{dede:field.video_url runphp='yes'}
    // 去掉可能存在的多余空格
    $url = trim(@me);
    // 判断地址是否为空
    if (!empty($url)) {
        // 输出video标签
        @me = "<video id='my-video' class='video-js vjs-default-skin' controls preload='auto' width='100%' height='400' data-setup='{}'>
                  <source src='{$url}' type='video/mp4' />
                  <!-- 如果支持多种格式，可以添加source标签 -->
                  <!-- <source src='{$url}.ogg' type='video/ogg' /> -->
                  <p class='vjs-no-js'>
                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>.
                  </p>
                </video>";
    } else {
        @me = "<p>该视频暂无法播放。</p>";
    }
{/dede:field.video_url}
<!-- 引入Video.js播放器样式和脚本（推荐使用，功能更强大） -->
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<!-- 如果想支持移动端播放，可以添加这个插件 -->
<script src="https://vjs.zencdn.net/7.11.4/videojs-contrib-hls.min.js"></script>

代码说明：

{dede:field.video_url runphp='yes'}：这是我们调用“视频播放地址”字段并使用PHP处理的关键。
@me：在 runphp 中，@me 代表当前字段的原始值。
video 标签：HTML5的原生视频标签。
- controls：显示播放控件（播放/暂停、进度条、音量等）。
- preload：预加载策略。
- width / height：设置播放器宽高。
- <source src='...' />：指定视频文件的路径，type 属性告诉浏览器视频的格式（如 video/mp4, video/webm），你的视频需要提前准备好并上传到服务器，或者提供一个有效的在线地址。

使用第三方播放器（如DPlayer）

如果你想要更炫酷的播放器界面（如弹幕、封面图等），可以使用 DPlayer。

引入DPlayer的CSS和JS：在模板的 <head> 部分引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>

在模板中创建一个容器：
```
<div id="dplayer"></div>
```

在模板底部添加初始化脚本：

<script>
    // 确保DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 获取视频地址
        var videoUrl = "{dede:field.video_url/}";
        if (videoUrl) {
            var dp = new DPlayer({
                element: document.getElementById('dplayer'),
                video: {
                    url: videoUrl,
                    // 如果视频是m3u8格式，需要启用hls
                    // type: 'hls',
                    // url: 'your-m3u8-url'
                },
                // 其他配置选项
                // subtitle: {
                //     url: 'your-subtitle-url.vtt',
                //     type: 'vtt',
                // },
            });
        }
    });
</script>

使用第三方视频播放器插件（最简单）

如果你不想自己创建模型,只是想在文章内容里直接插入一个播放器，可以使用现成的插件。

寻找插件：在织梦官方论坛、DedeCMS吧或一些资源网站搜索“织梦视频播放器插件”。
安装插件：下载插件包，按照说明上传文件、执行数据库脚本、启用插件。
使用插件：插件通常会在编辑器中增加一个按钮（如“插入视频”），你点击按钮，输入视频地址，它会自动生成播放器代码插入到文章内容中。
修改模板：前台模板无需做太多修改，因为播放器代码已经包含在 {dede:field.body/} 里面了。

优点：简单快捷，无需懂代码。缺点：灵活性差，可能和你的主题不兼容，功能可能受限，且插件的长期维护是个问题。

直接在前台模板中嵌入（最直接但不推荐）

这种方法适用于只想在某个特定页面（比如首页的一个广告位）放一个固定的视频。

上传视频：将你的视频文件（如 my-video.mp4）通过FTP上传到服务器的指定目录（如 /uploads/video/）。
修改模板：打开你想要显示播放器的模板文件（如 index.htm），在相应位置直接写入HTML代码。

<!-- 直接写死地址 -->
<video src="/uploads/video/my-video.mp4" width="600" height="400" controls="controls"></video>

优点：最简单，无需后台操作。缺点：非常不灵活，无法管理，无法在多篇文章中使用，不推荐用于常规的内容发布。

总结与建议

方法	优点	缺点	适用场景
自建模型	功能强大、灵活规范、可扩展性强、易于管理	步骤稍多，需要理解织梦模型和字段的概念	强烈推荐，适用于所有需要发布和管理视频的网站。
第三方插件	简单快捷，开箱即用	灵活性差，依赖插件，可能不兼容或产生冲突	临时使用，或对功能要求不高、不想深入配置的用户。
直接嵌入	最简单直接	极不灵活，无法管理，代码耦合	仅用于在固定位置显示一个永不更换的视频。

对于绝大多数网站,强烈建议使用方法一，虽然前期配置需要花一些时间，但它为你构建一个可扩展、易维护的视频网站打下了坚实的基础，当你需要添加演员、评分、集数等更多复杂信息时，方法一的优势会立刻体现出来。

织梦如何添加视频播放器？