Skip to main content

Migrating from v2.x.x to v3.x.x

Version 3.0.0 is a major release that brings new features and improvements to the Vindral Web SDK. It also changes the default behavior in some cases. Some methods have also been deprecated in order to simplify the API and to support new features introduced.

Not interested in any of the new behavior? Skip right to Keep the old behavior.

userInput() and connect() has been deprecated. Instead we recommend that you replace both of those methods with play() instead.

const playButton = document.getElementById("play-button")
const instance = new Vindral({ url: "<url-here>", channelId: "<channel-id>" })

// Show play button when needed
instance.on("needs user input", () => (playButton.style.display = "block"))

// Will start the stream and try to play - if the browser blocks autoplay on audio you will receive a "needs user input" event
-instance.connect()
+instance.play()

// Activate audio by calling userInput in a user event
-playButton.addEventListener("click", () => instance.userInput())
+playButton.addEventListener("click", () => instance.play())

Pause support​

The biggest change in behavior is that Vindral now supports pausing. You can now pause the video through native media controls or through APIs. A pause() method has been added to support this, and .playbackState can now be paused in addition to the previous playing and buffering. instance.on("playback state", handler) can be used to keep track of when the instance becomes paused. See example below:

vindral.on("playback state", (playbackState) => {
  switch (playbackState) {
    case "paused":
      // Handle pause state
      break
    case "playing":
      // Handle playing
      break
    case "buffering":
      // Handle buffering
      break
  }
})

Note that external factors can cause the Vindral instance to become paused, therefore it is important to listen to the playback state event to show the paused state and show a play button accordingly.

Fullscreen and Picture in Picture on iOS​

Version 3.0.0 introduces support for fullscreen and picture in picture support on iOS devices. This feature is enabled by default in the embed player and QoS client. In the Web SDK it is disabled by default, but can be enabled by setting iosMediaElementEnabled: true in the Vindral constructor.

Keeping the old behavior​

Don't want the video to ever pause or just don't have time to fully implement the changes? You can still update to 3.0.0 and set pauseSupportEnabled: false in the Vindral constructor. This will result in the same behavior as previous Web SDK versions.