You need to enable JavaScript to run this app.
导航
集成 Web 观播 SDK
最近更新时间:2024.07.23 16:00:10首次发布时间:2022.02.24 19:18:57

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

前提条件

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

功能支持

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

集成方法

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

  1. 通过 linkscript 标签分别引入 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.3.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/js/index.1.6.3.js"></script>
    
    // PC 端(单独接入播放器模块,仅支持点播、直播、清晰度、倍速以及多线路等播放器相关功能。性能优于 PC 端模块化接入方式)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-pc/css/index.1.6.3.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-pc/js/index.1.6.3.js"></script>
    
    // 移动端(支持模块化接入或整页接入)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile/css/index.1.6.3.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile/js/index.1.6.3.js"></script>
    
    // 移动端(仅支持整页接入,性能优于其他移动端整页接入方式)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/css/index.1.6.3.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/js/index.1.6.3.js"></script>
    
    // 移动端(单独接入播放器模块,仅支持点播、直播、清晰度、倍速以及多线路等播放器相关功能。性能优于其他移动端模块化接入方式)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-mobile/css/index.1.6.3.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-mobile/js/index.1.6.3.js"></script>
    

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

  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 常见问题