Shaka PlayerHLS DRM 播放实战【免费下载链接】shaka-playerJavaScript player library / DASH HLS client / MSE-EME player项目地址: https://gitcode.com/GitHub_Trending/sh/shaka-player产品工单上写着同一路 HLS 流要在 Android Chrome 和 macOS Safari 上都能播还要出 DRM 加密版和离线下载版Shaka Player 就是干这个的一个跑在浏览器里的自适应流播放客户端用 MSE 喂数据、用 EME 管 DRM不需要插件。它不做服务端转码也不替代 CDN你的源流必须是 HLS 或 DASH。下面直接说选型要看什么、哪里不能用然后给你一条最短可运行路径。选型判断Shaka Player 是什么、不是什么一句话定义Shaka Player 是一个开源Apache-2.0Google 出品的浏览器端 DASH/HLS 客户端库解析清单、拉取分片、喂给 MediaSource再用 EME 完成密钥会话纯 Web 标准实现。选型维度Shaka Player 给到什么自适应格式DASHVOD/直播/动态 VOD、HLSVOD/直播/事件含 LL-HLS 部分分片DRMWidevine、PlayReady、ClearKeyFairPlay 仅 Safari 可用平台覆盖Windows/macOS/Linux/Android 的 Chrome、Edge、FirefoxmacOS Safari 17.1 与 iOS 17.1Tizen、WebOS 等电视端离线能力基于 IndexedDB 的存储与回播许可证存储取决于浏览器支持它不做的事也要清楚没有服务端转码没有内置 CDNUI 控件栏在包里是单独产物shaka-player.ui.compiled.js要用得自己引。如果你的源流是裸 RTMP 或 .flv先在链路上把它封装成 HLS/DASH这不是播放器能兜底的。最短路径装包、挂 video、load 一个 HLS 地址先看装包编译产物直接躺在 npm 包里npm install shaka-player # node_modules/shaka-player/dist/shaka-player.compiled.js 就是浏览器单文件构建装完你会在node_modules/shaka-player/dist/拿到单文件构建HTML 直接引它。!DOCTYPE html html head script srcnode_modules/shaka-player/dist/shaka-player.compiled.js/script /head body !-- muted 是为了绕过浏览器自动播放策略验证阶段可以先静音 -- video idvideo controls autoplay muted stylewidth:100%;max-width:800px/video script srcapp.js/script /body /html这段 HTML 只负责挂 video 和引库全部逻辑在app.jsasync function init() { shaka.polyfill.installAll(); // 先补齐浏览器缺失的 API老内核必须有这步 const video document.getElementById(video); const player new shaka.Player(); window.player player; // 挂到 window方便控制台随时抓状态 await player.attach(video); // attach 是异步的必须在 load 之前 // 错误不只从 load 的 reject 来事件监听才是兜底 player.addEventListener(error, (e) { console.error(error code:, e.detail.code, e.detail); }); await player.load(https://YOUR_HLS_URL/stream.m3u8); } document.addEventListener(DOMContentLoaded, init);跑通后你应该看到几秒内 video 自动起播控制台执行player.getManifest()能拿到解析后的清单对象。跑不通先看这 3 个错误事件的 code 落在网络类控制台报 CORS——manifest 和分片是跨域请求服务端必须回Access-Control-Allow-Origin最省事是同源部署或加反向代理。页面是 HTTPS、HLS 地址是 HTTP——浏览器直接拦 mixed contentshaka 这边表现就是 load 卡住或报错换 HTTPS 地址。目标是 iOS/Safari 且版本低于 17.1——HLS 能播但走的是原生路径直接给 video 设 srcWidevine、ABR 这套能力是打折的功能矩阵要提前定。跑通之后会撞上的 3 个真实需求先把内部结构看一眼下面三个场景里出现的模块都在这张图里把加密流接上许可证服务器背景内容一加密DASH 里是 PSSH 盒HLS 里是EXT-X-KEY不配 DRM 的 Shaka 只会播明流。核心就一件事告诉它每个 key system 对应哪个许可证服务器。player.configure({ drm: { servers: { // key system ID - 许可证服务器 URL清单里认哪个就用哪个 com.widevine.alpha: https://YOUR_LICENSE_SERVER/widevine, com.microsoft.playready: https://YOUR_LICENSE_SERVER/playready, }, // 许可证服务器要鉴权就加头 licenseRequestHeaders: { Authorization: Bearer YOUR_TOKEN }, }, });确认生效播放时错误事件不触发Network 面板里能看到发往许可证服务器的请求且返回 200。若服务器不通或证书不对会抛 DRM 类的错误码具体对照以官方文档的错误码列表为准别猜。离线下载只保留 720p背景用户要下载后在断网环境看但你不想把 4 个 variant 全塞进用户磁盘。轨道选择完全由你的回调决定默认策略偏好音频 最佳标清 全部字幕不一定是你想要的。const storage new shaka.offline.Storage(player); storage.configure({ offline: { // variant 只留 720p 及以下音频和字幕轨道全保留 trackSelectionCallback: async (tracks) { return tracks.filter( (t) t.type ! variant || (t.height || 0) 720); }, progressCallback: (content, progress) { console.log(download progress:, progress); // 0~1 }, }, }); // store 返回一个唯一 id后续全靠它找回内容 const id await storage.store(https://YOUR_HLS_URL/stream.m3u8, { title: 离线演示 }); const content await storage.list(); // 数组每项含 id 与元数据确认生效控制台按 0~1 滚动输出进度storage.list()能列出刚存的内容。回播时把对应 id 的离线 URI 传给player.load完整写法见 offline 教程。一个诚实的边界DRM 内容的许可证会话信息能否离线存取决于浏览器支持不是所有平台都能下加密内容。把直播延迟压到 2 秒以内背景产品要求直播延迟 3 秒以内而你的流是 LL-HLS带EXT-X-PART、preload hints、delta 更新。注意这里有个前提延迟下限由流决定——如果源流只是普通 HLS无部分分片换任何播放器都压不出低于分片时长的延迟得先改流。// streaming.lowLatencyMode 默认就是 true这里显式写出来防被误改 player.configure({ streaming: { lowLatencyMode: true } });确认生效播放后调player.getStats()看直播延迟相关字段字段名以官方文档为准同时 Network 面板里应该看到 playlist 请求间隔明显缩短、开始出现 part 级别的分片请求。如果你看到的还是整段请求大概率是流本身没带 LL-HLS 标签。你现在该往哪走如果你的场景是纯 VOD 加字幕切换 → 先把上面的最短路径跑起来再看 basic-usage 教程 里轨道和字幕的切换方式现成控件栏看 demo 页 是怎么组的。如果你的场景是 DRM 加密内容 → 先读 DRM 配置教程许可证服务器鉴权另有一篇 license-server-auth 教程。如果你的场景是低延迟直播 → 先拿抓包确认流带不带EXT-X-PART带不进去的话这个项目解决不了你的延迟问题。你接下来大概率会想做的是把许可证服务器对起来让那条加密 demo 资产真正播起来。【免费下载链接】shaka-playerJavaScript player library / DASH HLS client / MSE-EME player项目地址: https://gitcode.com/GitHub_Trending/sh/shaka-player创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Shaka Player：HLS + DRM 播放实战
Shaka PlayerHLS DRM 播放实战【免费下载链接】shaka-playerJavaScript player library / DASH HLS client / MSE-EME player项目地址: https://gitcode.com/GitHub_Trending/sh/shaka-player产品工单上写着同一路 HLS 流要在 Android Chrome 和 macOS Safari 上都能播还要出 DRM 加密版和离线下载版Shaka Player 就是干这个的一个跑在浏览器里的自适应流播放客户端用 MSE 喂数据、用 EME 管 DRM不需要插件。它不做服务端转码也不替代 CDN你的源流必须是 HLS 或 DASH。下面直接说选型要看什么、哪里不能用然后给你一条最短可运行路径。选型判断Shaka Player 是什么、不是什么一句话定义Shaka Player 是一个开源Apache-2.0Google 出品的浏览器端 DASH/HLS 客户端库解析清单、拉取分片、喂给 MediaSource再用 EME 完成密钥会话纯 Web 标准实现。选型维度Shaka Player 给到什么自适应格式DASHVOD/直播/动态 VOD、HLSVOD/直播/事件含 LL-HLS 部分分片DRMWidevine、PlayReady、ClearKeyFairPlay 仅 Safari 可用平台覆盖Windows/macOS/Linux/Android 的 Chrome、Edge、FirefoxmacOS Safari 17.1 与 iOS 17.1Tizen、WebOS 等电视端离线能力基于 IndexedDB 的存储与回播许可证存储取决于浏览器支持它不做的事也要清楚没有服务端转码没有内置 CDNUI 控件栏在包里是单独产物shaka-player.ui.compiled.js要用得自己引。如果你的源流是裸 RTMP 或 .flv先在链路上把它封装成 HLS/DASH这不是播放器能兜底的。最短路径装包、挂 video、load 一个 HLS 地址先看装包编译产物直接躺在 npm 包里npm install shaka-player # node_modules/shaka-player/dist/shaka-player.compiled.js 就是浏览器单文件构建装完你会在node_modules/shaka-player/dist/拿到单文件构建HTML 直接引它。!DOCTYPE html html head script srcnode_modules/shaka-player/dist/shaka-player.compiled.js/script /head body !-- muted 是为了绕过浏览器自动播放策略验证阶段可以先静音 -- video idvideo controls autoplay muted stylewidth:100%;max-width:800px/video script srcapp.js/script /body /html这段 HTML 只负责挂 video 和引库全部逻辑在app.jsasync function init() { shaka.polyfill.installAll(); // 先补齐浏览器缺失的 API老内核必须有这步 const video document.getElementById(video); const player new shaka.Player(); window.player player; // 挂到 window方便控制台随时抓状态 await player.attach(video); // attach 是异步的必须在 load 之前 // 错误不只从 load 的 reject 来事件监听才是兜底 player.addEventListener(error, (e) { console.error(error code:, e.detail.code, e.detail); }); await player.load(https://YOUR_HLS_URL/stream.m3u8); } document.addEventListener(DOMContentLoaded, init);跑通后你应该看到几秒内 video 自动起播控制台执行player.getManifest()能拿到解析后的清单对象。跑不通先看这 3 个错误事件的 code 落在网络类控制台报 CORS——manifest 和分片是跨域请求服务端必须回Access-Control-Allow-Origin最省事是同源部署或加反向代理。页面是 HTTPS、HLS 地址是 HTTP——浏览器直接拦 mixed contentshaka 这边表现就是 load 卡住或报错换 HTTPS 地址。目标是 iOS/Safari 且版本低于 17.1——HLS 能播但走的是原生路径直接给 video 设 srcWidevine、ABR 这套能力是打折的功能矩阵要提前定。跑通之后会撞上的 3 个真实需求先把内部结构看一眼下面三个场景里出现的模块都在这张图里把加密流接上许可证服务器背景内容一加密DASH 里是 PSSH 盒HLS 里是EXT-X-KEY不配 DRM 的 Shaka 只会播明流。核心就一件事告诉它每个 key system 对应哪个许可证服务器。player.configure({ drm: { servers: { // key system ID - 许可证服务器 URL清单里认哪个就用哪个 com.widevine.alpha: https://YOUR_LICENSE_SERVER/widevine, com.microsoft.playready: https://YOUR_LICENSE_SERVER/playready, }, // 许可证服务器要鉴权就加头 licenseRequestHeaders: { Authorization: Bearer YOUR_TOKEN }, }, });确认生效播放时错误事件不触发Network 面板里能看到发往许可证服务器的请求且返回 200。若服务器不通或证书不对会抛 DRM 类的错误码具体对照以官方文档的错误码列表为准别猜。离线下载只保留 720p背景用户要下载后在断网环境看但你不想把 4 个 variant 全塞进用户磁盘。轨道选择完全由你的回调决定默认策略偏好音频 最佳标清 全部字幕不一定是你想要的。const storage new shaka.offline.Storage(player); storage.configure({ offline: { // variant 只留 720p 及以下音频和字幕轨道全保留 trackSelectionCallback: async (tracks) { return tracks.filter( (t) t.type ! variant || (t.height || 0) 720); }, progressCallback: (content, progress) { console.log(download progress:, progress); // 0~1 }, }, }); // store 返回一个唯一 id后续全靠它找回内容 const id await storage.store(https://YOUR_HLS_URL/stream.m3u8, { title: 离线演示 }); const content await storage.list(); // 数组每项含 id 与元数据确认生效控制台按 0~1 滚动输出进度storage.list()能列出刚存的内容。回播时把对应 id 的离线 URI 传给player.load完整写法见 offline 教程。一个诚实的边界DRM 内容的许可证会话信息能否离线存取决于浏览器支持不是所有平台都能下加密内容。把直播延迟压到 2 秒以内背景产品要求直播延迟 3 秒以内而你的流是 LL-HLS带EXT-X-PART、preload hints、delta 更新。注意这里有个前提延迟下限由流决定——如果源流只是普通 HLS无部分分片换任何播放器都压不出低于分片时长的延迟得先改流。// streaming.lowLatencyMode 默认就是 true这里显式写出来防被误改 player.configure({ streaming: { lowLatencyMode: true } });确认生效播放后调player.getStats()看直播延迟相关字段字段名以官方文档为准同时 Network 面板里应该看到 playlist 请求间隔明显缩短、开始出现 part 级别的分片请求。如果你看到的还是整段请求大概率是流本身没带 LL-HLS 标签。你现在该往哪走如果你的场景是纯 VOD 加字幕切换 → 先把上面的最短路径跑起来再看 basic-usage 教程 里轨道和字幕的切换方式现成控件栏看 demo 页 是怎么组的。如果你的场景是 DRM 加密内容 → 先读 DRM 配置教程许可证服务器鉴权另有一篇 license-server-auth 教程。如果你的场景是低延迟直播 → 先拿抓包确认流带不带EXT-X-PART带不进去的话这个项目解决不了你的延迟问题。你接下来大概率会想做的是把许可证服务器对起来让那条加密 demo 资产真正播起来。【免费下载链接】shaka-playerJavaScript player library / DASH HLS client / MSE-EME player项目地址: https://gitcode.com/GitHub_Trending/sh/shaka-player创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考