ckplayer广告使用教程-建站教程-锦华智联科技

CKplayer 广告使用教程

CKplayer 的广告系统主要通过其配置文件（通常是 ckplayer.xml 或在初始化时传入的 config 对象）中的 flashvars 参数来控制，下面我们分步讲解。

（图片来源网络，侵删）

第一步：理解核心概念

在开始配置之前,你需要了解几个核心参数：

advertising: 这是配置广告的主节点，所有的广告设置都在这个对象里。
ad: 这是单个广告的配置节点，一个 advertising 对象里可以包含多个 ad 节点，用于实现广告的顺序播放。
type: 定义广告的类型，CKplayer 支持多种类型，最常见的有：
- video: 视频贴片广告（前贴片、中插、后贴片）。
- image: 图片广告（如暂停广告、角标广告）。
- swf: Flash 广告（较少使用，因为 Flash 已被淘汰）。
- text: 文字广告（如跑马灯）。
time: 定义广告的时间点，这个参数对于不同类型的广告含义不同：
- 对于 video 贴片广告，time 通常表示 0（前贴片）、视频时长的一半（中插）或 -1（后贴片）。
- 对于 image 图片广告，time 表示广告显示的视频时间点（在视频的第 10 秒显示）。
source: 广告内容的地址，可以是视频文件的 URL、图片的 URL、SWF 文件的 URL 或文字内容。
clickUrl: 点击广告后跳转的链接地址。
duration: 广告的持续时间（单位：秒），对于视频广告，通常是视频自身的长度；对于图片广告，是你希望它显示多少秒。

第二步：基础配置 - 视频贴片广告

贴片广告是最常用的一种,我们以配置一个前贴片广告为例。

假设你的视频地址是 my_video.mp4，广告视频地址是 my_ad.mp4。

通过 ckplayer.xml 配置文件

（图片来源网络，侵删）

在你的 ckplayer.xml 文件中，找到 flashvars 配置项，修改如下：

<flashvars>
    <!-- ... 其他配置 ... -->
    <advertising>
        <!-- 这是一个前贴片广告 -->
        <ad type="video" source="http://www.yourdomain.com/ads/my_ad.mp4" time="0" duration="15" clickUrl="http://www.advertiser.com" />
    </advertising>
    <!-- ... 其他配置 ... -->
</flashvars>

参数解释：

type="video": 定义这是一个视频广告。
source="http://www.yourdomain.com/ads/my_ad.mp4": 广告视频的 URL。
time="0": 在视频开始播放（0秒）时播放此广告。
duration="15": 广告预计持续15秒（如果广告视频本身长度小于15秒，则播放完即结束；如果大于，则只播放15秒）。
clickUrl="http://www.advertiser.com": 点击广告后跳转的链接。

通过 JavaScript 初始化时配置

如果你在 JS 中初始化播放器，可以这样写：

var videoObject = {
    container: '#video', // 播放器容器的ID
    variable: 'player', // 播放器实例的名称
    video: 'my_video.mp4', // 主视频地址
    advertising: {
        ad: [
            {
                type: 'video',
                source: 'http://www.yourdomain.com/ads/my_ad.mp4',
                time: 0,
                duration: 15,
                clickUrl: 'http://www.advertiser.com'
            }
        ]
    }
};
var player = new ckplayer(videoObject);

第三步：进阶配置 - 多个广告组合

CKplayer 可以在一个播放器中配置多个不同类型的广告，我们想同时实现：

一个前贴片视频广告。
一个在视频暂停时显示的图片广告。

配置示例 (JS方式):

var videoObject = {
    container: '#video',
    variable: 'player',
    video: 'my_video.mp4',
    advertising: {
        ad: [
            // 广告1：前贴片视频广告
            {
                type: 'video',
                source: 'http://www.yourdomain.com/ads/my_ad_pre.mp4',
                time: 0,
                duration: 10,
                clickUrl: 'http://www.advertiser1.com'
            },
            // 广告2：暂停时的图片广告
            {
                type: 'image',
                source: 'http://www.yourdomain.com/ads/pause_ad.png',
                time: 'pause', // 使用 'pause' 关键字表示在暂停时显示
                duration: 999, // 设置一个很大的时间，让它一直显示直到恢复播放
                clickUrl: 'http://www.advertiser2.com',
                style: 'position: absolute; bottom: 10px; right: 10px; width: 150px;' // 可选：自定义图片样式
            }
        ]
    }
};
var player = new ckplayer(videoObject);

