video-track-dxy

公司项目中 CC 视频打点,主要用于商业项目和 VS 项目中。

Usage no npm install needed!

<script type="module">
  import videoTrackDxy from 'https://cdn.skypack.dev/video-track-dxy';
</script>

README

video-track-dxy

公司项目中 CC 视频打点,主要用于商业项目和 VS 项目中。

功能

  • 兼容 PC 端和移动端
  • 支持页面上存在多个视频的情况
  • 支持动态加载视频的情况

限制

如果页面上有多个视频,当其中一个视频开始播放时,页面上所有的视频都会记录开始的第一个打点信息。 这在现阶段是没有办法避免的,因为按照 CC 视频的官方文档上的解释,所有的视频在播放时会调用同一个 回调函数 window.on_spark_player_start,在这个回调函数中没有办法区分是哪一个视频调用的该回调 函数。

如何安装

使用 npm (推荐)

npm i video-track-dxy --save

使用 $.getScript() 动态引入

var js = 'http://assets.dxycdn.com/templates/core/third-party/video-track/video-track.min.js';
$.getScript(js, function () {
    // 这里可以使用 VideoTrack
});

使用方法

商业项目中

该模块内置了商业项目中视频打点的处理方式,以简化调用。请注意控制台输出的内容,以确认视频打点是否 成功(打点失败时会有红色的信息输出)。具体用法如下:

var VideoTrack = require('video-track-dxy');
VideoTrack.log('biz');

其他项目中

var VideoTrack = require('video-track-dxy');
var interval = 3 * 1000; // ms
var logger = function (data, video) {
    // 每隔 interval 的时间会执行这里面的代码,可以在此处进行数据保存等操作,如:

    console.log(data, video);
    $.post('path/to/api', data);
};

VideoTrack.log(logger, interval);

API

VideoTrack.log()

可以通过以下方式调用 log 方法:

  1. VideoTrack.log('biz'): 商业项目中最简单的调用方式
  2. VideoTrack.log('biz', 1000): 商业项目中的调用方式,但是指定了 interval,默认是 3000
  3. VideoTrack.log('biz', function (data, video) { }, /* 1000 */): 商业项目中的调用方式,自定义了 logger,用于 将数据保存到其他地方等,interval 是可选的。
  4. VideoTrack.log(function (data, video) { }, /* 1000 */): 其他项目中的调用方式,用于自定义数据的保存方法, interval 是可选的。

如何开发

  1. Clone 本项目
  2. 修改 src/index.js
  3. 运行 npm run dist
  4. 更新模块版本,并将最新的代码发布到 npm。
  5. 复制 dist/*.jssvnassets/templates/core/third-party/video-track/ 目录下替换掉原文件,并提交发布掉。

CHANGELOG

LICENSE

MIT