Timeline markers

Support
,
1

Product

Player

Question

How can i add timeline markers to BitmovinPlayer component that imports from ‘bitmovin-player-react’ package? Everything that i found in internet not working.

2

Hi @cool.bambyk!

Unfortunately it is currently not supported to add timelime markers when using our React Native Player SDK.
This is due to the fact that this feature is not available for the underlying Android and iOS Player SDKs at the moment.

We will take note of your request and stay tuned for updates!

4

@roland.kakonyi I am using not react native but react. Does it change something?

5

Sorry! My bad, I misread the package name.

Have you tried this guide?
We also have this sample.

6

@roland.kakonyi yes i tried all of them. But none of sourceConfig, playerConfig or CustomUi in bitmovin-player-react have timeline markers, or something simular.

7

Hi @cool.bambyk!

You can define the UI config on the PlayerConfig (PlayerConfig.ui), and follow the guide already posted by Roland to define markers, like so:

const playerConfig: PlayerConfig = {
  key: "<key>",
  ui: {
    metadata: {
      markers: [
        {
          time: 24,
          title: 'Salto on the edge'
        },
        {
          time: 69,
          title: 'Interview - Marcus Gustafsson'
        }
      ],
    },
  }
};

Passing this config to the BitmovinPlayer component will forward the UI config accordingly. The interface for the UIConfig can be found here: UIConfig | bitmovin-player-ui

8

@felix I already tried that. Here is my code of Player. Can you help me maybe?

"use client";

import { PlayerConfig, SourceConfig } from "bitmovin-player";
import { Fragment, Suspense } from "react";
import dynamic from "next/dynamic";
import "bitmovin-player-ui/dist/css/bitmovinplayer-ui.css";

const BitmovinPlayer = dynamic(
  () => import("bitmovin-player-react").then((mod) => mod.BitmovinPlayer),
  {
    ssr: false,
  }
);

export default function Player() {

  const defaultPlayerSource: SourceConfig = {
      dash: 'https://cdn.bitmovin.com/content/assets/sintel/sintel.mpd',
      hls: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
      poster: 'https://cdn.bitmovin.com/content/assets/sintel/poster.png'
  };

  const playerConfig: PlayerConfig = {
    key: "21010de8-3642-4549-a22a-369990669bb9",
    ui: {
      metadata: {
        markers: [
          {
            time: 24,
            title: 'Salto on the edge'
          },
          {
            time: 69,
            title: 'Interview - Marcus Gustafsson'
          }
        ],
      },
    },
    playback: {
      muted: true,
      autoplay: true,
    },
  };

  return (
    <Fragment>
      <h1>Bitmovin Player React Sample</h1>
      <div
        style={{
          position: "relative",
          maxWidth: "100%",
        }}
      >
        <Suspense fallback={<div>Loading...</div>}>
          <BitmovinPlayer
            source={defaultPlayerSource}
            config={playerConfig}
          />
        </Suspense>
      </div>
    </Fragment>
  );
}
9

@felix But there are no chapters on player’s timebar with this code.

10

You’re right - sorry about that! It seems there was a bug in the component.

We have just published a new version 1.0.1 of the bitmovin-player-react package.

Please try again with that version and let me know how it goes :slight_smile:

11

@felix Wow, thanks now it works :grinning:
Can you also check playerConfig advertising there or it’s better to create new ticket? I think adBreaks should be AdBreakConfig type, when we want to add position and id for example. And for now advertising not working in playerConfig for me.

12

Glad to hear!

I have created an internal ticket for the advertising type :+1:

In the meantime, you can cast it to the proper type, e.g.

advertising: {
  adBreaks: [
    {
      tag: adTag,
      position: 'pre',
    } as AdBreakConfig,
  ],
}
13

@felix Hello, sorry, can i already use advertising with react package? code for advertising not working at all.

In playerConfig:

const playerConfig: PlayerConfig = {
    key: "my-key",
    ui: {
      metadata: {
        markers: [
          {
            time: 30,
            title: "Warm up",
          },
          {
            time: 45,
            title: "Worm out",
          },
          {
            time: 121,
            title: "Rest",
          },
          {
            time: 223,
            title: "Cool down",
          },
        ],
      },
    },
    playback: {
      muted: false,
      autoplay: false,
    },
    advertising: {
      adBreaks: [
        {
          tag:{
            url: "",
            type: "vast",
          },
          position: "pre"
        } as AdTagConfig
      ]
    }
  };
14

Yes, ads are supported. You can follow the normal Ads setup guide: Setting up Ads with the Web Player

Did you specify a URL for the VAST tag? I am able to see the ad getting played as expected with your advertising config and an IMA sample tag:

  advertising: {
    adBreaks: [
      {
        tag: {
          url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
          type: 'vast',
        },
        position: 'pre',
      } as AdTagConfig,
    ],
  },