文章最后更新时间：2024年05月17日
Cyberplayer简介
百度云旗下的web播放器Cyberplayer，基于国外某款著名web播放器开发，支持MP4、HLS、FLV等主流视频协议及各种终端浏览器，Cyberplayer的主要特色功能就是可以用自身参数添加播放前、暂停时、播放结束后等等贴片广告，就连控制栏也能加上logo和logo链接，甚至可以用自身参数给视频加上土味的跑马灯，在视频上来回滚动，可以说是非常的百度风了。当然Cyberplayer播放器的主要使命还是对接百度云存储，使用百度云存储的CDN加密播放视频数据等服务！
Cyberplayer Demo
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>
Cyberplayer 下载
此处为隐藏内容，请评论后查看隐藏内容，谢谢！
文章版权声明：除非注明，否则均为十八码原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...