Skip to main content

Squeeze back

What you learn​

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

The goal of this article is to build the simplest front-end to stream a video from third party video production with, at the end, the activation of squeeze back in combination with end of play.

Before starting​

Instantiation​

Write the Basic instantiation code. There's no additional code to write, unless you need to overwrite the autoplay behavior that the VideoMetadata contains.

Squeeze back configuration​

Write the App() function to to return a videoMetadata that contains the squeezeBackTime property:

  • 0 default value if not set, no squeeze back

  • 10000 to set the squeeze back

  • A positive integer that specifies the number of milliseconds before the end of the video when the Diva Player starts the squeezeback. (eg: with 10000 the squeezeback starts when remain 10 seconds to the video end).

"behaviour": {
    "endOfPlay": {
        "squeezeBackTime":0 //milliseconds, default 0, 0 or negative means disabled
    },
}

Working sample code for overwriting Squeeze Back data (.tsx)​

// DIVA Player SDK
import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
      timeToDisableAutoplay: 5400000,
    }
  }, 
  dictionary: {
  messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
      "behavior": {
        "endOfPlay": {
          "squeezeBackTime": 10000, // 0 means no squeeze back, while any other positive integer is how many milliseconds before video ends Diva Player starts the squeezeback
        }
      }
    }
    },
};

export const App = () => {
  return <DivaWebComponent config={config} />;
};

Behaviour​

Ads and Squeeze Back Integration​

  • Squeeze Back mode is disabled during advertisements.
  • If Squeeze Back is active, client-side ads will automatically be skipped.
  • This feature does not apply to live video streams.

Video Playback​

  • When no Squeeze Back time is set (0), the user is directed straight to the Endboard upon video completion.
  • When Squeeze Back time is enabled (e.g., set to a non-zero value), the video playback is reduced in scale and moved to the top-right corner of the screen for the duration of the Squeeze Back period or until the video ends.
  • For RTL (right-to-left) languages, the minimized video window will be positioned on the top-left of the screen.
  • The Squeeze Back period is controlled by a specific value set in the VideoMetaData object, which represents the number of milliseconds before the video ends when the Endboard will appear.
  • If the Squeeze Back threshold is reached, the video shrinks to a small window in the top right corner (or top left in RTL mode), and the Endboard appears. Users may continue watching the minimized video while engaging with the Endboard.
  • If no Squeeze Back is set (e.g., Squeeze Back time = 0), the Endboard is displayed without reducing the video size.
  • If Squeeze Back is enabled (e.g., 20 seconds before video ends), the video continues to play in a minimized window alongside the Endboard. Upon video completion, the window disappears and focus returns to the Endboard options.

Chromecast Support:​

  • When casting to Chromecast, the Squeeze Back feature is disabled on the sender device.

Endboard Interaction​

  • Users can interact with the minimized video window during Squeeze Back, allowing them to restore the video to full screen mode.
  • Once the video ends, the minimized window is hidden, and the Endboard is fully presented, allowing users to navigate between post-video options (e.g., replay button).

Dictionary​

No additional traslations needed.

Analytics events​

Find here the available analytics events for the Squeeze back.