织梦首页如何调用ckplayer？-织梦建站-盈思创科技

直接调用单个视频文件（最简单）

这种方法适用于在你的首页某个位置（如焦点图下方、内容列表上方）播放一个固定的视频文件。

（图片来源网络，侵删）

核心思路：

准备文件：下载ckplayer并上传到你的网站服务器。
准备视频：将你的视频文件（如.mp4, .flv）也上传到服务器。
修改模板：在首页模板文件中，使用{dede:arclist}或直接写HTML的方式，嵌入ckplayer的调用代码。

详细步骤：

第1步：下载并上传ckplayer

下载ckplayer：访问ckplayer官网下载最新版，通常你会得到一个包含 ckplayer.js、ckplayer.swf 和一些皮肤文件（如 ckplayer.skin）的压缩包。
上传到服务器：在你的网站根目录（）下创建一个名为 ckplayer 的文件夹，然后将下载的文件（特别是 ckplayer.js 和 ckplayer.swf）上传到这个文件夹中。

你的网站目录结构会是这样：
```
/wwwroot/  <-- 你的网站根目录
/ckplayer/
    /ckplayer.js
    /ckplayer.swf
    /... (其他皮肤文件)
/templets/
/dede/
/...
```

第2步：准备视频文件

将你想要在首页播放的视频文件（my-video.mp4）上传到网站的某个目录，/uploads/video/。

（图片来源网络，侵删）

第3步：修改首页模板

登录织梦后台,进入【模板】->【默认模板管理】。
找到并点击你当前正在使用的首页模板（通常是 index.htm）。

在模板代码中,你希望显示视频播放器的位置，插入以下代码。

代码示例：

（图片来源网络，侵删）

<div class="video-box" style="width: 800px; height: 450px; margin: 0 auto;">
    <!-- ckplayer容器，必须设置宽高 -->
    <div id="video" style="width:100%; height:100%;"></div>
    <!-- 引入ckplayer.js -->
    <script type="text/javascript" src="/ckplayer/ckplayer.js"></script>
    <script type="text/javascript">
        // 定义视频地址
        var flashvars = {
            f: '/uploads/video/my-video.mp4', // 视频文件地址，可以是相对路径或绝对路径
            c: 0, // 0=不调用 ckplayer.js 的配置，1=调用 ckplayer.js 的配置
            s: 4, // 4=调用ckplayer.js的配置项中的s配置项，即皮肤配置
            p: 1  // 1=自动播放
        };
        // 定义播放器配置
        var params = {
            bgcolor: '#000',
            allowFullScreen: true,
            allowScriptAccess: 'always',
            wmode: 'transparent'
        };
        // 初始化播放器
        // 'video' 是上面div的id
        // flashvars 是配置对象
        // 'ckplayer/ckplayer.swf' 是播放器swf文件路径
        // params 是播放器参数
        var videoObject = {
            container: '#video', // 播放器容器的ID（必须是字符串）
            variable: 'player', // 播放器实例的名称（必须是字符串）
            flashvars: flashvars,
            video: 'http://img.ksbbs.com/asset/2025/11/25/173604z6wz666sw66sw6w.mp4' // 也可以直接在这里写视频地址，但flashvars方式更灵活
        };
        // 创建播放器实例
        var player = new ckplayer(videoObject);
    </script>
</div>

代码解释：

<div id="video">...</div>：这是播放器将被渲染的容器，必须设置宽度和高度。
src="/ckplayer/ckplayer.js"：引入ckplayer的核心JS文件。
flashvars 对象：这是配置ckplayer的核心，你可以在这里设置视频地址、是否自动播放、皮肤等。
- f: 视频文件路径，这里填写你上传的视频文件的路径。
- c: 0或1，决定是否使用ckplayer.js里的默认配置。
- s: 皮肤ID，4代表使用它自带的皮肤。
- p: 是否自动播放，1是，0否。
params 对象：一些播放器的常规参数，如全屏、脚本访问等。
videoObject 对象：这是新版ckplayer推荐的初始化方式，它整合了所有配置。
- container: 指定播放器挂载的DOM元素的ID。
- variable: 创建的播放器实例的变量名。
- flashvars: 将上面的flashvars对象传入。
- video: 你也可以直接在这里写视频地址，但如果想灵活控制，使用flashvars.f更好。
new ckplayer(videoObject): 执行这行代码后，播放器就会被创建并渲染到#video容器中。

保存模板,然后到后台【生成】->【更新主页】，刷新你的网站首页，就能看到视频播放器了。

调用指定文章中的视频（更灵活、更常用）

这种方法非常适合制作“视频头条”或“视频推荐”模块，你只需要在后台发布文章时，把视频作为文章内容或自定义字段上传，首页就会自动调用最新的几篇文章中的视频。

核心思路：

