织梦后台视频栏目怎么调用ckplayer-织梦建站-盈思创科技

前端模板调用：在栏目列表页或内容页，通过修改模板文件来调用 CKPlayer 播放器。
管理：在后台发布或修改视频内容时，方便地添加视频地址。

下面我将为你提供一份详细的、分步的图文教程。

（图片来源网络，侵删）

第一步：准备工作（下载并放置 CKPlayer 文件）

下载 CKPlayer：
- 访问 CKPlayer 官网下载最新版本：http://www.ckplayer.com/
- 下载后你会得到一个压缩包,解压后会看到 ckplayer 文件夹。
上传文件到服务器：
- 使用 FTP 工具登录你的网站服务器。
- 将解压后的 ckplayer 文件夹上传到你的网站根目录（）或 templets 目录下，为了保持整洁，建议直接放在根目录下，即 /ckplayer/。
准备视频文件：
- 将你的视频文件（如 .mp4, .flv, .m4v 等）上传到服务器的指定目录，/uploads/video/。

第二步：修改织梦模板文件（核心步骤）

我们需要修改两个关键的模板文件：list_article.htm（用于栏目列表页）和 article_article.htm详情页），如果你只想在详情页播放，可以只修改第二个。

（图片来源网络，侵删）

修改栏目列表页模板 (`list_article.htm`)

登录织梦后台,进入 “模板” -> “模板管理” -> “选择你的栏目” -> “列表页模板”。
点击 list_article.htm 右侧的 “修改” 按钮。
在模板代码中,找到 {dede:list} 循环标签内部，也就是显示每一条视频记录的地方。
在你希望显示播放器的位置,插入以下代码：

{dede:list}
    <div class="video-item">
        <!-- 调用 CKPlayer 播放器 -->
        <div class="player-box" style="width: 600px; height: 400px;">
            <!-- video 是视频地址，来自附加表字段，这里假设字段是 'video_url' -->
            <script type="text/javascript" src="/ckplayer/ckplayer.js"></script>
            <div id="video" style="width:100%; height:100%;"></div>
            <script type="text/javascript">
                var videoObject = {
                    container: '#video', //容器的ID或className
                    variable: 'player',
                    // video 是视频地址，来自附加表字段，这里假设字段是 'video_url'
                    video: '[field:video_url/]' 
                };
                var player = new ckplayer(videoObject);
            </script>
        </div>
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p>[field:description function='cn_substr(@me,100)'/]...</p>
    </div>
{/dede:list}

代码解释：

src="/ckplayer/ckplayer.js"：引入 CKPlayer 的核心 JS 文件，请确保路径正确。
container: '#video'：指定播放器容器，对应下方的 <div id="video">。
video: '[field:video_url/]'：这是最关键的一步，它告诉 CKPlayer 播放哪个视频。[field:video_url/] 是一个自定义的底层字段，它需要从你的视频内容附加表中获取数据，你需要确保你的附加表里有一个名为 video_url 的字段来存储视频地址。

详情页模板 (`article_article.htm`)

进入 “模板” -> “模板管理” -> “选择你的栏目” -> “文章内容页模板”。
点击 article_article.htm 右侧的 “修改” 按钮。
在 {dede:field.body/} 标签之前或之后，插入与列表页类似的播放器代码：

{dede:include filename="head.htm"/}
<body>
    <div class="main">
        <!-- 播放器代码 -->
        <div class="player-detail-box" style="width: 800px; height: 450px; margin: 0 auto;">
            <script type="text/javascript" src="/ckplayer/ckplayer.js"></script>
            <div id="video-detail" style="width:100%; height:100%;"></div>
            <script type="text/javascript">
                var videoObject = {
                    container: '#video-detail', //容器的ID或className
                    variable: 'player',
                    // video 是视频地址，来自附加表字段，这里假设字段是 'video_url'
                    video: '{dede:field.video_url/}'
                };
                var player = new ckplayer(videoObject);
            </script>
        </div>
        <h1>{dede:field.title/}</h1>
        <div class="info">
            <span>发布时间：{dede:field.pubdate function='GetDateMk(@me)'/}</span>
            <span>作者：{dede:field.writer/}</span>
            <span>来源：{dede:field.source/}</span>
        </div>
        <div class="content">
            {dede:field.body/}
        </div>
    </div>
