Skip to main content

Content Rating

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 configure content rating overlays that display age classifications, icons, and warnings for your video content when streamed through third-party sources.

Before starting​

  • Ensure the your video production you rely on is up and running.
  • Set the <video id> and the related <settings URL>.
  • Get read-and-write access to the VideoMetadata file.
  • Configure content rating in your Settings file:

Defining content rating​

The contentRating field allows you to specify age classification information, advisory icons, and content warnings to ensure users are informed about the nature of the video content.

If all properties are empty or null, the feature is automatically disabled.

Instantiation​

Write the Basic instantiation code.
Then, extend the videoMetadataProvider function to include the contentRating configuration as shown below.

Working sample code (.tsx)​

Write the App() function to to return a videoMetadata that contains the videoLists array:

// 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,
    },
    colours: {
      contentRatingBar: "#CF030B", // default value
    },
    contentRatingSetting: {
      startTime: 2000, // default value
      durationTime: 5000, // default value
    },
  }, 
  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": {
          "countdownToAutoplay": 10000 //milliseconds, default 10000, 0 or negative means disabled
        }
      },
      "contentRating": {
        icon: "https://example.com/icons/pg13.png",
        classification: "PG-13",
        contentDescription: "This video contains mild violence and language."
      }
    }
  },
};

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

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 all the above fields are null or empty, the content rating feature is automatically disabled.

Best Practices​

  • Standardized Rating Systems: Use regionally recognized content rating standards such as MPAA, BBFC, FSK, or CBFC.
  • 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.