创建模型和字段：在后台创建一个新的文章模型，并添加一个“视频地址”的自定义字段。
发布文章：发布文章时，填写好标题、内容，并在“视频地址”字段中填入ckplayer能识别的视频地址。
修改首页模板：使用{dede:arclist}标签，循环调用带有视频地址的文章，并在循环体内嵌入ckplayer的调用代码。

详细步骤：

第1步：创建自定义字段

登录织梦后台,进入【核心】->【内容模型管理】。
点击【增加一个新模型】，模型名称填写“视频文章”，模型表前缀保持默认，选择“普通文章”，然后提交。
进入【频道模型】->【内容模型管理】，点击你刚刚创建的“视频文章”后面的【管理字段】。
点击【增加新字段】。
- 字段名称: video_url (必须为英文小写)
- 字段说明: 视频地址
- 字段类型: 单行文本
- 前台勾选: 是 (让这个字段在前台发布文章时可见)
- 后台增加: 是
- 信息填写时: 显示为表单元素
- 是否显示在发布页: 是
- 其他选项保持默认。
保存后,去【系统】->【系统基本参数】->【核心设置】，将“默认内容模型”改为你的“视频文章”。
去后台发布一篇文章,你会发现多了一个“视频地址”的输入框，将你的视频文件路径（如 /uploads/video/another-video.mp4）填写进去。

第2步：修改首页模板

我们使用{dede:arclist}来调用这些文章。

<div class="video-list">
    <h2>视频推荐</h2>
    {dede:arclist row='3' titlelen='30' typeid='1' addfields='video_url'}
        <div class="video-item" style="float: left; margin-right: 20px; width: 260px;">
            <!-- 播放器容器 -->
            <div id="video-[field:id/]" style="width: 260px; height: 146px;"></div>
            <!-- 引入ckplayer.js (建议放在head或body底部，避免重复引入) -->
            <script type="text/javascript" src="/ckplayer/ckplayer.js"></script>
            <script type="text/javascript">
                // 为每个播放器创建独立的配置
                var flashvars_[field:id/] = {
                    f: '[field:video_url/]', // 使用自定义字段中的视频地址
                    c: 0,
                    s: 4,
                    p: 0 // 这里设置为不自动播放，避免页面加载时多个声音
                };
                var videoObject_[field:id/] = {
                    container: '#video-[field:id/]', // 使用唯一的ID
                    variable: 'player_[field:id/]', // 使用唯一的变量名
                    flashvars: flashvars_[field:id/]
                };
                // 创建播放器实例
                var player_[field:id/] = new ckplayer(videoObject_[field:id/]);
            </script>
            <!-- 文章标题 -->
            <div style="margin-top: 10px;">
                <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
            </div>
        </div>
    {/dede:arclist}
</div>

代码解释：

{dede:arclist ...}: 这是织梦的核心循环标签。
- row='3': 调用3篇文章。
- addfields='video_url': 关键！ 指定要获取的自定义字段。
- [field:video_url/]: 在循环中调用自定义字段的值。
- [field:id/]: 调用文章的ID，我们用它来为每个播放器创建唯一的ID和变量名，防止冲突。
id="video-[field:id/]": 为每个播放器容器设置一个唯一的ID，如 video-1, video-2...
var flashvars_[field:id/]: 使用唯一的变量名（如 flashvars_1, flashvars_2）来存储每个播放器的配置。
var player_[field:id/]: 同样，使用唯一的变量名来存储播放器实例。

第3步：更新首页

保存模板,到后台【生成】->【更新主页】，刷新首页，你就会看到调用出的3篇文章，每篇文章下面都带有一个ckplayer播放器。

总结与注意事项

路径问题：所有路径（ckplayer.js、ckplayer.swf、视频文件）请务必使用相对于网站根目录的路径（如 /ckplayer/...）或绝对路径，以确保在任何页面都能正确加载。
唯一性：当在同一个页面上调用多个ckplayer时，必须为每个播放器的容器ID、配置变量、实例变量都使用唯一的名称（如[field:id/]），否则会互相冲突导致播放失败。
性能：首页不要放置过多的视频播放器，这会严重影响页面加载速度和服务器性能，建议只调用1-3个。
移动端适配：ckplayer默认是PC端的，如果需要移动端适配，需要使用它的HTML5模式，或者寻找其他移动端兼容性更好的播放器（如DPlayer），ckplayer的配置中可以通过设置 a 参数来切换HTML5和Flash模式。
视频格式：推荐使用 mp4 (H.264编码) 格式，这是目前兼容性最好的格式。

希望这份详细的教程能帮助你成功在织梦首页调用ckplayer！

织梦首页如何调用ckplayer？

直接调用单个视频文件（最简单）

核心思路：

详细步骤：

第1步：下载并上传ckplayer

第2步：准备视频文件

第3步：修改首页模板

代码解释：

调用指定文章中的视频（更灵活、更常用）

核心思路：

详细步骤：

第1步：创建自定义字段

第2步：修改首页模板

代码解释：

第3步：更新首页

总结与注意事项

相关文章

目录[+]