观播 SDK 提供看直播、发评论、参与抽奖等功能。本文介绍 Web 观播 SDK 的集成方法。

前提条件

• 您已开通定制版套餐。详见计费说明。
• 由于 Web 观播 SDK 的 API 不支持跨域调用，请联系企业直播技术支持将您的域名加入白名单。白名单中支持配置泛域名。

功能支持

Web 观播 SDK 支持的功能情况，详见 SaaS 与 aPaaS 功能差异。

集成方法

完成以下步骤，将观播 SDK 集成到您的 Web 应用中。

1. 通过 link 和 script 标签分别引入 CSS 和 JS 资源。
   直接修改 URL 中的版本号即可更新版本，同一终端的 CSS 和 JS 版本应保持一致。

   说明

   • 建议平板接入 PC 端的 Web SDK，以获得更佳的视觉效果。
   • 移动端如需接入直播预约、主播账号、页头图等非特定模块所属的功能，可采用整页接入方式。
   • 如需在观看页展示点播播放器，则必须采用单独接入播放器模块的方式。

   // PC 端（仅支持模块化接入）
   <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/css/index.1.6.4.css">
   <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/js/index.1.6.4.js"></script>
   
   // PC 端（单独接入播放器模块，仅支持点播、直播、清晰度、倍速以及多线路等播放器相关功能。性能优于 PC 端模块化接入方式）
   <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-pc/css/index.1.6.4.css">
   <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-pc/js/index.1.6.4.js"></script>
   
   // 移动端（支持模块化接入或整页接入）
   <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile/css/index.1.6.4.css">
   <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile/js/index.1.6.4.js"></script>
   
   // 移动端（仅支持整页接入，性能优于其他移动端整页接入方式）
   <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/css/index.1.6.4.css">
   <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/js/index.1.6.4.js"></script>
   
   // 移动端（单独接入播放器模块，仅支持点播、直播、清晰度、倍速以及多线路等播放器相关功能。性能优于其他移动端模块化接入方式）
   <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-mobile/css/index.1.6.4.css">
   <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-mobile/js/index.1.6.4.js"></script>
   

   国内域名：https://lf-cdn-tos.bytescm.com/obj/static
   最新版本：1.6.4

2. 资源引入后， ByteLiveWebSDK 挂载在 window 下。您可以通过以下方式，将观播 SDK 集成到您的 Web 应用中，从而在观看页展示直播间或点播播放器。

   • 直播间

     var webSDK = new window.ByteLiveWebSDK({
       activityId: 169410856822****,
       token: 'JC****',
       service: '',
       mode: 1,
       modules: [
         {
           id: "player",
           mode: "player", 
         }, 
         {
           id: "menu", 
           mode: "menu",
           menu: ["comment"],
         }
       ],
       options: {}
     })
     
     webSDK.emit('player.pause'); // 触发事件
     webSDK.on('player.pause', () => {}); // 监听事件
     

   • 点播播放器

     var webSDK = new window.ByteLiveWebSDK({
       vodPlayerToken: 'ceed74dcb2ceaba3c92a91fc2ebd****',
       vid: 'v03a49g10000cojk12bc77ua72bm****',
       service: '',
       modules: [
         {
           id: "player",
           mode: "player",
         }
       ],
       options: {}
     })
     
     webSDK.emit('player.pause'); // 触发事件
     webSDK.on('player.pause', () => {}); // 监听事件
     

   有关代码中的参数配置，详见配置参数。有关监听与触发事件，详见事件。有关方法调用，详见属性及方法。

3. （可选）覆盖样式。SDK 元素的 class 属性值不可更改。您可以通过变更 class 属性的样式属性及其属性值，覆盖对应元素的样式。

4. 调试效果。您可以选择以下任一调试方法：

   • 本地调试：在本地 localhost:8080 端口进行调试，但此种调试方法无法播放预告和回放。有关本地调试方法，详见 Demo 体验集成示例。
   • 线上调试：建议在 PC 上使用 SDK demo playground 进行线上效果调试。通过 SDK demo playground 配置不同版本的 SDK 以及不同直播间，修改模板代码后可实时预览效果。详见企业直播 Web SDK demo playground。

常见问题

Web 观播 SDK 常见问题