</body>
</html>

代码解释：

在详情页,我们使用了 {dede:field.video_url/} 来直接获取当前文章的视频地址字段。

第三步：创建和配置视频内容的附加表

为了让 [field:video_url/] 和 {dede:field.video_url/} 能正确获取数据，你需要为你的视频栏目创建一个“附加表”。

进入模型管理：
（图片来源网络，侵删）
- 在织梦后台,找到 “核心” -> “内容模型管理”。
添加新模型（推荐）或修改现有模型：
- （推荐）添加新模型：点击 “增加新模型”。
  - 模型名称：填写一个你喜欢的名字，如“视频模型”。
  - 数据表：系统会自动生成一个，如 dede_addonvideo，无需修改。
  - 字段列表：点击右侧的 “一键复制”，可以快速添加常用字段，或者点击 “增加一个字段”，手动添加。
- （备选）修改现有模型：如果你想在文章模型里直接加视频字段，可以点击 “普通文章” 右侧的 “修改”，然后进入 “字段管理”。
添加视频地址字段：
- 在字段列表页面,点击 “增加一个字段”。
- 字段名：video_url (必须用英文小写，与模板中调用的一致)
- 字段类型：选择 “多媒体(视频)”，这个类型的好处是，后台编辑时会自动提供一个视频上传和选择界面。
- 字段提示文字：视频地址 (后台表单中显示的提示)
- 其他选项：保持默认即可。
- 点击 “保存”。
将模型应用到栏目：
- 进入 “频道模型” -> “栏目管理”。
- 点击你的视频栏目（或新建一个视频栏目）的 “更改” 按钮。
- 在 模型” 下拉菜单中，选择你刚刚创建的“视频模型”。
- 点击 “保存”。

第四步：在后台发布视频内容

一切配置就绪,你可以发布一篇视频文章来测试了。

进入 ”。
选择你刚刚配置好的视频栏目。
你会发现,除了常规的标题、内容等字段，还多了一个 “视频地址” 的输入框。
点击后面的 “上传” 或 “选择已有视频” 按钮，选择你之前上传到服务器的视频文件。
、简介等信息，“发布”。

第五步：前台页面测试

访问你的视频栏目列表页和刚刚发布的那篇文章的详情页,你应该能看到 CKPlayer 播放器已经成功加载并播放你设置的视频了。

常见问题与优化

视频无法播放，显示 [object Object]：
- 原因：[field:video_url/] 没有取到值，请检查附加表字段名是否与模板中的一致，以及发布内容时是否正确填写了视频地址。
- 解决：在模板中临时 `{dede:field

织梦后台视频栏目怎么调用ckplayer

第一步：准备工作（下载并放置 CKPlayer 文件）

第二步：修改织梦模板文件（核心步骤）

修改栏目列表页模板 (`list_article.htm`)

详情页模板 (`article_article.htm`)

第三步：创建和配置视频内容的附加表

第四步：在后台发布视频内容

第五步：前台页面测试

常见问题与优化

相关文章

目录[+]

第一步：准备工作（下载并放置 CKPlayer 文件）

第二步：修改织梦模板文件（核心步骤）

修改栏目列表页模板 (list_article.htm)

详情页模板 (article_article.htm)

第三步：创建和配置视频内容的附加表

第四步：在后台发布视频内容

第五步：前台页面测试

常见问题与优化

相关文章

目录[+]

修改栏目列表页模板 (`list_article.htm`)

详情页模板 (`article_article.htm`)