Add the adaptive bitrate streaming feature to an embedded video player in next.js

Iheanacho Amarachi Sharon

March 04, 2022 15:50 Edited

I have embedded a cloudinary video player in my project, but i am trying to use the adaptive bitrate streaming functionality. How do I do this?

import "cloudinary-video-player/dist/cld-video-player.min.js";

import "cloudinary-video-player/dist/cld-video-player.min.css";

import { Cloudinary } from "cloudinary-core";

import { useEffect } from "react";

const VideoPlayer = () => {

  const cld = new Cloudinary({ cloud_name: "amarachi-2812" });

  useEffect(() => {

    const videoPlayer = cld.videoPlayer("video-player", {

      controls: true

    });

    videoPlayer.source("videoplayback_1_pr2hzi");

  });

  cld.url('videoplayback_1_pr2hzi.m3u8', {streamingProfile: "full_hd"}, {resource_type: 'video'});

  return (

    <div>

      <video id="video-player" className="video-player"/>

    </div>

  );

};

export default VideoPlayer;

0

• 

  Michal Kuperman

  March 06, 2022 12:29

  Hi,

  Thanks for contacting us.

  You need to include  the `sourceTypes` in the `videoPlayer.source` set to hls or dash. for example :`sourceTypes: ['hls']`. 
  You can read more about this here: https://cloudinary.com/documentation/video_player_hls_dash#specify_the_streaming_format_and_streaming_profile.

  Please let us know if you need any further assistance.

  Best regards,
  Michal

  0

Post is closed for comments.