<!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'
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.