Nextjs - Bitmovin issue with HLS streaming

[alfsender]

Product

Player

Question

Hi Team,

I am trying to integrate Bitmovin player to my existing nextjs based app in Server side component. I started using GitHub - bitmovin/bitmovin-player-react and was able to integrate Bitmovin player with my app. When I am in chrome browser I can load the player and play the content successfully without any issue.

But when I try to load the same app in Safari, I see the error as “HLS stream has an error” in Bitmovin when I try to view the asset. I am not able to figure out why the player loads in Chrome but not in safari. If I update the confirm and pass the “dash” stream only to the player “SourceConfig” then I can play the content in Safari also. But I am trying to make the configuration so I can play HLS in Safari, once this works then I would like to also enable fairplay DRM.

Please share any inputs / examples that I can refer to identify the issue. Please let me know if any additional details are required.

Thanks.

[christian.bartl]

Hi Alfsender,

Not sure if it’s possible with a server-side component, but I managed to playback HLS via client component with no issues on Chrome or Safari.

'use client'

import 'bitmovin-player/bitmovinplayer-ui.css'
import { PlayerConfig, SourceConfig } from "bitmovin-player";
import { BitmovinPlayer } from "bitmovin-player-react";

const playerConfig: PlayerConfig = {
  key: "xxx",
  playback: {
    muted: true,
    autoplay: true,
  },
  analytics: {
    key: "xxx",
    videoId: "Sintel",
    customUserId: "0815",
  }
};

const playerSource: SourceConfig = {
  hls: "https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8",
};

export default function BMPlayer() {

    return (
        <BitmovinPlayer config={playerConfig} source={playerSource} />
    );
}

Maybe you can use the Player Demo to validate that your HLS stream in general works on both browsers, or use the test stream URL from there to test with your app.

PS using these versions here:

        "bitmovin-player": "^8.183.0",
        "bitmovin-player-react": "^1.0.1",
        "bitmovin-player-ui": "^3.73.0",

[alfsender]

Thank you @christian.bartl, I was able to configure client component and it works. To avoid any dependency we are using bitmovin-player and bitmovin-player-ui.

Thank you.