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

使用第三方HTML5播放器代码（最灵活、最常用）

这种方法的核心是：获取一个现成的、功能强大的HTML5视频播放器代码，然后将其集成到织梦的模板或文章内容中。

（图片来源网络，侵删）

这是最推荐的方法,因为它不依赖织梦的特定模块，可以轻松地在任何地方使用，并且播放器功能丰富（如弹幕、倍速、清晰度切换等）。

步骤详解：

选择并获取播放器代码
- 强烈推荐 DPlayer：一个功能强大、界面美观、支持弹幕和多种视频源（HLS, DASH）的轻量级播放器。
- 其他选择：Video.js, Plyr 等。
- 获取DPlayer代码：
  - 访问 DPlayer 的 GitHub Releases 页面下载最新版：https://github.com/DIYgod/DPlayer/releases
  - 下载后解压,你会看到 DPlayer.min.js 和 DPlayer.min.css 这两个核心文件，将它们上传到你网站的目录，/static/js/ 和 /static/css/。
在织梦模板中引入播放器资源
- 打开你想要显示视频的模板文件,通常是文章内容页 article_article.htm 或者列表页 article_list.htm。
- 在 <head> 标签内引入 DPlayer 的 CSS 文件。
- 在页面底部 </body> 标签之前引入 DPlayer 的 JS 文件。
```

<link rel="stylesheet" href="/static/css/DPlayer.min.css">

<script src="/static/js/DPlayer.min.js"></script>
```
在模板中创建视频容器并初始化播放器
（图片来源网络，侵删）
- 页模板 article_article.htm 中，找到你希望视频出现的位置（在 {dede:field.body/} 之前或之后）。
- 添加一个 <div> 作为视频播放器的容器，并给它一个唯一的 id。
```

<div id="dplayer1" style="width: 100%; max-width: 800px; margin: 20px auto;"></div>
```

编写JS代码来初始化播放器

在引入了 DPlayer.js 的 <script> 标签内，添加以下JavaScript代码来创建播放器实例。

<script>
    // 确保DOM元素加载完成后再执行
    document.addEventListener('DOMContentLoaded', function () {
        const dp = new DPlayer({
            element: document.getElementById('dplayer1'), // 播放器容器
            video: {
                url: '你的视频文件地址.mp4', // 视频URL
                pic: '视频封面图地址.jpg', // 视频封面图
                // 如果需要支持多种清晰度，可以这样写：
                // url: {
                //     hd: '高清视频地址.mp4',
                //     sd: '标清视频地址.mp4'
                // },
                // defaultQuality: 'sd', // 默认清晰度
            },
            // 其他配置选项
            autoplay: false, // 自动播放
            theme: '#FADFA3', // 主题色
            loop: false, // 循环播放
            lang: 'zh-cn', // 语言
        });
    });
</script>

动态获取视频地址（关键步骤） 为了让每篇文章都能播放自己的视频，你需要从文章的自定义字段中获取视频地址。
- 第一步：添加自定义字段
  1. 进入织梦后台 -> 核心 -> 内容模型管理 -> 选择你的文章模型（如“文章”）-> 修改。
  2. 在“字段管理”中，点击“添加新字段”。
  3. 字段名：填写 video_url（英文，不含空格）。
  4. 字段提示：填写“视频播放地址”。
  5. 字段类型：选择“单行文本”。
  6. 保存。
- 第二步：在发布文章时填写地址 发布或编辑文章时，你会在内容下方看到“视频播放地址”这个输入框，填入你的视频文件URL（可以是本站地址，也可以是外链）。
  （图片来源网络，侵删）
- 第三步：修改模板，调用字段值 将模板中的硬编码URL替换为织梦的标签调用。
```

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const videoUrl = '{dede:field.video_url/}'; // 调用自定义字段
        const videoPic = '{dede:field.litpic/}'; // 通常用文章缩略图作为封面
        if(videoUrl){ // 只有当视频地址存在时才创建播放器
            const dp = new DPlayer({
                element: document.getElementById('dplayer1'),
                video: {
                    url: videoUrl,
                    pic: videoPic,
                }
            });
        }
    });
</script>
```

