<!DOCTYPE html>
<html lang="en">

  <head>
    <script src="https://assets.blings.io/scripts/msdk4.js"></script>
  </head>
  

  <body>
    <div id="vid-holder"></div>
  </body>

</html>
// Define the configuration for analytics tools
// such as Google Analytics, Amplitude, Mixpanel, etc.
// In this example, actions are logged to the console.
const customAnalytics = {
    init: () => {
        console.log('init')
    },
    config: (player) => {
        console.log('config: ', player)
    },
    send: (event, properties) => {
        console.log('send: ', { event, properties })
    }
};


BlingsPlayer.create({
    // Insert this line inside settings to configure custom analytics for MP5 video playback.
    // analyticsConfig: { customAnalytics}
    // The remaining settings follow the standard configuration.

    settings: {
        container: document.getElementById('vid-holder'),
        cinematic: true,
        storiesMode: true,
        analyticsConfig: {
            customAnalytics
        }
    },
    scenes: [
        "jokes",
        "image_scene",
       "logo_outro"
    ],
    data: {
        text1: "Knock knock!",
        text2: `Race condition.
Who's there?
`
    },
    project: {
        projectId: 'sdk-demo'
    }

})





Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.