百度旗下WEB播放器Cyberplayer，接口丰富广告功能强大

Cyberplayer简介

百度云旗下的web播放器Cyberplayer，基于国外某款著名web播放器开发，支持MP4、HLS、FLV等主流视频协议及各种终端浏览器，Cyberplayer的主要特色功能就是可以用自身参数添加播放前、暂停时、播放结束后等等贴片广告，就连控制栏也能加上logo和logo链接，甚至可以用自身参数给视频加上土味的跑马灯，在视频上来回滚动，可以说是非常的百度风了。当然Cyberplayer播放器的主要使命还是对接百度云存储，使用百度云存储的CDN加密播放视频数据等服务！

Cyberplayer Demo

百度云旗下的web播放器Cyberplayer，基于国外某款著名web播放器开发，支持MP4、HLS、FLV等主流视频协议及各种终端浏览器，Cyberplayer的主要特色功能就是可以用自身参数添加播放前、暂停时、播放结束后等等贴片广告，就连控制栏也能加上logo和logo链接，甚至可以用自身参数给视频加上土味的跑马灯，在视频上来回滚动，可以说是非常的百度风了。当然Cyberplayer播放器的主要使命还是对接百度云存储，使用百度云存储的CDN加密播放视频数据等服务！

Demo HTML

<script type="text/JavaScript" src="js/HLS.min.js"></script><script type="text/JavaScript" src="js/cyberplayer.js"></script><div id="player"></div>

Demo JS