使用织梦自带的“视频模型”（最官方、最简单）

如果你的网站主要就是做视频站,并且希望使用织梦后台的统一管理，可以创建一个专门的“视频”内容模型。

步骤详解：

创建视频内容模型
- 进入后台 -> 核心 -> 内容模型管理 -> 增加新模型。
- 模型名称：填写“视频”。
- 模型表前缀：保持默认 dede_。
- 模型字段：点击“字段管理”，在这里你可以添加视频所需的各种字段，
  - video_url (单行文本)：存放视频文件路径。
  - video_play_count (数字)：用于统计播放次数。
  - actor (文本域)：演员信息。
- 保存并生成新模型。
选择并设置视频栏目
- 进入后台 -> 频道管理 -> 增加顶级栏目。
- 栏目名称：如“电影”。
- 栏目类型：选择“频道”。
- 内容模型：选择你刚刚创建的“视频”模型。
- 保存。
发布视频内容
- 在这个新栏目下发布文章,你会看到之前在模型里设置的自定义字段。
- 上传视频文件到服务器（/uploads/video/ 目录），然后将完整路径填写到 video_url 字段中。

修改列表页和内容页模板

列表页 list_video.htm：使用 {dede:list} 标签循环，并在其中调用 video_url 字段来显示视频封面或直接嵌入播放器。

{dede:list pagesize='10'}
<div>
    <a href="[field:arcurl/]">
        <!-- 这里可以用封面图，或者直接调用一个简单的HTML5 player -->
        <video src="[field:video_url/]" width="300" height="200" controls></video>
    </a>
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</div>
{/dede:list}

内容页 article_video.htm：直接调用 video_url 字段来显示主视频播放器。
```
<video src="{dede:field.video_url/}" width="800" height="450" controls></video>
```

优点：与织梦后台无缝集成，管理规范。缺点：灵活性差，播放器功能简单（就是原生HTML5 video标签），难以实现复杂功能。

使用第三方视频插件（最省心、功能最强）

如果你不想写代码,希望快速拥有一个功能完善的视频网站，可以考虑使用第三方开发的织梦视频插件。

这些插件通常已经封装好了播放器、模型、上传、管理等一系列功能。

如何操作：

寻找插件：
- 在织梦官方论坛、DedeCMS吧、或者一些站长资源网站搜索“织梦视频插件”、“织梦视频模型”等关键词。
- 购买或下载合适的插件。
安装插件：

按照插件的说明文档进行安装,通常是上传文件、执行数据库脚本、在后台启用等步骤。
使用插件功能：
- 插件会提供新的内容模型和栏目类型,你只需要按照它的指引来创建视频栏目和发布视频即可。
- 它通常会自带一套精美的视频播放器和前端模板。

优点：开箱即用，功能强大，省去大量开发时间。缺点：可能需要付费，插件质量和后续更新无法保证，可能与你的现有主题有冲突。

总结与推荐

方法	优点	缺点	适用场景
HTML5播放器	灵活、功能强大、界面美观、可定制性高	需要一定的HTML/CSS/JS基础，手动集成	绝大多数网站，尤其是需要在文章中穿插视频，或对播放器有功能要求的网站。
官方视频模型	官方支持、管理规范、无需编程	功能简单、灵活性差、播放器体验一般	专门的视频门户网站，对播放器要求不高，主要依赖后台管理。
第三方插件	快速、功能全面、省心	可能收费、有兼容风险、扩展性受限	希望快速搭建一个功能完善的视频站，且不想自己动手写代码。

对于大多数用户，我首推【方法一】，它既能满足你对播放器功能和美观度的要求，又能保持织梦的灵活性，是目前最主流和最专业的做法。

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

使用第三方HTML5播放器代码（最灵活、最常用）

步骤详解：

使用织梦自带的“视频模型”（最官方、最简单）

步骤详解：

使用第三方视频插件（最省心、功能最强）

如何操作：

总结与推荐

相关文章

目录[+]