参数解释：

time: 'pause': 这是 CKplayer 的一个特殊值，用于触发暂停广告。
style: 可选参数，可以用来定位和调整图片广告的大小和位置，非常灵活。

第四步：其他常见广告类型

后贴片广告

只需将 time 的值设为 -1。

advertising: {
    ad: [
        {
            type: 'video',
            source: 'http://www.yourdomain.com/ads/my_ad_post.mp4',
            time: -1, // -1 表示在视频播放结束后播放
            duration: 15,
            clickUrl: 'http://www.advertiser.com'
        }
    ]
}

角标/浮动图片广告

在视频播放过程中,某个时间点开始显示一个浮动的图片。

advertising: {
    ad: [
        {
            type: 'image',
            source: 'http://www.yourdomain.com/ads/corner_ad.png',
            time: 5, // 在视频开始后5秒显示
            duration: 30, // 显示30秒后自动消失
            style: 'position: absolute; top: 20px; left: 20px; width: 100px; z-index: 100;' // 定位在左上角
        }
    ]
}

中插广告

在视频播放到一半时插入广告。time 的值可以是秒数，也可以是百分比。

advertising: {
    ad: [
        {
            type: 'video',
            source: 'http://www.yourdomain.com/ads/my_ad_mid.mp4',
            time: '50%', // 在视频播放到50%时插入
            duration: 15,
            clickUrl: 'http://www.advertiser.com'
        }
    ]
}

第五步：广告事件与回调

为了让广告体验更完整,你通常需要监听广告的相关事件，例如广告开始、广告结束、用户点击广告等，这可以通过 adfrontad 等事件实现。

常用事件：

adfrontad: 贴片广告开始播放时触发。
adplayerad: 贴片广告播放结束时触发。
adclick: 用户点击广告时触发。

事件监听示例：

// 在创建播放器实例后添加事件监听
player.addListener('adfrontad', function() {
    console.log('贴片广告开始播放了！');
    // 在这里可以暂停你的网页背景音乐等
});
player.addListener('adplayerad', function() {
    console.log('贴片广告播放结束！');
    // 在这里可以恢复你的网页背景音乐
});
player.addListener('adclick', function() {
    console.log('用户点击了广告，即将跳转...');
});

第六步：注意事项与最佳实践

广告地址（source）: 必须使用完整的、可公开访问的 URL（以 http:// 或 https:// 开头），不要使用相对路径。
duration 的重要性: 对于图片广告，duration 一定要设置，否则广告可能一闪而过，对于视频广告，duration 可以用来控制最长播放时间，防止用户等待过久。
移动端适配: CKplayer 在移动端对广告的支持可能略有不同，特别是 clickUrl，在移动端需要确保链接是可点击的，并且页面跳转符合移动端浏览习惯。
样式（style）: 对于 image 类型的广告，style 参数非常强大，可以精确控制其位置、大小和层级（z-index），善用它可以实现很多创意广告效果。
调试: 如果广告没有显示，请按以下顺序排查：
- 检查 source 地址是否正确，能否在浏览器中直接打开。
- 检查 time 值是否正确。
- 检查浏览器控制台是否有错误信息（如 404 错误）。
- 尝试简化配置,只保留一个最简单的广告，看是否能正常显示。

CKplayer 的广告功能虽然参数众多，但逻辑清晰，核心就是围绕 advertising -> ad -> type, source, time, duration 这几个关键点进行组合配置。

简单贴片: type="video", time="0" 或 -1。
暂停/角标广告: type="image", time="pause" 或一个具体秒数，并配合 style 定位。
复杂组合: 在 advertising.ad 数组中定义多个 ad 对象。
交互体验: 使用 addListener 监听广告事件，优化用户体验。

希望这份详细的教程能帮助你成功地在 CKplayer 中集成广告！