{"id":5370,"date":"2014-03-30T21:10:05","date_gmt":"2014-03-30T21:10:05","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/30\/cannot-dynamically-change-a-caption-track-in-video-js-collection-of-common-programming-errors\/"},"modified":"2014-03-30T21:10:05","modified_gmt":"2014-03-30T21:10:05","slug":"cannot-dynamically-change-a-caption-track-in-video-js-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/30\/cannot-dynamically-change-a-caption-track-in-video-js-collection-of-common-programming-errors\/","title":{"rendered":"Cannot dynamically change a caption &#39;track&#39; in Video.js-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m coding a basic video marquee and one of the key requirements is that the videos need to be able to advance while keeping the player in full screen.<\/p>\n<p>Using Video.js (4.1.0) I have been able to get everything work correctly except that I cannot get the captions to change when switching to another video.<\/p>\n<p>Either inserting a &#8220;track&#8221; tag when the player HTML is first created or adding a track to the &#8216;options&#8217; object when the player is initialized are the only ways I can get the player to display the &#8220;CC&#8221; button and show captions. However, I cannot re-initialize the player while in full screen so changing the track that way will not work.<\/p>\n<p>I have tried addTextTrack and addTextTracks and both show that the tracks have been added &#8211; using something like console.log(videoObject.textTracks()) &#8211; but the player never shows them or the &#8220;CC&#8221; button.<\/p>\n<p>Here is my code, any help is greatly appreciated:<\/p>\n<pre><code>;(function(window,undefined) {\n\n    \/\/ VIDEOS OBJECT\n    var videos = [\n        {\"volume\":\"70\",\"title\":\"TEST 1\",\"url\":\"test1.mp4\",\"type\":\"mp4\"},\n        {\"volume\":\"80\",\"title\":\"TEST 2\",\"url\":\"test2.mp4\",\"type\":\"mp4\"},\n        {\"volume\":\"90\",\"title\":\"TEST 3\",\"url\":\"test3.mp4\",\"type\":\"mp4\"}\n    ];\n\n    \/\/ CONSTANTS\n    var VIDEO_BOX_ID = \"jbunow_marquee_video_box\", NAV_TEXT_ID = \"jbunow_marquee_nav_text\", NAV_ARROWS_ID = \"jbunow_marquee_nav_arrows\", VIDEO_OBJ_ID = \"jbunow_marquee_video\", NAV_PREV_ID = \"jbunow_nav_prev\", NAV_NEXT_ID = \"jbunow_nav_next\";\n\n    \/\/ GLOBAL VARIABLS\n    var videoObject;\n    var currentTrack = 0;\n    var videoObjectCreated = false;\n    var controlBarHideTimeout;\n\n    jQuery(document).ready(function(){\n        \/\/ CREATE NAV ARROWS AND LISTENERS, THEN START MARQUEE\n        var navArrowsHtml = \"\";\n        navArrowsHtml += \"\";\n        jQuery('#' + NAV_ARROWS_ID).html(navArrowsHtml);\n        jQuery('#' + NAV_PREV_ID).on('click',function() { ChangeVideo(GetPrevVideo()); });\n        jQuery('#' + NAV_NEXT_ID).on('click',function() { ChangeVideo(GetNextVideo()); });\n\n        ChangeVideo(currentTrack);\n    });\n\n    var ChangeVideo = function(newIndex) {\n        var videoBox = jQuery('#' + VIDEO_BOX_ID);\n        if (!videoObjectCreated) {\n            \/\/ LOAD PLAYER HTML\n            videoBox.html(GetPlayerHtml());\n\n            \/\/ INITIALIZE VIDEO-JS\n            videojs(VIDEO_OBJ_ID, {}, function(){\n                videoObject = this;\n\n                \/\/ LISTENERS\n                videoObject.on(\"ended\", function() { ChangeVideo(GetNextVideo()); });\n                videoObject.on(\"loadeddata\", function () { videoObject.play(); });\n\n                videoObjectCreated = true;\n                PlayVideo(newIndex);\n            });\n\n        } else { PlayVideo(newIndex); }\n    }\n\n    var PlayVideo = function(newIndex) {\n\n        \/\/ TRY ADDING MULTIPLE TRACKS\n        videoObject.addTextTracks([{ kind: 'captions', label: 'English2', language: 'en', srclang: 'en', src: 'track2.vtt' }]);\n\n        \/\/ TRY ADDING HTML\n        \/\/jQuery('#' + VIDEO_OBJ_ID + ' video').eq(0).append(\"\");\n\n        \/\/ TRY ADDING SINGLE TRACK THEN SHOWING USING RETURNED ID\n        \/\/var newTrack = videoObject.addTextTrack('captions', 'English2', 'en', { kind: 'captions', label: 'English2', language: 'en', srclang: 'en', src: 'track2.vtt' });\n        \/\/videoObject.showTextTrack(newTrack.id_, newTrack.kind_);        \n\n        videoObject.volume(parseFloat(videos[newIndex][\"volume\"]) \/ 100); \/\/ SET START VOLUME\n        videoObject.src({ type: \"video\/\" + videos[newIndex][\"type\"], src: videos[newIndex][\"url\"] }); \/\/ SET NEW SRC\n        videoObject.load();\n\n        videoObject.ready(function () {\n            videoObject.play();\n\n            clearTimeout(controlBarHideTimeout);\n            controlBarHideTimeout = setTimeout(function() { videoObject.controlBar.fadeOut(); }, 2000);\n\n            jQuery('#' + NAV_TEXT_ID).fadeOut(150, function() {\n                currentTrack = newIndex;\n                var navHtml = \"\";\n                navHtml += \"<\/code><\/pre>\n<h1><code>Now\u00a0Playing<\/code><\/h1>\n<h2><code>\" + videos[newIndex][\"title\"] + \"<\/code><\/h2>\n<pre>\";\n                if (videos.length &gt; 1) { navHtml += \"<\/pre>\n<h1><code>Up\u00a0Next<\/code><\/h1>\n<h2><code>\" + videos[GetNextVideo()][\"title\"] + \"<\/code><\/h2>\n<pre>\"; }\n                jQuery('#' + NAV_TEXT_ID).html(navHtml).fadeIn(250);\n            });\n        });\n    }\n\n    var GetPlayerHtml = function() {\n        var playerHtml = \"\";        \n        playerHtml += \"\";\n        playerHtml += \"\";\n        \/\/playerHtml += \"\";\n        playerHtml += \"\";\n        return playerHtml;\n    }\n\n    var GetNextVideo = function() {\n        if (currentTrack &gt;= videos.length - 1) { return 0; }\n        else { return (currentTrack + 1); }\n    }\n\n    var GetPrevVideo = function() {\n        if (currentTrack<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m coding a basic video marquee and one of the key requirements is that the videos need to be able to advance while keeping the player in full screen. Using Video.js (4.1.0) I have been able to get everything work correctly except that I cannot get the captions to change when switching to another video. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5370","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=5370"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5370\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=5370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=5370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=5370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}