Implementation with Vanilla Js

  • 🚨 RsiInterpretationPlayer must be imported before rsiSubtitles.

    • RsiSubtitles cannot work without the widget RsinterpretationPlayer
  • 🚨 In order to use the widget subtitles you must add as parameter of RsiInterpretationPlayer data-has-subtitles to be true.

  <!-- stylesheet -->
  <link rel="stylesheet" href="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.26/interpretation-player.min.css" />

  <link rel="stylesheet" href="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.26/rsi-subtitles.min.css" />

  <!-- Component -->
  <div 
     id="akkadu-interpretation-player" 
     data-sdk-key="your_sdk_key" 
     data-position-menu="bottom" 
     data-is-box-shadow="true"
     data-is-player-controlled="true"
     data-has-subtitles="true"
   >
  <div 
     id="akkadu-rsi-subtitles" 
     data-sdk-key="your_sdk_key" 
     data-room-name="abcd"
   >
    </div> 
    <script>
      const component = document.querySelector('#akkadu-interpretation-player')
      component.addEventListener('onReady', function (e) { 
        console.info('received onReady event for subtitles:', e?.detail?.isReady);
      });
    </script>

    <!-- 🚨 Script must be loaded after the component -->
    <script src="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.26/interpretation-player.min.js" ></script>

    <script src="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.26/rsi-subtitles.min.js" ></script>