Skip to main content

Vertical video player

What you learn​

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a vertical video from the DIVA Back Office.

Before starting​

Instantiation​

Enrich the Basic instantiation code with

  • videoId It's a string array of videoIds to display in vertical mode.
  • playerMode added into the config parameter. To enable Vertical video player, playerMode's value has to be vertical. By default playerMode's value is fullscreen.

With this feature you can implement three different callbacks to handle the following actions:

  • Exit button click on the vertical video: onExit
  • Sharing button click: onSharing
  • End of Play button click on the vertical video: onVerticalVideoEopButtonClick

If a callback is provided, the corresponding button will be enabled in the video player.

However, even if the callbacks are defined, you can still control whether the sharing button and the End of Play button are shown or hidden using specific properties in the settings object.

"general": {
    "isVerticalVideoSharingEnabled": true, // default false
    "isVerticalVideoEopButtonEnabled": false, // default true
},

In this example, although the onVerticalVideoEopButtonClick callback is defined, the button won't be shown because isVerticalVideoEopButtonEnabled is set to false.

Working sample code (.tsx)​

// BO Adapter SDK
import { DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
// 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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};
const videoIds = ["<videoId1>","<videoId2>","<videoId3>","<videoId4>"];
const config = {
  videoId: videoIds,
  libs: libs,
  playerMode: "vertical",
  onExit: (videoMetadata: VideoMetadataClean | undefined) => {
    // Callback on Vertical video exit button click
  },
  onSharing = (videoMetadata: VideoMetadataClean) => {
    // Callback on Vertical video sharing button click, below an example of sharing implementation
    const url = new URL(window.location.href);
    url.searchParams.set('verticalStartingVideoId', videoMetadata.videoId);
    if (navigator.share) {
        const shareData = {
            title: 'Check out this video',
            text: 'Here is a video I wanted to share with you.',
            url: decodeURIComponent(url.toString()),
        };
        navigator.share?.(shareData);
    } else {
        window.open(decodeURIComponent(url.toString()), '_blank');
    }
    //
  },
  onVerticalVideoEopButtonClick = () => {
    // Callback on Vertical video EoP button click
  },
};

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

export const App = () => {
  return <DivaWebBoAdapter { ...props } />;
};

Autoplay / Loop​

Is it possible to have two different behaviors at the end of the video:

  • autoplay: by default, when a video ends, the next video will start playing automatically.
  • loop: when a video ends, the video will loopback.

Below the configuration setting to enable the autoplay or loop behavior at the end of the video.
Write the App() function to read the VideoMetadataMap as in the folllowing example, and set the endOfPlay properties:

"behaviour": {
    "endOfPlay": {
      "verticalVideoAutoplayOrLoop": "autoplay" // string: "autoplay" | "loop"
    },
},

Color customization​

Is it possible to customize the background color of the vertical video player. The EoP button, the EoP icon and all the buttons' icons are based on the base2 color setting.

Below the configuration setting to customize the background color:

"colours": {
    "verticalVideoBgColor": "#2A2A2A",
}

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for vertical video player.

Behaviour​

Video Playback Design​

Vertical Video Playback (9:16)​

Videos should fill the browser window while preserving their aspect ratio. Letterboxing will be used (black) to fill empty space around the video. The background colors should be customizable (letterbox excluded).

Square Video Playback (1:1)​

Square videos should resize to fit the screen while maintaining a 1:1 aspect ratio, filling the screen using letterboxing where necessary.

The video player will automatically resize based on the web browser window without distorting the aspect ratio.

Video navigation​

  • Mobile:
    • Swipe: Users can swipe left or right to navigate between videos.
    • Tap Navigation: Tapping on the left or right areas of the screen should jump to the previous or next video.
  • Responsive Web (RW):
    • Arrows: Users can switch videos using arrows displayed on either side of the video.
    • Keyboard Support: Left/right arrow keys will also be supported for navigation.

Play/Pause​

  • Mobile: Tapping anywhere on the screen should pause/resume the video. A play icon will appear at the center of the screen when paused.
  • RW Web: Users can click anywhere on the screen to pause/resume. A play/pause icon will be displayed in the bottom-right corner. The spacebar key can also be used to toggle play/pause.

Mute/Unmute​

  • Mobile & RW Web: An audio icon will toggle mute/unmute. The mute state should persist for the current session. On RW, the "M" key can also be used as a shortcut to mute/unmute.
  • Volume Behavior:
    • Mobile: Video volume will follow the system volume.
    • RW Web: Video playback will follow the platform's volume behavior.

Autoplay and Looping​

  • Autoplay can load and play the next video automatically after the current video ends, with a brief transition delay.
  • When Looping enabled, the video will loop back to the start once it ends.
  • Autoplay or Looping can be enabled by default and configurable in settings. Either autoplay or looping can be enabled at a time, not both.

Sharing​

Mobile: Users can share videos via native in-app sharing options.
RW Web: Users can copy the video link for sharing. When a video link is shared, the carousel should start from the specific video ID.
The video should pause when the share button is clicked.

Timeline and Scrubbing​

Every video should display a timeline, allowing users to scrub (seek) through the video.
A timestamp should be displayed on the timeline to indicate the current playback position.

End of Play Panel​

At the end of the video list, an end-of-play panel should appear with a customizable call-to-action button (e.g., "Go back to homepage"). Available customization: Button text, Button callback action, Icon, Background color

Advertising Integration​

  • Pre-Roll Ads

    • Reuse the existing Client-Side Ad Insertion (CSAI) mechanism for vertical videos.
    • One ad tag should be configured for a vertical video session. The ad tag should be reusable for every X videos (configurable).
    • Ad Frequency: Ads should appear after a set number of videos (e.g., after every 3rd video).
    • If a specific vertical video has a pre-roll ad tag defined, it should override the session ad tag.

  • Mid-Roll Ads

    • Mid-roll ads are supported.

  • Ad Behavior

    • Swiping should be disabled during ad playback.
    • Support for both skippable and non-skippable ads.

    How to configure recurring advertisements​

const config = {
  videoId: "<video id>,...",
  playerMode: "vertical",
  ...
  /**
   * Vertical ad tag to be applied every verticaAdInterval
   */
  verticalAd: string;

  /**
   * Vertical ad interval
   * It will be used to apply a preroll ad every n videos in vertical mode
   * Pre-existing ads set directly on videoMetadata WON'T be overriden
   */
  verticalAdInterval?: number;
  ...
};
...