npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cc-player

v1.0.2

Published

对 CC 视频播放器的二次封装,提供一些常用的 API 接口,方便使用

Downloads

5

Readme

CC Player

对 CC 视频播放器的二次封装,提供一些常用的 API 接口,方便使用

主要功能

  • 支持通过视频 ID 来播放视频
  • 支持监听播放器事件
  • 支持调用 CC 视频原生播放器的方法

如何安装

1. 使用 npm 安装(推荐)

npm install cc-player --save

2. 通过 <script> 直接引用

<script src="path/to/cc-player.min.js"></script>

使用方法

// 通过 npm 安装的方式
var CCPlayer = require('cc-player');
var player = CCPlayer.init('#video-container', {
    width: 600,
    height: 400
});

player.play(vid);
// 通过直接引用的方式会在 `window` 上添加一个变量 `CCPlayer`
// 直接使用该变量即可。
var player = CCPlayer.init('#video-container', {
    width: 600,
    height: 400
});

player.play(vid);

API 文档

CCPlayer.init(container, options)

初始化一个视频播放器。

参数:

  • container (DOMElement|jQuery|string): 必填。播放器的容器,可以是一个 DOM 节点元素,可以是一个 jQuery 的对象, 也可以是一个 DOM 选择器。
  • options (object): 必选。播放器的配置选项,请至少提供 siteid,否则导致移动端错误
    • siteid: 必选,站点 id,但是建议配置成各自的 siteid,有利于 CC 视频的统计播放信息
    • playerid: 可选,播放器的皮肤类型,请根据自身需要进行设置
    • width: 可选,视频宽度,默认是 auto
    • height: 可选,视频高度,默认是 auto
    • playertype: 可选,暂不确定代表什么意思,默认值是 1
    • autoStart: 可选,是否自动播放,默认值是 false
    • vid: 可选,视频的 id,默认为空

返回值:

播放器的实例。

player.play(vid)

加载视频。

参数:

  • vid (string): 可选,如果设置了 vid,则播放 id 为 vid 的视频,如果没有指定 vid,则 根据 init(container, options)options 配置的 vid 来加载视频

返回值:

播放器的实例。

player.on(eventName, handler)

给播放器添加事件处理函数。具体支持的事件请参考下面的事件列表

player.start()

开始播放

player.pause()

暂停播放

player.resume()

恢复播放

player.seek(time)

定位至指定时间,参数 time(单位:秒)

player.getDuration()

获取视频片长(单位:秒)

player.getPosition()

获取当前播放时间(单位:秒)

player.getQualities()

获取当前视频可⽤清晰度列表

返回类型:Array

eg. [{ value: "0", label: "普通" }, { value: "1", label: "清晰" }]

player.setQuality(quality)

设置清晰度

参数 qualitygetQualities 方法获取的 value

player.setVolume(volume)

设置音量

参数 volume 取值范围:[0-1]. eg. setVolume(0.5)

player.normalScreen()

退出全屏

player.setConfig(config)

配置播放器

参数 config 为配置对象,详细参照播放器配置

player.getSWF()

获取播放器的 flash object 对象

事件列表

ready

播放器准备就绪后触发的事件

start

开始播放时触发的事件

pause

暂停播放时触发的事件

resume

暂停后继续播放时触发的事件

stop

播放结束后触发的事件

seek

拖动播放时触发的事件。

事件处理函数的参数为 from, to

  • from: 定位之前的时间点(单位 秒)
  • to: 定位指定的时间点(单位 秒)

buffering

缓冲开始或结束时触发的事件

事件处理函数的参数:flag

flag,是否缓冲中; 取值:0, 否;1, 是

setquality

清晰度改变时触发的事件

事件处理函数的参数:quality

quality,当前清晰度;取值:0, 普通;1, 清晰;2, 高清

volumechange

音量改变时触发的事件

事件处理函数的参数:vol

vol,当前音量;取值范围:0 - 1

playerror

当播放失败时的触发的事件

事件处理函数的参数:code

错误码

fullscreen

全屏或退出全屏时触发的事件

事件处理函数的参数:flag

flag,是否全屏;取值:0, 否;1, 是

CHANGELOG

LICENSE

MIT