{"id":21722,"date":"2018-04-16T18:44:48","date_gmt":"2018-04-16T18:44:48","guid":{"rendered":"http:\/\/html5_video_tags_won_t_do_for_your_videos"},"modified":"2025-02-21T16:29:25","modified_gmt":"2025-02-22T00:29:25","slug":"html5_video_tags_won_t_do_for_your_videos","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos","title":{"rendered":"Adaptive HLS Streaming Using the HTML5 Video Tag"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>When the <code>&lt;video&gt;<\/code> HTML tag was first introduced in 2007, <a href=\"https:\/\/whatwg.org\/\">Web Hypertext Application Technology Working Group (WHATWG)<\/a>(<a href=\"https:\/\/whatwg.org\/\">https:\/\/whatwg.org\/<\/a>) took interactivity with the Web to a whole new level. No longer do you have to tackle unique plug-ins or insert weird markups before posting <a href=\"https:\/\/cloudinary.com\/blog\/html5_video_player\">videos<\/a> online. Who still remembers the Flash days?<\/p>\n<p>This is part of a series of articles about <a href=\"https:\/\/cloudinary.com\/guides\/live-streaming-video\/a-guide-on-live-streaming-and-tips-for-making-it-a-success\">Live Streaming Video<\/a>.<\/p>\n<h2>Understanding the Shortcomings of the <code>&lt;video&gt;<\/code> Tag<\/h2>\n<p>Despite those groundbreaking developments, trusting the <code>&lt;video&gt;<\/code> tag alone to handle your <a href=\"https:\/\/cloudinary.com\/video_api\">video<\/a> tasks remains a subject of intense debate because that tag comes with disadvantages, for example:<\/p>\n<ul>\n<li>\n<p><strong>Longer loading time:<\/strong>  Milliseconds could make all the difference with respect to page performance. The plain <code>&lt;video&gt;<\/code> tag might cause slowdowns that lead to site inaccessibility by older computers.<\/p>\n<\/li>\n<li>\n<p><strong>Challenges with SEO optimization:<\/strong>  Unless  you add extensive informative and useful content that relates to <code>&lt;video&gt;<\/code>, a page that looks perfect to the human eye can appear downright skeletal to Google\u2019s Web crawler.<\/p>\n<\/li>\n<li>\n<p><strong>Potential browser incompatibility:<\/strong>  Advancements in browsers over time have led to the potential risk of some viewers accessinga site with a background that shows a glaring error message instead of your video. Even though you can take steps to reduce that risk, such as posting videos in various formats with multiple sources, depending on the user\u2019s browser; or displaying a static image as a last resort, the fact remains that users are denied the intended display.<\/p>\n<\/li>\n<li>\n<p><strong>Higher production overhead:<\/strong>  Working with the <code>&lt;video&gt;<\/code> tag only requires that you write large chunks of fallback code so that your video can reach the widest audience. Doing so could easily lead to verbose code that is hard to maintain in the long run.<\/p>\n<\/li>\n<\/ul>\n<p>Over the past decade, several solutions that address the loopholes in the <code>&lt;video&gt;<\/code> tag have emerged, one of which being the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary Video Player<\/a>, a JavaScript-based HTML5 player that you can easily embed into Web pages.<\/p>\n<h2>Introducing the Capabilities of the Cloudinary Video Player<\/h2>\n<p>In essence, <strong>Cloudinary is the media-management platform for Web and mobile developers<\/strong>.  Its Video Player features numerous capabilities, such as the following:<\/p>\n<ul>\n<li>\n<p>Broad <strong>device support,<\/strong> which works on <strong>a wide range of devices<\/strong>on both mobile apps and Web browsers.<\/p>\n<\/li>\n<li>\n<p>Integrated support of all model player controls, such as:<\/p>\n<ul>\n<li>Play\/Pause<\/li>\n<li>Mute\/Unmute<\/li>\n<li>\n<strong>Analytics ready<\/strong>\n<\/li>\n<li>\n<strong>Scroll to play<\/strong>\n<\/li>\n<li>Volume control<\/li>\n<li>\n<strong>Maximize\/Exit<\/strong>\n<\/li>\n<li>\n<strong>Loop<\/strong> and <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_api_reference\">other related features<\/a>, all customizable.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Video <strong>transformations<\/strong>, which you can apply to all the videos delivered in that player.<\/p>\n<\/li>\n<li>\n<p><strong>Multiple players<\/strong> on the same page. You can configure each player with different or identical options but assign the same sources to the players.<\/p>\n<\/li>\n<li>\n<p>Support of <strong>popular video formats<\/strong>, such as <code>.mp4<\/code>, <code>.ogv<\/code>, <code>.webm<\/code>, <code>.mov<\/code>. Feel free to specify <strong>multiple formats<\/strong> for your videos; the player automatically selects the best one for the browser in which  a video is playing.<\/p>\n<\/li>\n<li>\n<p>Full support for <a href=\"https:\/\/cloudinary.com\/video_api\"><strong>adaptive bitrate streaming<\/strong><\/a>, that is, <a href=\"https:\/\/cloudinary.com\/video_api\">HTTP Live Streaming (<strong>HLS<\/strong>)<\/a> and Dynamic Adaptive Streaming Over HTTP (<strong>MPEG-DASH<\/strong>), including automatic generation of all required streaming representations and supporting files.<\/p>\n<\/li>\n<li>\n<p>A <strong>playlist<\/strong>, on which you list all your videos or only those that contain a tag that you specify. Optionally, you can display a <strong>Next<\/strong>  thumbnail toward the end of each of the videos on the list as a clue of the upcoming video.<\/p>\n<\/li>\n<li>\n<p><strong>Analytics,<\/strong> which track the number of viewers and views with the related timestamps. . Also tracked are such events as start, pause, the percentages of the viewing sessions as they relate to the full length of the videos. Subsequently, the Cloudinary Video Player can pass the data to your Google Analytics account or other analytics trackers that you specify.<\/p>\n<\/li>\n<li>\n<p>Display of <strong>recommended videos<\/strong> at the end of each of the videos.<\/p>\n<\/li>\n<\/ul>\n<p>For details on the capabilities of the Cloudinary Video Player, see  the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player#video_player_features\">documentation<\/a>.<\/p>\n<h2>Leveraging the Cloudinary Video Player<\/h2>\n<p>Now let\u2019s take a look at how to take advantage of the Cloudinary Video Player\u2019s features on your videos and make your site stand out.<\/p>\n<h3>Installing the Player<\/h3>\n<p>First, install the Cloudinary Video Player, as follows:<\/p>\n<p>As a start, edit the HTML file and list the files that you need for running the player through  <a href=\"https:\/\/unpkg.com\/#\/\">the unpkg content delivery network (CDN)<\/a>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"> <span class=\"hljs-comment\">&lt;!-- HTML --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/cloudinary-core\/cloudinary-core-shrinkwrap.min.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/cloudinary-video-player\/dist\/cld-video-player.min.js\"<\/span>\n  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"2\">\n<li>\n<p>You can also install via npm. On the command line, install the Cloudinary Video Player:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">install via terminal\n$ npm install lodash cloudinary-core cloudinary-video-player\n<\/code><\/span><\/pre>\n<\/li>\n<li>\n<p>Add the CSS and JavaScript links to the HTML pages on which you plan to run the Cloudinary Video Player:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"node_modules\/cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"node_modules\/lodash\/lodash.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"node_modules\/cloudinary-core\/cloudinary-core.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"node_modules\/cloudinary-video-player\/dist\/cld-video-player.min.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>OR<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> cloudinary <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'cloudinary-core'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'cloudinary-video-player'<\/span>;\n\n    <span class=\"hljs-comment\">\/\/ CSS<\/span>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/..\/node_modules\/cloudinary-video-player\/dist\/cld-video-player.min.css'<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now that the installation is complete. Next, we\u2019ll learn the steps for optimizing videos with Cloudinary for an engaging visual experience.<\/p>\n<\/li>\n<\/ol>\n<h3>Posting Videos on Page<\/h3>\n<p>Posting a video on your page takes only a few simple steps:<\/p>\n<ol>\n<li>\n<p>In the HTML file, create a <code>video<\/code> tag with a <code>cld-video-player<\/code> class and an <code>id<\/code> value of your choice. In addition, you can add other standard HTML5 video hls player attributes, as in this example<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span>\n  <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-demo-player\"<\/span>\n  <span class=\"hljs-attr\">controls<\/span>\n  <span class=\"hljs-attr\">autoplay<\/span>\n  <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"cld-video-player\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p>Instantiate a new Cloudinary instance with your cloud name. To acquire a cloud name,  one, <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">sign up with Cloudinary for free<\/a>. Furthermore, set other configuration parameters, as you desire. See this example:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> cloud = cloudinary.Cloudinary.<span class=\"hljs-keyword\">new<\/span>({ cloud_name: <span class=\"hljs-string\">\"my-cloudname\"<\/span>, secure: <span class=\"hljs-keyword\">true<\/span>});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p>Call Cloudinary\u2019s built in <code>videoPlayer<\/code> method to initialize your video player. Be sure to specify the <code>id<\/code> value you defined earlier:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> demoplayer = cld.videoPlayer(<span class=\"hljs-string\">'demo-player'<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p><strong>Optional.<\/strong> To add multiple players with identical configurations to your page, call the <code>videoPlayers<\/code> method and specify the public IDs for each of the <code>&lt;video&gt;<\/code> tags, hence saving yourself the chore of defining the tags\u2019  <code>id<\/code> attributes:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> players = cld.videoPlayers(<span class=\"hljs-string\">'.cld-video-player'<\/span>,\n{&lt;Insert your configurations here.&gt;}\n)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n<p>With the <code>videoPlayer<\/code> method, you can list your preferences, such as which video to play and which transformations to apply. You can also configure other settings either as properties of your <code>&lt;video&gt;<\/code> tag or as constructor variables of  <code>videoPlayer<\/code>. Since those settings and transformations relate to the Video Player itself, they also apply to all the video sources that are played there.<\/p>\n<h3>Creating Playlists<\/h3>\n<p>Now create a playlist on your page with the <code>videoPlayer.playlist<\/code> method and define the videos\u2019 public IDs. Plus, you can do the following::<\/p>\n<ul>\n<li>Configure transformations for each of the videos by means of the  public IDs.<\/li>\n<li>Generate another playlist for all the videos in your Cloudinary account with a tag that you specify.<\/li>\n<li>Control your playlist with the <code>playlist<\/code> method, for example, navigate to a specific video on the playlist with an index and auto-advance to the next one when a video  ends.<\/li>\n<\/ul>\n<p>The following code creates a playlist with three video IDs:<code>book<\/code>, <code>ocean<\/code>, and <code>dog<\/code>. <code>book<\/code> plays with a transformation that overrides the default player settings. The next video in the list automatically begins 10 seconds after the previous one has finished playing. When the last video ends, a replay starts from the beginning.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">vplayer.playlist(&#91;\n  <span class=\"hljs-string\">'book'<\/span>,\n  { <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">'oceans'<\/span>,\n    <span class=\"hljs-attr\">transformation<\/span>: { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">500<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">'pad'<\/span> } },\n  <span class=\"hljs-string\">'dog'<\/span>\n], <span class=\"hljs-attr\">autoAdvance<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-literal\">true<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h4>The playlistByTag Method<\/h4>\n<p>With a combination of Cloudinary\u2019s built-in methods and capabilities, you can create a playlist for a specific tag. Calling the <code>playlistByTag<\/code> method generates such a  tag and its options.<\/p>\n<p>The  example below does the following:<\/p>\n<p>Create a playlist from all videos with a tag called <code>demo<\/code>.\nFor every video source <code>demo<\/code> receives, <code>playlistByTag<\/code> applies a transformation of a 10-degree angle rotation.\nlay each video in succession and then reloop to the beginning of the playlist, displaying he <code>pcoming video<\/code> thumbnail five seconds before the end of each video.\nDisplays a message in the console log at the end of the process.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">player.playlistByTag(<span class=\"hljs-string\">\"demo\"<\/span>\n{ <span class=\"hljs-attr\">sourceParams<\/span>: { <span class=\"hljs-attr\">angle<\/span>: <span class=\"hljs-number\">10<\/span> }, <span class=\"hljs-attr\">autoAdvance<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-attr\">presentUpcoming<\/span>: <span class=\"hljs-number\">5<\/span> })\n.then(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">player<\/span>)\n<\/span>{\n            <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Playlist loaded\"<\/span>)\n })\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h4>The sourcesByTag Method<\/h4>\n<p>To retrieve the sources for a tag that you specify without actually creating a playlist, call the<code>sourcesByTag<\/code> method, which shares the same syntax and supports the same options as <code>playlistByTag<\/code>. Simple and straightforward.<\/p>\n<p>The example below retrieves the source data from all the videos with the tag <code>demo<\/code>,subsequently passing the sources to the <code>playlist<\/code> method.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">player.sourcesByTag(<span class=\"hljs-string\">\"demo\"<\/span>)\n  .then(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">sources<\/span>) <\/span>{\n    player.playlist(sources)\n  })\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Formatting Videos With HLS or MPEG-DASH<\/h2>\n<p>The HTML5  <code>&lt;video&gt;<\/code> tag by itself along with certain built-in video players do not work with HLS or MPEG-DASH adaptive bitrate-streaming formats. With the Cloudinary <a href=\"https:\/\/demo.cloudinary.com\/video-player\/\">Video Player<\/a>, you can automatically transcode from standard video formats to HLS, MPEG-DASH, or any other similar video format. You can also stream any video in your Cloudinary account to your audience according to the bandwidth and CPU capacity that the Video Player detects in real time.<\/p>\n<p>Be sure to transcode your video to HLS or MPEG-DASH before posting the video.. Transcoding involves a multistep process. For details, see the <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#adaptive_bitrate_streaming_hls_and_mpeg_dash\">related Cloudinary documentation<\/a>.<\/p>\n<p>Also, when uploading  a video to your Cloudinary account, specify an eager transformation with the streaming profile your desire and an adaptive streaming format. Doing so ensures that Cloudinary generates all the required files and video representations, ready for delivery  on request.<\/p>\n<p>Furthermore, you can specify which video source-file to play with the <code>sourceTypes<\/code> method or the <code>data-cld-source-types<\/code> attribute to apply <code>hls<\/code> or <code>dash<\/code> in the transformation and add the streaming profile of your preference. Here are two examples:<\/p>\n<p><strong>With the <code>sourceTypes<\/code> method:<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">player.source(<span class=\"hljs-string\">'oceans'<\/span>, { <span class=\"hljs-attr\">sourceTypes<\/span>: &#91;<span class=\"hljs-string\">'hls'<\/span>], <span class=\"hljs-attr\">transformation<\/span>: {\n <span class=\"hljs-attr\">streaming_profile<\/span>: <span class=\"hljs-string\">'hd'<\/span> } })\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>With the <code>data-cld-source-types<\/code> method:<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">data-cld-source=<span class=\"hljs-string\">'{\"publicId\": \"oceans\", \"transformation\": {\"streaming_profile\": \"hd\"}}'<\/span>\ndata-cld-source-types=<span class=\"hljs-string\">'&#91;\"hls\"]'<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Collecting Analytics<\/h2>\n<p>With the Cloudinary Video Player, you can collect data on how and when your customers are watching your videos by capturing important events and passing them to your Google Analytics account or other analytics trackers. To  use this feature with Google Analytics, do either of the following:<\/p>\n<p>Set the <code>analytics<\/code> parameter to <code>true<\/code>, which monitors all available events except <code>timeplayed<\/code>.\nSpecify the events to monitor and the event subsettings, if any.<\/p>\n<p>Take a look at these examples:<\/p>\n<p><strong>etting the <code>analytics<\/code> parameter to  <code>true<\/code>:<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> vplayer = cld.videoPlayer({ ... , <span class=\"hljs-attr\">analytics<\/span>: <span class=\"hljs-literal\">true<\/span> })\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Specifying the events to monitor:<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> vplayer = cld.videoPlayer({ ... , <span class=\"hljs-attr\">analytics<\/span>: {\n  <span class=\"hljs-attr\">events<\/span>: &#91;<span class=\"hljs-string\">'play'<\/span>, <span class=\"hljs-string\">'pause'<\/span>, <span class=\"hljs-string\">'ended'<\/span>, { <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'percentsplayed'<\/span>, <span class=\"hljs-attr\">percents<\/span>: &#91;<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">70<\/span>, <span class=\"hljs-number\">90<\/span>]   }, <span class=\"hljs-string\">'error'<\/span>]\n} })\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Afterwards, add the Google Analytics tracking code snippet with the Google tracking ID near the top of the <code>&lt;head&gt;<\/code> tag on your HTML page:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">i,s,o,g,r,a,m<\/span>)<\/span>{i&#91;<span class=\"hljs-string\">'GoogleAnalyticsObject'<\/span>]=r;i&#91;r]=i&#91;r]||<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n(i&#91;r].q=i&#91;r].q||&#91;]).push(<span class=\"hljs-built_in\">arguments<\/span>)},i&#91;r].l=<span class=\"hljs-number\">1<\/span>*<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>();a=s.createElement(o),\nm=s.getElementsByTagName(o)&#91;<span class=\"hljs-number\">0<\/span>];a.async=<span class=\"hljs-number\">1<\/span>;a.src=g;m.parentNode.insertBefore(a,m)\n})(<span class=\"hljs-built_in\">window<\/span>,<span class=\"hljs-built_in\">document<\/span>,<span class=\"hljs-string\">'script'<\/span>,<span class=\"hljs-string\">'https:\/\/www.google-analytics.com\/analytics.js'<\/span>,<span class=\"hljs-string\">'ga'<\/span>);\n\nga(<span class=\"hljs-string\">'create'<\/span>, <span class=\"hljs-string\">'UA-XXXXX-Y'<\/span>, <span class=\"hljs-string\">'auto'<\/span>);\nga(<span class=\"hljs-string\">'send'<\/span>, <span class=\"hljs-string\">'pageview'<\/span>);\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Replace the <code>'UA-XXXXX-Y'<\/code> string with the tracking ID of the Google Analytics property you wish to track. To obtain a tracking ID, <a href=\"https:\/\/analytics.google.com\/analytics\/web\/provision\/?authuser=0#provision\/SignUp\/\">sign up for Google Analytics<\/a>.<\/p><\/div>\n<h2>Moving On<\/h2>\n<p>Bear in mind that, because the Cloudinary Video Player is scaffolded over the VideoJS player core API, you can customize your player with the <code>vplayer.videojs<\/code> property, which furnishes other robust capabilities, including that of  heading off potential issues. For details, see the <a href=\"http:\/\/docs.videojs.com\/Player.html\">VideoJS player documentation<\/a>.<\/p>\n<p>The Cloudinary Video Player offers numerous ways for enhancing videos for posting on the Web. In particular, its hands-on and comprehensive approach for tackling the challenges of optimum video delivery is concrete proof that it\u2019s the right tool to choose.<\/p>\n<!-----\n\n\n\nConversion time: 0.219 seconds.\n\n\nUsing this Markdown file:\n\n1. Paste this output into your source file.\n2. See the notes and action items below regarding this conversion run.\n3. Check the rendered output (headings, lists, code blocks, tables) for proper\n   formatting and use a linkchecker before you publish this page.\n\nConversion notes:\n\n* Docs to Markdown version 1.0\u03b235\n* Thu Mar 07 2024 16:51:57 GMT-0800 (PST)\n* Source doc: Untitled document\n* This is a partial selection. Check to make sure intra-doc links work.\n----->\n<p>Related content: Read our guide to <a href=\"https:\/\/cloudinary.com\/guides\/live-streaming-video\/preparing-live-streams-for-video-on-demand\">vod live stream<\/a>.<\/p>\n<hr \/>\n<h2>Want to learn more about HTML5 Video hls Players?<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/html5_video_player\">Ultimate HTML5 Video Player Showdown: 10 Players Compared<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/http_live_streaming_hls_a_practical_guide\">HTTP Live Streaming (HLS): a Practical Guide<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\">Adaptive HLS Streaming Using the HTML5 Video Tag<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_get_the_most_from_the_html5_video_player\">Get More Out of HTML5 Video Tags with Cloud-Based Video Transcoding<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21723,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,145,303,305],"class_list":["post-21722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-html5","tag-video","tag-video-api"],"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>Adaptive HLS Streaming Using the HTML5 Video Tag<\/title>\n<meta name=\"description\" content=\"How to leverage the Cloudinary Video Player\u2019s features to overcome the disadvantages of HTML5 video tag, such as the ability to work with HLS or MPEG-DASH formats.\" \/>\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\/html5_video_tags_won_t_do_for_your_videos\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adaptive HLS Streaming Using the HTML5 Video Tag\" \/>\n<meta property=\"og:description\" content=\"How to leverage the Cloudinary Video Player\u2019s features to overcome the disadvantages of HTML5 video tag, such as the ability to work with HLS or MPEG-DASH formats.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-16T18:44:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T00:29:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"770\" \/>\n\t<meta property=\"og:image:height\" content=\"424\" \/>\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\/html5_video_tags_won_t_do_for_your_videos#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adaptive HLS Streaming Using the HTML5 Video Tag\",\"datePublished\":\"2018-04-16T18:44:48+00:00\",\"dateModified\":\"2025-02-22T00:29:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"HTML5\",\"Video\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2018\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\",\"url\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\",\"name\":\"Adaptive HLS Streaming Using the HTML5 Video Tag\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA\",\"datePublished\":\"2018-04-16T18:44:48+00:00\",\"dateModified\":\"2025-02-22T00:29:25+00:00\",\"description\":\"How to leverage the Cloudinary Video Player\u2019s features to overcome the disadvantages of HTML5 video tag, such as the ability to work with HLS or MPEG-DASH formats.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA\",\"width\":770,\"height\":424},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adaptive HLS Streaming Using the HTML5 Video Tag\"}]},{\"@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":"Adaptive HLS Streaming Using the HTML5 Video Tag","description":"How to leverage the Cloudinary Video Player\u2019s features to overcome the disadvantages of HTML5 video tag, such as the ability to work with HLS or MPEG-DASH formats.","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\/html5_video_tags_won_t_do_for_your_videos","og_locale":"en_US","og_type":"article","og_title":"Adaptive HLS Streaming Using the HTML5 Video Tag","og_description":"How to leverage the Cloudinary Video Player\u2019s features to overcome the disadvantages of HTML5 video tag, such as the ability to work with HLS or MPEG-DASH formats.","og_url":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos","og_site_name":"Cloudinary Blog","article_published_time":"2018-04-16T18:44:48+00:00","article_modified_time":"2025-02-22T00:29:25+00:00","og_image":[{"width":770,"height":424,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos"},"author":{"name":"","@id":""},"headline":"Adaptive HLS Streaming Using the HTML5 Video Tag","datePublished":"2018-04-16T18:44:48+00:00","dateModified":"2025-02-22T00:29:25+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA","keywords":["Asset Management","HTML5","Video","Video API"],"inLanguage":"en-US","copyrightYear":"2018","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos","url":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos","name":"Adaptive HLS Streaming Using the HTML5 Video Tag","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA","datePublished":"2018-04-16T18:44:48+00:00","dateModified":"2025-02-22T00:29:25+00:00","description":"How to leverage the Cloudinary Video Player\u2019s features to overcome the disadvantages of HTML5 video tag, such as the ability to work with HLS or MPEG-DASH formats.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA","width":770,"height":424},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adaptive HLS Streaming Using the HTML5 Video Tag"}]},{"@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\/v1649720562\/Web_Assets\/blog\/Cloudinary_Video_Player_2000x1100_v1_1\/Cloudinary_Video_Player_2000x1100_v1_1.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21722","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=21722"}],"version-history":[{"count":7,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21722\/revisions"}],"predecessor-version":[{"id":36934,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21722\/revisions\/36934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21723"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}