{"id":27965,"date":"2022-03-24T20:08:26","date_gmt":"2022-03-24T20:08:26","guid":{"rendered":"http:\/\/handle-adaptive-bitrate-streaming-in-nextjs"},"modified":"2025-03-23T13:24:04","modified_gmt":"2025-03-23T20:24:04","slug":"handle-adaptive-bitrate-streaming-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/","title":{"rendered":"Handle adaptive bitrate streaming"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Media streaming has become a popular medium to pass on information in today\u2019s society. With live and on-demand streaming options on the rise, technologies or techniques like adaptive bitrate streaming have been designed to ensure that the media is delivered in the most efficient way possible.<\/p>\n<h2>What is Adaptive Bitrate Streaming?<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/documentation\/adaptive_bitrate_streaming\">Adaptive bitrate streaming<\/a> is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.<\/p>\n<p>This post will discuss utilising Cloudinary to handle adaptive bitrate streaming in Next.js.<\/p>\n<p>The completed project is on CodeSandbox. Check out the <a href=\"https:\/\/codesandbox.io\/s\/cloudinary-adaptive-bitrate-streaming-nxtn9e?file=\/components\/video-player.js\">CodeSandbox<\/a> to get started quickly.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/cloudinary-adaptive-bitrate-streaming-nxtn9e?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"cloudinary-adaptive-bitrate-streaming\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>**GitHub URL: **<\/p>\n<p><a href=\"https:\/\/github.com\/Iheanacho-ai\/adaptive-bitrate-streaming\">https:\/\/github.com\/Iheanacho-ai\/adaptive-bitrate-streaming<\/a><\/p>\n<h2>Prerequisites<\/h2>\n<p>To get the most out of this article, we require the following:<\/p>\n<ul>\n<li>A basic understanding of CSS, JavaScript and React.js<\/li>\n<li>A Cloudinary account, you can create one <a href=\"https:\/\/cloudinary.com\/\">here<\/a>.<\/li>\n<\/ul>\n<h2>Setting up our Next.js app<\/h2>\n<p><a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> is an open-source React framework that enables us to build server-side rendered static web applications.<\/p>\n<p>To create our Next.js app, we navigate to our preferred directory and run the terminal command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    npx create-next-app@latest\n    # or\n    yarn create next-app\n\n<\/code><\/pre>\n<p>After creating our app, we change the directory to the project and start a development server with:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    cd &lt;name of our project&gt;\n    npm run dev\n\n<\/code><\/pre>\n<p>To see our app, we go to <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h2>Installing the Cloudinary Dependencies<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/documentation\">Cloudinary<\/a> is a cloud-based service that provides an end-to-end image and video management solution, including uploads, storage, manipulations, optimizations, and delivery.<\/p>\n<p>We run these commands in our terminal to enable our Next.js app to use the Cloudinary video player.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    npm install lodash cloudinary cloudinary-core cloudinary-video-player\n\n<\/code><\/pre>\n<h2>Uploading the Video Programmatically to Cloudinary.<\/h2>\n<p>After installing the Cloudinary dependencies, we start our project by creating an <code>assets<\/code> folder at the root of our project. This <code>assets<\/code> folder will contain the video we will upload to our Cloudinary Account.<\/p>\n<p>To get the video we are using in this project, check it out <a href=\"https:\/\/github.com\/Iheanacho-ai\/adaptive-bitrate-streaming\/blob\/master\/assets\/relaxing-nature.mp4\">here<\/a>.<\/p>\n<p>Next, we create a <code>.env<\/code> file at the root of our project.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    touch .env\n\n<\/code><\/pre>\n<p>After creating our <code>.env<\/code> file, we go to our Dashboard, and we can see our Cloudinary API Environment variable in the Account Details section. We copy and paste the variable in our <code>.env<\/code> file. This variable should look a lot like this.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    CLOUDINARY_URL=cloudinary:\/\/**************:**************\n\n<\/code><\/pre>\n<p>We then install <code>dotenv<\/code> in our project. This will allow us to use the Environment variable stored in our <code>.env<\/code> file in our project.<\/p>\n<p>To do this, we go to our terminal and run this command.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    npm install dotenv\n\n<\/code><\/pre>\n<p>After running this command in our terminal, we create an <code>upload<\/code> folder at the root of our project. This folder will hold our <code>local.assets.js<\/code> file that contains the code for uploading our video.<\/p>\n<p>In our <code>upload\/local-assets.js<\/code> file, we copy and paste this piece of code below.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    require(&quot;dotenv&quot;).config();\n    const cloudinary = require(&quot;cloudinary&quot;).v2;\n    var up_options = {\n        resource_type: &quot;video&quot;, \n        eager: [\n            { streaming_profile: &quot;full_hd&quot;, format: &quot;m3u8&quot; }],                                   \n        eager_async: true,\n        eager_notification_url: &quot;http:\/\/localhost:3000\/&quot;,\n        public_id: &quot;nature&quot;\n    };\n    cloudinary.uploader.upload(&quot;.\/assets\/relaxing-nature.mp4&quot;, up_options, function(result) {console.log(result);});\n\n<\/code><\/pre>\n<p>The snippet above does the following:<\/p>\n<ul>\n<li>Imports Cloudinary and the Cloudinary API Environment variable stored in our <code>.env<\/code> file.<\/li>\n<li>Defines the streaming profile and format we want our video in.<\/li>\n<li>Gives our video to be uploaded a <code>public_id<\/code> of <code>nature<\/code>.<\/li>\n<li>Uploads our video to our Cloudinary account.<\/li>\n<\/ul>\n<p>We then go to our terminal and run this command.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    node upload\/local-assets.js\n\n<\/code><\/pre>\n<p>This command runs the node.js script to upload the video to Cloudinary. To see our video, we go to our Cloudinary Media library.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_7A1F3FAD64F23E524782B4F1124A161C400D6BAE5CE7DD15C25D6F16238D0DB5_1646477865847_cloudinary-media-library.PNG\" alt=\"Cloudinary Video Dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1599\" height=\"610\"\/><\/p>\n<h2>Creating Our Video Player<\/h2>\n<p>We create a <code>components<\/code> folder at the root of our project to create our video player. This will hold our <code>video-player.js<\/code> file and its <code>video-player.css<\/code> stylesheet.<\/p>\n<p>In our <code>components\/video-player.js<\/code> file, we create our video player component using the HTML5 native <code>video<\/code> element.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    const VideoPlayer = () =&gt; {\n      return (\n        &lt;div&gt;\n          &lt;video id=&quot;video-player&quot; className=&quot;video-player&quot;\/&gt;\n        &lt;\/div&gt;\n      );\n    };\n    export default VideoPlayer;\n<\/code><\/pre>\n<p>Next up, we go to our Cloudinary Dashboard. In the \u2018Account Details\u2019 section, we copy our cloud name to create a Cloudinary instance.<\/p>\n<p>In the VideoPlayer component of <code>components\/video-player.js<\/code>, we create a new Cloudinary instance using our cloud name.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    const cld = new Cloudinary({ cloud_name: &lt;our cloud name&gt;, secure: true});\n\n<\/code><\/pre>\n<p>Next, we write a <code>useEffect<\/code> hook in the <code>VideoPlayer<\/code> component to run when our app mounts. This would be responsible for sourcing and playing our video from Cloudinary.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    useEffect(() =&gt; {\n      const videoPlayer = cld.videoPlayer(&quot;video-player&quot;, {\n        controls: true\n      });\n      videoPlayer.source(&quot;nature&quot;);\n    });\n\n<\/code><\/pre>\n<p>In the <code>useEffect<\/code> hook, we instantiate the video player by using Cloudinary\u2019s <code>videoPlayer()<\/code> method, which then receives two arguments:<\/p>\n<ul>\n<li>The <code>video<\/code> element\u2019s <code>id<\/code>.<\/li>\n<li>An object which sets the controls on the player to true.<\/li>\n<\/ul>\n<p>We pass in the public id of the video as a parameter to the <code>source()<\/code> method. This public id is the same as we defined during the video upload.<\/p>\n<p>With that, we have created a Cloudinary video player instance, our <code>components\/video-player.js<\/code> file should look like this.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    import &quot;cloudinary-video-player\/dist\/cld-video-player.min.js&quot;;\n    import &quot;cloudinary-video-player\/dist\/cld-video-player.min.css&quot;;\n    import { Cloudinary } from &quot;cloudinary-core&quot;;\n    import { useEffect } from &quot;react&quot;;\n    const VideoPlayer = () =&gt; {\n    \n      const cld = new Cloudinary({ cloud_name: &quot;amarachi-2812&quot; });\n      useEffect(() =&gt; {\n        const videoPlayer = cld.videoPlayer(&quot;video-player&quot;, {\n          controls: true\n        });\n        videoPlayer.source(&quot;nature&quot;);\n      });\n    \n      return (\n        &lt;div&gt;\n          &lt;video id=&quot;video-player&quot; className=&quot;video-player&quot;\/&gt;\n        &lt;\/div&gt;\n      );\n    };\n    export default VideoPlayer;\n\n<\/code><\/pre>\n<p>We add some styles to our video player in <code>components\/video-player.css<\/code> to specify its width and height.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    .video-player{\n        width: 300px;\n        height: 300px;\n    }\n\n<\/code><\/pre>\n<p>Next, we import our video player component in our <code>pages\/index.js<\/code> file to render it on the homepage and make it visible in the browser.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    import Head from &quot;next\/head&quot;;\n    import styles from &quot;..\/styles\/Home.module.css&quot;;\n    import dynamic from &quot;next\/dynamic&quot;; \/\/add\n    \n    const NativeVideo = dynamic(\n      () =&gt; import(&quot;..\/components\/video-player&quot;),\n      { ssr: false }\n    );\n    \n    export default function IndexPage() {\n      return (\n        &lt;div className={styles.container}&gt;\n          &lt;Head&gt;\n            &lt;title&gt;Video Player with Cloudinary&lt;\/title&gt;\n            &lt;link rel=&quot;icon&quot; href=&quot;\/favicon.ico&quot; \/&gt;\n          &lt;\/Head&gt;\n          &lt;header className={styles.header}&gt;\n            &lt;h1&gt;Video Player&lt;\/h1&gt;\n          &lt;\/header&gt;\n          &lt;section className={styles.video_player}&gt;\n            {\/* &lt;VideoPlayer \/&gt; *\/}\n            &lt;NativeVideo \/&gt;\n          &lt;\/section&gt;\n        &lt;\/div&gt;\n      );\n    }\n\n<\/code><\/pre>\n<p>This snippet above loads our <code>VideoPlayer<\/code> component with dynamic imports. Dynamically importing our <code>VideoPlayer<\/code> component ensures that it is not rendered on the server-side. Doing this erases errors that the browser might have thrown. Errors like <code>window is not defined<\/code> etc.<\/p>\n<p>Here\u2019s what the embedded video player looks like:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_7A1F3FAD64F23E524782B4F1124A161C400D6BAE5CE7DD15C25D6F16238D0DB5_1646484466727_video-abs.gif\" alt=\"Cloudinary Video Player\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"258\"\/><\/p>\n<h2>Handling Adaptive Bitrate Streaming<\/h2>\n<p>To apply the adaptive bitrate streaming technique in our videos, we go into our <code>components\/video-player.js<\/code> file and pass in an object as a second parameter to the <code>source()<\/code> method.<\/p>\n<p>This object does the following:<\/p>\n<ul>\n<li>Specifies the video streaming format using the <code>sourceTypes<\/code> variable.<\/li>\n<li>Defines the streaming profile of our video.<\/li>\n<\/ul>\n<p><strong>NOTE: It is important we use the streaming profile we defined when uploading our video to our Cloudinary Account.<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    videoPlayer.source(&quot;videoplayback_1_pr2hzi&quot;, { \n        sourceTypes: ['hls'], \n        transformation: {\n            streaming_profile: 'full_hd',\n        } \n    });\n\n<\/code><\/pre>\n<p>With that, we have successfully handled adaptive bitrate streaming in our project. Our <code>component\/video-player.js<\/code> should look like this.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    import &quot;cloudinary-video-player\/dist\/cld-video-player.min.js&quot;;\n    import &quot;cloudinary-video-player\/dist\/cld-video-player.min.css&quot;;\n    import { Cloudinary } from &quot;cloudinary-core&quot;;\n    import { useEffect } from &quot;react&quot;;\n    \n    const VideoPlayer = () =&gt; {\n      const cld = new Cloudinary({ cloud_name: &quot;amarachi-2812&quot; });\n      useEffect(() =&gt; {\n        const videoPlayer = cld.videoPlayer(&quot;video-player&quot;, {\n          controls:true,\n          autoplay: true\n        });\n        videoPlayer.source(&quot;videoplayback_1_pr2hzi&quot;, { \n          sourceTypes: ['hls'], \n          transformation: {\n              streaming_profile: 'hd',\n          } \n      });\n      });\n    \n      return (\n        &lt;div&gt;\n          &lt;video id=&quot;video-player&quot; className=&quot;video-player&quot;\/&gt;\n        &lt;\/div&gt;\n      );\n    };\n    export default VideoPlayer;\n\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_7A1F3FAD64F23E524782B4F1124A161C400D6BAE5CE7DD15C25D6F16238D0DB5_1646484484778_video-abs.gif\" alt=\"Cloudinary Video Player\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"258\"\/><\/p>\n<p>In the video player, we can see that clicking on the Cloudinary icon opens a list of video quality options. Selecting the <code>auto<\/code> option automatically adjusts the video quality to match the network bandwidth.<\/p>\n<h2>Conclusion<\/h2>\n<p>This article discussed using Cloudinary to dynamically dictate what video quality our video player should render depending on the available bandwidth.<\/p>\n<h2>Resources<\/h2>\n<p>You may find the following resources useful.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.dropbox.com\/scl\/fi\/xc5wotu951fs93wxaiwvz\/How-to-Serve-Videos-in-Next.js-Applications-With-Cloudinary.paper?dl=0&amp;rlkey=mssdhbd4egorfccluhzfg7fy3\">How to Serve Videos in Next.js Applications With Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/adaptive_bitrate_streaming\">Adaptive Bitrate Streaming | Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/video_player_hls_dash?query=Adaptice&amp;c_query=HLS%20and%20MPEG-DASH%20adaptive%20streaming\">HLS and MPEG-DASH adaptive streaming.<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/davidwalsh.name\/10-amazing-media-tricks-made-possibly-by-cloudinary\">10 Amazing Media Tricks Made Possible by Cloudinary<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27966,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,175,212,371,303],"class_list":["post-27965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-jamstack","tag-next-js","tag-under-review","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Handle adaptive bitrate streaming<\/title>\n<meta name=\"description\" content=\"Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handle adaptive bitrate streaming\" \/>\n<meta property=\"og:description\" content=\"Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T20:08:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-23T20:24:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"8000\" \/>\n\t<meta property=\"og:image:height\" content=\"4500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Handle adaptive bitrate streaming\",\"datePublished\":\"2022-03-24T20:08:26+00:00\",\"dateModified\":\"2025-03-23T20:24:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"JAMStack\",\"Next.js\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\",\"name\":\"Handle adaptive bitrate streaming\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA\",\"datePublished\":\"2022-03-24T20:08:26+00:00\",\"dateModified\":\"2025-03-23T20:24:04+00:00\",\"description\":\"Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA\",\"width\":8000,\"height\":4500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handle adaptive bitrate streaming\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Handle adaptive bitrate streaming","description":"Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Handle adaptive bitrate streaming","og_description":"Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T20:08:26+00:00","article_modified_time":"2025-03-23T20:24:04+00:00","og_image":[{"width":8000,"height":4500,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Handle adaptive bitrate streaming","datePublished":"2022-03-24T20:08:26+00:00","dateModified":"2025-03-23T20:24:04+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA","keywords":["Guest Post","HTML5","JAMStack","Next.js","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/","name":"Handle adaptive bitrate streaming","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA","datePublished":"2022-03-24T20:08:26+00:00","dateModified":"2025-03-23T20:24:04+00:00","description":"Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA","width":8000,"height":4500},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-adaptive-bitrate-streaming-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Handle adaptive bitrate streaming"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925792\/Web_Assets\/blog\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b\/86cd01a26473efc1637c16c59efff7167cbd5418-8000x4500-1_279661639b.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27965"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27965\/revisions"}],"predecessor-version":[{"id":37256,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27965\/revisions\/37256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27966"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}