Short Video SDK Guide for Web

Table of contents

Getting started

Download BELIVE SHORT VIDEO SDK JS plugin from provided link

Step-by-step guide for Short Video SDK

Step 1: Set up Short Video SDK

Import static files in html

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./belive-short-video-sdk.js" type="text/javascript"></script>
</head>

Step 2: Insert layout tag in your html

<!-- Single Video (Set the height of layout) -->
<div class="YOUR_SINGLE_CLASS" style="height: 480px;"></div> 

<!-- Grid Playlist -->
<div class="YOUR_GRID_CLASS"></div>

<!-- Carousel Playlist -->
<div class="YOUR_CAROUSEL_CLASS"></div>

Step 3: Create a BeLiveShortVideoSdk instance

let shortVideoSdkInstance = new BeliveShortVideoSdk.ShortSdk(
	"{YOUR__API_END_POINT}",
    "{YOUR__BELIVE_LICENSE_KEY}",
    {}, // YOUR Icons for single video | OPTIONAL
    {} // YOUR Icons for playlist | OPTIONAL
)

sdkShortInstance.initShortSdk(() => {
    // Success callback
    // Your code here for create the single video, grid playlist or carousel playlist
    ....
}, (error) => {
    // Error callback
})
sdkShortInstance.initShortSdk(() => {
    // Success callback
    // Create the single video
    const singleVideoLayout = document.querySelector("{YOUR_SINGLE_CLASS}")
    const singleVideoInstance = sdkShortInstance.createSingleVideo("YOUR_SHORT_VIDEO_ID", singleVideoLayout)

     // Create the Grid playlistplaylist
    const gridLayout = document.querySelector("{YOUR_GRID_CLASS}")
    const gridPlaylistInstance = sdkShortInstance.createGridPlaylist("YOUR_PLAYLIST_ID", gridLayout)

     // Create the carousel playlist
    const carouselLayout = document.querySelector("{YOUR_CAROUSEL_CLASS}")
    const carouselPlaylistInstance = sdkShortInstance.createCarouselPlaylist("YOUR_PLAYLIST_ID", carouselLayout)
}, (error) => {
    // Error callback
})

Advanced guide

Handle Events

singleVideoInstance.on("SHORT_SDK__PLAYING", () => {
	// Your logic here
})

Call a function

singleVideoInstance.pauseVideo()

API

BeLive Short Video SDK methods

Method Description
on on(event, callback): void Listen for events

on

on(event, callback): void

Method to listen event.

Parameters

  • event (string)

Check all available events in the Events Section.

  • callback (function)

Single Video SDK methods

Method Description
pauseVideo Pause the current video
playVideo Play the current video
muteVideo Mute/Un-mute the current video
pauseOtherVideos Pause the other videos
shareVideo Trigger to share the video
generateTheShareUrl Get the share URL
switchToFullscreen Switch to fullscreen mode
exitFullscreenMode Exit fullscreen mode
switchToPip Switch to Picture in Picture (PiP) mode

pauseVideo

pauseVideo(): void

Method to pause the current video

playVideo

playVideo(): void

Method to play the current video

muteVideo

muteVideo(muted = false): void

Method to play the current vide

Parameters

  • muted (boolean)
True: muted False: un-muted

pauseOtherVideos

pauseOtherVideos(): void

Method to pause the other videos

shareVideo

shareVideo(): void

Method to share the current video

generateTheShareUrl

generateTheShareUrl(): string

Method to get the share URL

switchToFullscreen

switchToFullscreen(): void

Method to switch to Fullscreen mode

exitFullscreenMode

exitFullscreenMode(): void

Method to exit Fullscreen mode

switchToPip

switchToPip(): void

Method to switch to Picture in Picture (PiP) mode

Method Description
goToBackSlide Go to previous slide
goToNextSlide Go to next slide
moveSlide Move slide to index

goToBackSlide

goToBackSlide(): void

Method to move the playlist to previous slide

goToNextSlide

goToNextSlide(): void

Method to move the playlist to next slide

moveSlide

moveSlide(index): void

Method to move the playlist to selected slide

Parameters

  • index (number)

Events

BeLive Short Video SDK Events

Method Description Value Return
SHORT_SDK__RESIZE Event when the layout size was changed -

Single Video Events

Method Description Value Return
SHORT_SDK__PAUSED Event when video was paused -
SHORT_SDK__PLAYING Event when video is playing -
SHORT_SDK__LOADED_META_DATA Event when video loaded the metadata -
SHORT_SDK__MUTED Event when video was muted -
SHORT_SDK__UN_MUTED Event when video was un-muted -
SHORT_SDK__VIDEO_ENDED Event when video was ended -
SHORT_SDK__VIDEO_STATE_BTN_CLICKED Event when user clicked on Play/Pause button -
SHORT_SDK__VIDEO_SOUND_BTN_CLICKED Event when user clicked on Mute/UnMute button -
SHORT_SDK__HOVER_VIDEO Event when user hover on video -
SHORT_SDK__SHARE_BTN_CLICKED Event when user clicked on Share button -
SHORT_SDK__OPEN_FULLSCREEN Event when switched to Fullscreen mode -
SHORT_SDK__EXIT_FULLSCREEN Event when exit Fullscreen mode -
SHORT_SDK__OPEN_PIP Event when switched to PiP mode -
SHORT_SDK__CANCEL_SHARE Event when user clicked to Cancel Share button -
SHORT_SDK__CLOSE_SHARED_POPUP Event when user closed the Shared Popup -
SHORT_SDK__FETCHED_DATA Event when data was fetched -
SHORT_SDK__INITIAL_FAILED Event when initial component failed -
SHORT_SDK__TRACKING_CTA Event when tracking the CTA action -
SHORT_SDK__TRACKING_SHARE Event when tracking the Share action -
SHORT_SDK__TRACKING_VIEW Event when tracking the View action -
SHORT_SDK__REPEAT Event when video was repeated -
SHORT_SDK__PAUSED_OTHER_VIDEOS Event when paused other videos -
SHORT_SDK__CTA_CLICKED Event when user clicked on item CTA -

Playlist Events

Method Description Value Return
SHORT_SDK__NEXT_SLIDE Event when playlist go to next slide -
SHORT_SDK__BACK_SLIDE Event when playlist go to back slide -
SHORT_SDK__SLIDE_CHANGED Event when playlist changed the slide -
SHORT_SDK__LOAD_MORE_DATA Event when playlist load more data -