{"id":13128,"date":"2015-07-20T00:00:00","date_gmt":"2015-07-20T04:00:00","guid":{"rendered":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/"},"modified":"2025-09-23T20:23:20","modified_gmt":"2025-09-23T20:23:20","slug":"video-js-captions-subtitles","status":"publish","type":"resources","link":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/","title":{"rendered":"Video.js Captions &#038; Subtitles"},"content":{"rendered":"\n<div class=\"wp-block-group is-style-dark alignfull p-post-header has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained has-background is-style-dark--1\" style=\"padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);background-image:url(&#039;\/wp-content\/themes\/core\/assets\/media\/backgrounds\/hero-wave-resources.svg&#039;);background-position:50% 50%;background-size:cover;\">\n<div class=\"wp-block-group aligngrid has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-buttons aligngrid is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-ghost is-style-reversed is-style-ghost--2\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/resource-library\">Resource Library<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity aligngrid\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:0\"\/>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center aligngrid is-layout-flex wp-container-core-columns-is-layout-008400e6 wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:0\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:800px\"><div style=\"padding-bottom:0;padding-top:0;\" class=\"is-style-category wp-block-tribe-terms\"><ul class=\"wp-block-tribe-terms__list\"><li class=\"wp-block-tribe-terms__term\"><span class=\"wp-block-tribe-terms__link t-category\">Captioning<\/span><\/li><\/ul><\/div>\n\n<h1 style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:0;\" class=\"alignwide wp-block-post-title\">Video.js Captions &#038; Subtitles<\/h1>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.3playmedia.com\/services\/features\/caption-import\/\">Access This Resource<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--30)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading is-style-x-small is-style-x-small--3\" id=\"h-how-to-add-captions-subtitles-and-interactive-transcripts-in-video-js\"><strong>How to Add Captions, Subtitles, and Interactive Transcripts in Video.js<\/strong><br><\/h2>\n\n\n\n<p>3Play Media allows you to add closed captions and multilingual subtitles to Video.js videos, which use HTML5. Video.js videos are also compatible with our\u00a0<a href=\"https:\/\/www.3playmedia.com\/platform\/features\/plugin\/\">interactive transcript<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.3playmedia.com\/platform\/features\/plugin\/\">captions plugin<\/a>. Video plugins can be embedded with Video.js by inserting a single line of code on your webpage.<\/p>\n\n\n\n<h2 class=\"wp-block-heading is-style-x-small is-style-x-small--4\" id=\"h-how-to-add-closed-captions-in-video-js\"><strong>How to Add Closed Captions in Video.js<\/strong><\/h2>\n\n\n\n<p><em>If you are publishing a video on Video.js, you can upload a caption file to the web and associate it with your video. Here\u2019s how:<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading is-style-xx-small is-style-xx-small--5\" id=\"h-1-submit-your-video-for-transcription-amp-captioning\">1. Submit Your Video for Transcription &amp; Captioning<\/h3>\n\n\n\n<p>First, you need to have your video transcribed. From that transcript, you will need a timed-text file, or caption file, in the appropriate format for the media player.<\/p>\n\n\n\n<p>The easiest way to get a transcript and caption file is to submit your video to a\u00a0<a href=\"https:\/\/www.3playmedia.com\/services\/captioning\/\">professional captioning company<\/a>.<\/p>\n\n\n\n<p>To submit your video for transcription to 3Play Media, log into your 3Play Media account. On your account dashboard, hit&nbsp;<strong>Upload Media<\/strong>. You can then upload your video file directly from your computer (<strong>From Computer<\/strong>&nbsp;tab) or from a link to your video online (<strong>From Links<\/strong>). Follow the prompts to select your desired turnaround time and transcription service. You\u2019ll receive an email when your captions are ready.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/09\/07-23-2015-Video-js-WebVTT-1-300x262.jpg.webp\" alt=\"Screenshot of WebVTT selected under Web Caption Formats\" class=\"wp-image-9685\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading is-style-xx-small is-style-xx-small--6\" id=\"h-2-download-your-caption-file-in-webvtt-format\">2. Download Your Caption File in WebVTT Format<\/h3>\n\n\n\n<p>Since Video.js is an HTML5 player, it supports closed captions in WebVTT (.vtt) format.<\/p>\n\n\n\n<p>To download your captions, log into your 3Play Media account. Go to the&nbsp;<strong>My Files<\/strong>&nbsp;page in your 3Play Media account and select your recording. Click&nbsp;<strong>Download<\/strong>&nbsp;and select the&nbsp;<strong>WebVTT<\/strong>&nbsp;format. Specify any advanced settings and save the .vtt caption file to your computer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading is-style-xx-small is-style-xx-small--7\" id=\"h-3-add-caption-track-to-video-js\">3. Add Caption Track to Video.js<\/h3>\n\n\n\n<p>Video.js can incorporate your captions if they are stored online. Upload your WebVTT caption file to an online repository or FTP for your website\u2019s files. Make a note of the caption file\u2019s URL.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/09\/07-23-2015-Video-js-caption-javascript-1-1.jpg.webp\" alt=\"Screenshot of embed code for video-js\" class=\"wp-image-9686\"\/><\/figure>\n\n\n\n<p>Log into your website\u2019s HTML editor. Locate the JavaScript for your Video.js video. Between the<br><code>video<\/code><br>tags, add a&nbsp;<code>code<\/code>&nbsp;tag with your caption file information. Enter your WebVTT caption file\u2019s URL for&nbsp;<code>src<\/code>.<\/p>\n\n\n\n<p><code>kind<\/code>&nbsp;should be \u201ccaptions\u201d for a closed caption file. Use \u201csubtitles\u201d to display text in a language other than the one spoken on screen. Subtitles is the default setting if no kind is listed.<\/p>\n\n\n\n<p><code>srclang<\/code>&nbsp;is your source language, and&nbsp;<code>label<\/code>&nbsp;is the language label that displays among different subtitle language options. \u201cen\u201d is the code for English, \u201ces\u201d is the code for Spanish.&nbsp;<a href=\"https:\/\/github.com\/videojs\/video.js\/blob\/master\/docs\/guides\/tracks.md\" target=\"_blank\" rel=\"noreferrer noopener\">More language codes are listed on GitHub<\/a>.<\/p>\n\n\n\n<p>Save and push changes to your website. Your Video.js video should now display the closed captions option.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.3playmedia.com\/blog\/video-jss-approach-to-video-player-accessibility\/\">More on Video.js Accessibility Features<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/videojs\/video.js\/blob\/master\/docs\/guides\/tracks.md\" target=\"_blank\" rel=\"noreferrer noopener\">Video.js Captioning Support on GitHub<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading is-style-x-small is-style-x-small--8\" id=\"h-how-to-add-an-interactive-transcript-to-a-video-js-video\"><strong>How to Add an Interactive Transcript to a Video.js Video<\/strong><\/h2>\n\n\n\n<p>An interactive transcript highlights each word as it is spoken and scrolls down the transcript while your video plays.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.3playmedia.com\/solutions\/features\/plugins\/interactive-transcript\/\">More about the interactive transcript<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading is-style-xx-small is-style-xx-small--9\" id=\"h-1-embed-the-video-in-your-webpage\">1. Embed the Video in your Webpage<\/h3>\n\n\n\n<p>Open the HTML editor on your website. Add the appropriate Video.js embed code to the head and body of your page. You\u2019ll find this code by clicking&nbsp;<strong>Embed this player<\/strong>&nbsp;button by the video you want to embed.<\/p>\n\n\n\n<p>Note: your video embed code has a Video ID. Make a note of this, as you\u2019ll need it later.<\/p>\n\n\n\n<h3 class=\"wp-block-heading is-style-xx-small is-style-xx-small--10\" id=\"h-2-create-interactive-transcript-plugin\">2. Create Interactive Transcript Plugin<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/09\/07-20-2015-video-js-plugin-1.jpg.webp\" alt=\"Publish Plugin window with embed code highlighted\" class=\"wp-image-9687\"\/><\/figure>\n\n\n\n<p>Log into your 3Play Media account. Navigate to&nbsp;<strong>Settings &gt; Plugin Templates<\/strong>&nbsp;and create a new Interactive Transcript plugin template. Under&nbsp;<strong>Player<\/strong>, select&nbsp;<strong>Video.js<\/strong>.<\/p>\n\n\n\n<p>Under&nbsp;<strong>Player ID<\/strong>, enter the Video Player ID from the Video.js embed code and click&nbsp;<strong>Save My Plugin<\/strong>.<\/p>\n\n\n\n<p>Next, go to&nbsp;<strong>My Files<\/strong>&nbsp;and select the caption file associated with your Video.js video.<\/p>\n\n\n\n<p>Click on&nbsp;<strong>Publish Plugin<\/strong>&nbsp;and select the plugin template you created in the drop-down menu. This launches a pop-up with an embed code. Highlight and copy this code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading is-style-xx-small is-style-xx-small--11\" id=\"h-3-embed-interactive-transcript-in-your-webpage\">3. Embed Interactive Transcript in your Webpage<\/h3>\n\n\n\n<p>Open the HTML editor on your website. Paste in the 3Play Media interactive transcript plugin embed code into the body of your page. Publish your page.<\/p>\n\n\n\n<p>For more information or detailed instructions, visit our support page:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/support.3playmedia.com\/entries\/58985726-Video-js-Embed-an-Interactive-Transcript-with-a-Video-js-Player-on-a-Webpage-\/\" target=\"_blank\" rel=\"noreferrer noopener\">Embed an Interactive Transcript with a Video.js Player on a Webpage<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading is-style-x-small is-style-x-small--12\" id=\"h-an-alternate-way-to-add-closed-captions-with-video-js\"><strong>An Alternate Way to Add Closed Captions with Video.js<\/strong><\/h2>\n\n\n\n<p>It is also possible to add captions using the&nbsp;<a href=\"https:\/\/www.3playmedia.com\/solutions\/features\/plugins\/captions-plugin\/\">captions plugin<\/a>, which is a JavaScript plugin that overlays captions on the video player.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.3playmedia.com\/services\/features\/caption-import\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to add captions to Video.js with the captions plugin<\/a><\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--40)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-bottom:0\"\/>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-f60ad176 wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:0;padding-right:0;padding-bottom:0\">\n<p style=\"margin-top:0\">Filed under<\/p>\n\n\n<span class=\"wp-block-tribe-terms__empty-msg t-category\">No Tags<\/span><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-58334fdc wp-block-group-is-layout-constrained\">\n<p style=\"margin-bottom:0\">Share this page<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-fe217b39 wp-block-group-is-layout-constrained\">\n<p><\/p>\n\n\n\n<ul class=\"wp-block-outermost-social-sharing has-normal-icon-size has-icon-color is-style-logos-only is-content-justification-left is-layout-flex wp-container-outermost-social-sharing-is-layout-95ca00fe wp-block-social-sharing-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--10)\"><li style=\"color: #767676; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-linkedin has-neutral-90-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.3playmedia.com%2Fresources%2Fvideo-js-captions-subtitles%2F&#038;title=Video.js%20Captions%20%26%23038%3B%20Subtitles\" aria-label=\"Share on LinkedIn\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on LinkedIn\t\t<\/span>\n\t<\/a>\n<\/li>\n\n\n<li style=\"color: #767676; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-x has-neutral-90-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/x.com\/share?url=https%3A%2F%2Fwww.3playmedia.com%2Fresources%2Fvideo-js-captions-subtitles%2F&#038;text=Video.js%20Captions%20%26%23038%3B%20Subtitles\" aria-label=\"Share on X\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on X\t\t<\/span>\n\t<\/a>\n<\/li>\n\n\n<li style=\"color: #767676; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-telegram has-neutral-90-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/telegram.me\/share\/url?url=https%3A%2F%2Fwww.3playmedia.com%2Fresources%2Fvideo-js-captions-subtitles%2F&#038;text=Video.js%20Captions%20%26%23038%3B%20Subtitles\" aria-label=\"Share on Telegram\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 128 128\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M28.97 63.324c18.657-8.128 31.098-13.487 37.323-16.076 17.774-7.393 21.467-8.677 23.874-8.72.53-.009 1.713.122 2.48.745.648.525.826 1.235.911 1.733.085.498.191 1.633.107 2.52-.963 10.12-5.13 34.677-7.25 46.012-.898 4.796-2.664 6.404-4.375 6.561-3.716.342-6.538-2.456-10.138-4.815-5.633-3.693-8.815-5.991-14.283-9.594-6.319-4.164-2.222-6.453 1.379-10.193.942-.98 17.318-15.874 17.634-17.225.04-.169.077-.799-.297-1.131-.375-.333-.927-.22-1.325-.129-.565.128-9.564 6.076-26.996 17.843-2.554 1.754-4.868 2.609-6.94 2.564-2.286-.05-6.681-1.292-9.95-2.354-4.007-1.303-7.193-1.992-6.915-4.205.144-1.152 1.731-2.33 4.761-3.536Z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on Telegram\t\t<\/span>\n\t<\/a>\n<\/li>\n\n\n<li style=\"color: #767676; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-whatsapp has-neutral-90-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/api.whatsapp.com\/send?text=Video.js%20Captions%20%26%23038%3B%20Subtitles%20&mdash;%20https%3A%2F%2Fwww.3playmedia.com%2Fresources%2Fvideo-js-captions-subtitles%2F\" aria-label=\"Share on WhatsApp\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on WhatsApp\t\t<\/span>\n\t<\/a>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group aligngrid is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading is-style-small is-style-small--13\" id=\"h-related-resources\" style=\"margin-top:0;margin-bottom:var(--wp--preset--spacing--40)\">Related Resources<\/h2>\n\n\n\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"columns-3 wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-6d3fbd8f wp-block-post-template-is-layout-grid\"><li class=\"wp-block-post post-18060 resources type-resources status-publish has-post-thumbnail hentry category-legislation-compliance\">\n\n<article class=\"wp-block-group p-card-post l-clearfix is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:var(--wp--preset--spacing--40);padding-left:0\"><figure style=\"aspect-ratio:16\/9;width:100%; margin-bottom:0;\" class=\"p-card-post__image wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"downloadable guide\" style=\"width:100%;height:100%;object-fit:cover;\" srcset=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png 600w, https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)\"><div style=\"margin-bottom:var(--wp--preset--spacing--10);\" class=\"is-style-category wp-block-tribe-terms\"><ul class=\"wp-block-tribe-terms__list\"><li class=\"wp-block-tribe-terms__term\"><span class=\"wp-block-tribe-terms__link t-category\">Whitepaper<\/span><\/li><\/ul><\/div>\n\n<p style=\"margin-top:0;margin-bottom:0;\" class=\"p-card-post__link wp-block-post-title\">ADA Title II Compliance Checklist<\/p><\/div>\n\n\n<a class=\"p-card-post__link a-link-cover wp-block-read-more\" href=\"https:\/\/www.3playmedia.com\/resources\/ada-title-ii-checklist\/\" target=\"_self\">Read more<span class=\"screen-reader-text\">: ADA Title II Compliance Checklist<\/span><\/a><\/article>\n\n<\/li><li class=\"wp-block-post post-15934 resources type-resources status-publish has-post-thumbnail hentry category-accessibility\">\n\n<article class=\"wp-block-group p-card-post l-clearfix is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:var(--wp--preset--spacing--40);padding-left:0\"><figure style=\"aspect-ratio:16\/9;width:100%; margin-bottom:0;\" class=\"p-card-post__image wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/08\/wp-thumbnail.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"downloadable whitepaper\" style=\"width:100%;height:100%;object-fit:cover;\" srcset=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/08\/wp-thumbnail.png 600w, https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/08\/wp-thumbnail-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)\"><div style=\"margin-bottom:var(--wp--preset--spacing--10);\" class=\"is-style-category wp-block-tribe-terms\"><ul class=\"wp-block-tribe-terms__list\"><li class=\"wp-block-tribe-terms__term\"><span class=\"wp-block-tribe-terms__link t-category\">Whitepaper<\/span><\/li><\/ul><\/div>\n\n<p style=\"margin-top:0;margin-bottom:0;\" class=\"p-card-post__link wp-block-post-title\">Event Planning Workbook<\/p><\/div>\n\n\n<a class=\"p-card-post__link a-link-cover wp-block-read-more\" href=\"https:\/\/www.3playmedia.com\/resources\/wp-event-workbook\/\" target=\"_self\">Read more<span class=\"screen-reader-text\">: Event Planning Workbook<\/span><\/a><\/article>\n\n<\/li><li class=\"wp-block-post post-16045 resources type-resources status-publish has-post-thumbnail hentry category-legislation-compliance\">\n\n<article class=\"wp-block-group p-card-post l-clearfix is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:var(--wp--preset--spacing--40);padding-left:0\"><figure style=\"aspect-ratio:16\/9;width:100%; margin-bottom:0;\" class=\"p-card-post__image wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/08\/wp-thumbnail.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"downloadable whitepaper\" style=\"width:100%;height:100%;object-fit:cover;\" srcset=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/08\/wp-thumbnail.png 600w, https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/08\/wp-thumbnail-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)\"><div style=\"margin-bottom:var(--wp--preset--spacing--10);\" class=\"is-style-category wp-block-tribe-terms\"><ul class=\"wp-block-tribe-terms__list\"><li class=\"wp-block-tribe-terms__term\"><span class=\"wp-block-tribe-terms__link t-category\">Whitepaper<\/span><\/li><\/ul><\/div>\n\n<p style=\"margin-top:0;margin-bottom:0;\" class=\"p-card-post__link wp-block-post-title\">European Accessibility Act (EAA) Checklist<\/p><\/div>\n\n\n<a class=\"p-card-post__link a-link-cover wp-block-read-more\" href=\"https:\/\/www.3playmedia.com\/resources\/eaa-checklist\/\" target=\"_self\">Read more<span class=\"screen-reader-text\">: European Accessibility Act (EAA) Checklist<\/span><\/a><\/article>\n\n<\/li><\/ul><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>How to Add Captions, Subtitles, and Interactive Transcripts in Video.js 3Play Media allows you to add closed captions and multilingual subtitles to Video.js videos, which use HTML5. Video.js videos are also compatible with our\u00a0interactive transcript\u00a0and\u00a0captions plugin. Video plugins can be embedded with Video.js by inserting a single line of code on your webpage. How to&#8230;<\/p>\n","protected":false},"author":63,"featured_media":16649,"template":"","categories":[133,140],"tags":[],"industry":[],"resource_type":[95],"class_list":["post-13128","resources","type-resources","status-publish","has-post-thumbnail","hentry","category-captioning","category-subtitling"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.0 (Yoast SEO v26.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Video.js Closed Captions, Subtitles, and Interactive Transcript<\/title>\n<meta name=\"description\" content=\"Learn how to add closed captions or subtitles to Video.js to make your HTML5 videos accessible. Video js captions use the WebVTT format.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video.js Captions &#038; Subtitles\" \/>\n<meta property=\"og:description\" content=\"Learn how to add closed captions or subtitles to Video.js to make your HTML5 videos accessible. Video js captions use the WebVTT format.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/\" \/>\n<meta property=\"og:site_name\" content=\"3Play Media\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/3PlayMedia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-23T20:23:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@3playmedia\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/\",\"url\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/\",\"name\":\"Video.js Closed Captions, Subtitles, and Interactive Transcript\",\"isPartOf\":{\"@id\":\"https:\/\/www.3playmedia.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png\",\"datePublished\":\"2015-07-20T04:00:00+00:00\",\"dateModified\":\"2025-09-23T20:23:20+00:00\",\"description\":\"Learn how to add closed captions or subtitles to Video.js to make your HTML5 videos accessible. Video js captions use the WebVTT format.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#primaryimage\",\"url\":\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png\",\"contentUrl\":\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png\",\"width\":600,\"height\":400,\"caption\":\"downloadable guide\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.3playmedia.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/www.3playmedia.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Video.js Captions &#038; Subtitles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.3playmedia.com\/#website\",\"url\":\"https:\/\/www.3playmedia.com\/\",\"name\":\"3Play Media\",\"description\":\"Take Your Video Content Global\",\"publisher\":{\"@id\":\"https:\/\/www.3playmedia.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.3playmedia.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.3playmedia.com\/#organization\",\"name\":\"3Play Media\",\"url\":\"https:\/\/www.3playmedia.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.3playmedia.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/07\/favicon_1x-300x300-1.webp\",\"contentUrl\":\"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/07\/favicon_1x-300x300-1.webp\",\"width\":300,\"height\":300,\"caption\":\"3Play Media\"},\"image\":{\"@id\":\"https:\/\/www.3playmedia.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/3PlayMedia\/\",\"https:\/\/x.com\/3playmedia\",\"https:\/\/www.linkedin.com\/company\/3play-media\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Video.js Closed Captions, Subtitles, and Interactive Transcript","description":"Learn how to add closed captions or subtitles to Video.js to make your HTML5 videos accessible. Video js captions use the WebVTT format.","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:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/","og_locale":"en_US","og_type":"article","og_title":"Video.js Captions &#038; Subtitles","og_description":"Learn how to add closed captions or subtitles to Video.js to make your HTML5 videos accessible. Video js captions use the WebVTT format.","og_url":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/","og_site_name":"3Play Media","article_publisher":"https:\/\/www.facebook.com\/3PlayMedia\/","article_modified_time":"2025-09-23T20:23:20+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@3playmedia","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/","url":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/","name":"Video.js Closed Captions, Subtitles, and Interactive Transcript","isPartOf":{"@id":"https:\/\/www.3playmedia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#primaryimage"},"image":{"@id":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#primaryimage"},"thumbnailUrl":"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png","datePublished":"2015-07-20T04:00:00+00:00","dateModified":"2025-09-23T20:23:20+00:00","description":"Learn how to add closed captions or subtitles to Video.js to make your HTML5 videos accessible. Video js captions use the WebVTT format.","breadcrumb":{"@id":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#primaryimage","url":"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png","contentUrl":"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2017\/10\/guide-thumbnail.png","width":600,"height":400,"caption":"downloadable guide"},{"@type":"BreadcrumbList","@id":"https:\/\/www.3playmedia.com\/resources\/video-js-captions-subtitles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.3playmedia.com\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/www.3playmedia.com\/resources\/"},{"@type":"ListItem","position":3,"name":"Video.js Captions &#038; Subtitles"}]},{"@type":"WebSite","@id":"https:\/\/www.3playmedia.com\/#website","url":"https:\/\/www.3playmedia.com\/","name":"3Play Media","description":"Take Your Video Content Global","publisher":{"@id":"https:\/\/www.3playmedia.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.3playmedia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.3playmedia.com\/#organization","name":"3Play Media","url":"https:\/\/www.3playmedia.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.3playmedia.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/07\/favicon_1x-300x300-1.webp","contentUrl":"https:\/\/www.3playmedia.com\/wp-content\/uploads\/2025\/07\/favicon_1x-300x300-1.webp","width":300,"height":300,"caption":"3Play Media"},"image":{"@id":"https:\/\/www.3playmedia.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/3PlayMedia\/","https:\/\/x.com\/3playmedia","https:\/\/www.linkedin.com\/company\/3play-media"]}]}},"_links":{"self":[{"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/resources\/13128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/resources"}],"about":[{"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/types\/resources"}],"author":[{"embeddable":true,"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/users\/63"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/media\/16649"}],"wp:attachment":[{"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/media?parent=13128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/categories?post=13128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/tags?post=13128"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/industry?post=13128"},{"taxonomy":"resource_type","embeddable":true,"href":"https:\/\/www.3playmedia.com\/wp-json\/wp\/v2\/resource_type?post=13128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}