Skip to main content

Content Rating

What you learn​

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

This guide explains how to configure content rating overlays in DIVA Player for web applications, enabling age-appropriate warnings and restrictions.

Before starting​

  • Ensure the DIVA Back Office instance you rely on is up and running.
  • Ask your video engineering team the <video id> and the related <settings URL>.
  • Get read-and-write access to the VideoMetadata file.
  • Configure content rating in your Settings file:

Instantiation​

Write the Basic instantiation code. Configure the content rating in the videoMetadataMap function.

Working sample code (.tsx)​

Write the App() function to read the VideoMetadataMap as in the following example, and set the contentRating configuration:

import {
  AssetState,
  BoAdapterWebComponentProps,
  DivaWebBoAdapter,
  VideoMetadata,
} from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";
import { useState } from "react";

const videoId = "<videoId>";

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 config = {
  videoId: videoId,
  libs: libs,
};

function App() {

  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config: config,
    // Here the integrator can transform the video metadata
    videoMetadataMap: async (vd: VideoMetadata) => {
      vd.contentRating = {
        // URL to the content rating icon
        icon: "https://example.com/icons/18plus.png",

        // Rating classification text
        classification: "Adults Only",

        // Description providing detailed content advisory
        contentDescription:
          "This program contains strong language and scenes of violence.",
      };
      return vd;
    },
  };

  return (
    <>
      <DivaWebBoAdapter {...props} />
    </>
  );
}

export default App;

Optional Properties​

  • icon: URL or file path to the content rating icon (e.g., "https://example.com/icons/pg13.png")
  • classification: String specifying the content rating classification (e.g., "PG-13", "Adults Only", "12+")
  • contentDescription: Text providing additional context or warnings about the content (e.g., "Contains strong language and scenes of violence.")

Note​

  • If one of the optional property is present, the content overlay will be enabled .

Best practices​

  • Standardized Rating Systems: Use regionally recognized content rating standards such as:
    • MPAA: The MPAA is a U.S.-based organization that administers film ratings such as G, PG, PG-13, R, and NC-17.
    • BBFC: The BBFC is the UK’s authority for classifying films, videos, and some online content, with ratings like U, PG, 12A, 15, and 18.
    • FSK: FSK is Germany’s voluntary self-regulation for the film industry, providing age ratings such as 0, 6, 12, 16, and 18.
    • CBFC: The CBFC is India’s government body for film certification, with ratings like U, UA, A, and S.
  • Clear Classifications: Keep the classification label short, readable, and consistent across videos (e.g., “U”, “PG-13”, “A”).
  • Informative Descriptions: Provide clear and concise contentDescription values that explain why the content is rated as such.
  • Consistent Visuals: Use high-quality icon assets with transparent backgrounds and standardized sizing for visual clarity.
  • Accessibility: Ensure icons and text maintain sufficient contrast ratios and are accessible to assistive technologies.
  • Localization: Translate classification and contentDescription fields based on the user’s language and region.
  • Fallback Handling: Gracefully skip or hide the overlay when no valid rating data is available to ensure a smooth playback experience.