var player = cyberplayer("player").setup({    width: "100%",//宽度    height: "100%",//高度    title: "",//视频标题    file: "https://xxx.com/2023/index.M3U8", // 视频地址    image: "http://cyberplayer.bcelive.com/thumbnail.jpg", // 视频封面    autostart: false,//自动播放    stretching: "uniform",// 拉伸设置    volume: 100,//音量    repeat: false,//循环播放    starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播    primary: "HTML5",// primary: "flash", // 强制使用flash来播放，不设置的话则默认高优使用H5进行播放    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数    controls: true,//控制栏    playRate: true, // 默认H5播放器有倍速功能，如不需要，可以设置为false    playRateConfig: [// 可配置倍速值数组，格式如下所示        {label: "×1"},        {label: "×2"},        {label: "×3"},        {label: "×4"},    ],    rightclick: [ // 右键配置        {            title: "标题1", // 标题1            link: "/" // 跳转链接        },        {            title: "标题2",            link: "/"        }    ],    marquee: { // 跑马灯设置（IE9及以下不支持）        show: true, // 显示与否        text: "十八码18ma.cn - 百度WEB播放器Demo", // 文案        fontSize: 20, // 字体大小        color: "#FFFFFF" // 字体颜色    },});

Cyberplayer 参数

    width: "100%",//宽度    height: "100%",//高度    title: "",//视频标题    file: "<?PHP echo $data['url']?>", // 视频地址    image: "http://cyberplayer.bcelive.com/thumbnail.jpg", // 视频封面    autostart: false,//自动播放    stretching: "uniform",// 拉伸设置    volume: 100,//音量    repeat: false,//循环播放    starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播    primary: "HTML5",// primary: "flash", // 强制使用flash来播放，不设置的话则默认高优使用H5进行播放    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数    controls: true,//控制栏    controlbar: {        barLogo: true, // 进度条上的logo显示与否,默认true        barLogoUrl: "https://www.baidu.com/", // 进度条上的logo的跳转地址可配置        canDrag: true, // 进度条是否允许拖动,默认true    },    skin: {        name: "bce", // 默认皮肤-bce，其他可选项有beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor        background: "#108cee", // 背景色设置        inactive: "#FFF", // 未激活时的颜色        active: "red", // 悬浮或激活的严责    },    logo: { // logo设置        linktarget: "_blank",        margin: 8,        hide: false,        position: "top-right", // 位置        file: "./img/logo.png" // 图片地址    },    playRate: true, // 默认H5播放器有倍速功能，如不需要，可以设置为false    playRateConfig: [// 可配置倍速值数组，格式如下所示        {label: "×1"},        {label: "×2"},        {label: "×3"},        {label: "×4"},    ],    rightclick: [ // 右键配置        {            title: "标题1", // 标题1            link: "/" // 跳转链接        },        {            title: "标题2",            link: "/"        }    ],    imageAdvs: { // 图片广告，低版本IE不支持        start: { // 开场广告            image: "http://cyberplayer.bcelive.com/thumbnail.jpg", // 广告图片地址            url: "/", // 跳转url            time: 3 // 播放时长，单位：s        },        pause: { // 暂停广告            image: "https://bce.bdstatic.com/portal/img/product/lss/banner_117d201d.png",            url: "/"        },        end: { // 结束广告            image: "https://bce.bdstatic.com/portal/img/solution/video_ai/title_1aea461b.png",            url: "/"        }    },    marquee: { // 跑马灯设置（IE9及以下不支持）        show: true, // 显示与否        text: "十八码18ma.cn - 百度WEB播放器Demo", // 文案        fontSize: 20, // 字体大小        color: "#FFFFFF" // 字体颜色    },

Cyberplayer API

<script type="text/javascript">    1、基本动作    加载视频：player.load({file: "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4"});    播放视频：player.play();    暂停视频：player.pause();    停止视频：player.stop();    跳转视频：player.seek(10); // 参数：第几秒    修改屏幕大小：player.resize(600, 400); // 参数1：宽度，参数2：高度    播放下一个视频：var item = myPlayer.playlistNext(); // 仅当配置了playlist时生效，并可得到下一个视频    播放上一个视频：var item = myPlayer.playlistPrev(); // 仅当配置了playlist时生效，并可得到上一个视频    注销播放器: player.remove();    播放指定的播放条目，并返回该对象，从0计数: var item = myPlayer.playlistItem(2);    2、getter    获取当前播放视频的总时长：var duration = player.getDuration();    获取当前时候是全屏状态：var isFullscreen = player.getFullscreen();    获取当前播放器展现宽度：var width = player.getWidth();    获取当前播放器展现高度：var height = player.getHeight();    获取当前播放视频的元数据(包括时长和视频宽高)：var meta = player.getMeta();    获取当前是否处于静音状态：var isMute = player.getMute();    获取当前播放倍速：var playbackRate = player.getPlaybackRate();    获取当前播放倍速：var playbackRate = player.getPlaybackRate();    获取当前播放列表: var playlist = player.getPlaylist();    获取当前播放视频在playlist中的索引：var playlistIndex = player.getPlaylistIndex();    获取当前播放的视频对象：var playlistItem = player.getPlaylistItem();    获取当前播放的视频的播放位置：var position = player.getPosition();    获取当前播放器类别（HTML5 or Videojs or flash）：var provider = player.getProvider();    获取当前视频的所有码率: var qualityLevels = myPlayer.getQualityLevels();    获取当前播放器状态({"playing"、"paused"、"idle"、"buffering"}): var state = myPlayer.getState();    获取当前播放的音量：var volume = player.getVolume();    获取视频缓冲比率,0-100: var buffer = player.getBuffer();    获取当前的所有配置项: var config = player.getConfig();    获取当前播放容器对象: var container = player.getContainer();    获取当前是否能存在controls: var isControl = player.getControls();    获取当前正在播放视频的码率索引，从0开始: var currentQuality = myPlayer.getCurrentQuality();    3、setter    设置播放器是否显示controlbar：player.setControls(false);    设置打点数据：player.setCues([        {begin: 9.5, end: 10.5, text: "我的信息1"},        {begin: 19.5, end: 20.5, text: "我的信息2"}    ]); // 详见“设置打点或缩略图”    设置播放某种码率的视频: myPlayer.setCurrentQuality(1);    设置当前播放器是否全屏: player.setFullscreen(true);    设置当前播放器是否静音：player.setMute(true);    设置当前播放器播放速率：player.setPlaybackRate(2);    设置打点缩略图(要结合setCues使用)：player.setThumbnails(); // 详见“设置打点或缩略图”    设置Token: player.setToken(); // 使用方法详见“播放token加密视频”    设置当前播放器音量：player.setVolume(100);</script>

Cyberplayer 监听

<script type="text/javascript">    onBeforeComplete: 结束播放之前的监听函数    onBeforePlay: 开始播放之前的监听函数    onBuffer: 开始缓冲的监听函数    onBufferChange: 缓冲区变化的监听函数（缓冲了更多视频时激活），可以获得到现在缓冲百分比    onBufferFull: 缓冲区满了之后监听函数    onCaptionsChange: 字幕改变后的监听函数    onCaptionsList: 字幕加载成功的监听函数    onComplete: 视频播放完成后的监听函数    onDisplayClick: 用户点击播放区域后的监听函数    onError: 播放器出错的监听函数    onFullscreen: 全屏的监听函数    onIdle: 状态变成空闲（idle）后的监听函数    onMute: 静音事件监听函数    onPause: 暂停事件监听函数    onPlay: 播放事件监听函数    onPlaylist: 播放器播放列表接收函数    onPlaylistItem: 播放器当前播放条目变化监听函数    onQualityChange: 播放码率变化的监听函数    onQualityLevels: 视频码率的接收函数    onReady: 播放器初始化完成后的监听函数    onResize: 播放器大小改变后的监听函数    onSeek: 视频拖动后的监听函数    onSetupError: 播放器加载失败后的监听函数    onStop: 视频停止播放的监听函数    onTime: 视频播放时间点实时变换的监听函数    onVolume: 音量改变后的监听函数    onAlive: 监听直播流的状态，有直播流时触发    onNoLiveStream: 监听直播流的状态，无直播流时触发</script>