Shaka Player 播放器
从 2025 年 1 月 1 日起，云视睿博流媒体服务器采用 Shaka Player 作为默认播放器， 为客户提供更稳定高效的播放体验。早期的播放器版本将继续提供技术支持，并协助客户升级到 Shaka Player。
好用的播放器
Shaka Player 是 Google 开源的纯 JavaScript 库，用于在网页上播放自适应媒体格式（如 DASH 和 HLS）。 它无需安装插件，完全基于现代浏览器标准构建，提供稳定、高效的播放体验。
完美拍档
快速集成 — 云视睿博流媒体服务器的播出地址可以直接在 Shaka Player 中播放，无需任何特殊配置。
开箱即用 — 流媒体服务器默认打包 Shaka Player 播放器，开箱即用。
完整兼容 — 完整兼容流媒体服务器输出的点播和直播流，包括HLS、MP4等。
性能优化 — 针对服务器特性做针对性配置优化，提供更低的延迟和更流畅的播放体验。
功能特征
多格式支持
支持 DASH、HLS、MSS 等多种自适应流媒体格式，兼容 MP4、WebM 等常见容器格式。
DRM 保护
内置 Widevine、PlayReady、FairPlay 等主流 DRM 系统支持，保护内容安全。
自适应码率
智能 ABR 算法，根据网络状况自动调整视频质量，确保流畅播放体验。
跨浏览器兼容
在 Chrome、Firefox、Safari、Edge 等主流浏览器上均有良好的播放性能。
字幕支持
支持 WebVTT、TTML 等多种字幕格式，可自定义字幕样式和位置。
易于集成
简洁的 API 设计，丰富的配置选项，可快速集成到现有项目中。
浏览器适配
Shaka Player 基于现代 Web 标准构建，无需任何插件即可在主流浏览器上运行。 以下是推荐的浏览器环境：
集成方式
Shaka Player 提供多种集成方式，您可以根据项目需求选择最适合的方案。
引入 Shaka Player 库
通过 CDN 或本地文件引入 Shaka Player 库
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.9/shaka-player.ui.min.js"></script>
<!-- 方式二：本地文件 -->
<script src="./js/shaka-player.ui.min.js"></script>
添加视频元素和 UI 容器
在 HTML 中添加 video 元素和 UI 容器
<video data-shaka-player autoplay></video>
</div>
初始化播放器
创建 Player 实例并加载媒体资源
async function initPlayer() {
const video = document.querySelector('video');
const player = new shaka.Player(video);
player.addEventListener('error', onErrorEvent);
try {
await player.load('https://example.com/stream/manifest.mpd');
console.log('播放器初始化成功!');
} catch (e) {
console.error('加载失败', e);
}
}
</script>
配置播放器选项
根据需求自定义播放器配置
const config = {
streaming: {
rebufferingGoal: 2,
bufferingGoal: 30
},
abr: { enabled: true },
preferredAudioLanguage: 'zh-CN',
preferredTextLanguage: 'zh-CN'
};
player.configure(config);
</script>
快速示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shaka Player 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.9/shaka-player.ui.min.js"></script>
</head>
<body>
<div data-shaka-player-container style="max-width: 800px;">
<video data-shaka-player autoplay></video>
</div>
<script>
async function init() {
const player = new shaka.Player(document.querySelector('video'));
await player.load('https://example.com/manifest.mpd');
}
init();
</script>
</body>
</html>