'; // Inject the player code into the DOM document.getElementById(playerHolderId).innerHTML = playerHTML; // Add and execute the player script tag var s = document.createElement("script"); s.src = "https://players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js"; // Add the script tag to the document document.body.appendChild(s); // Call a function to play the video once player's JavaScropt loaded s.onload = () => callback(videoID); } // +++ Initialize the player and start the video +++ function callback(videoID) { var thisPlayer = "brightcove-player-" + videoID; // myPlayer = bc(thisPlayer); // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly myPlayer = bc(document.getElementById(thisPlayer)); myPlayer.on("loadedmetadata", function() { // Mute the audio track, if there is one, so video will autoplay on button click myPlayer.muted(false); myPlayer.play(); $(".vjs-dock-title").each(function(i) { var videoID = $(this).closest('.video-js').attr('data-video-id'); $(this).attr('id', "vjs-dock-title-" + videoID); }); $(".vjs-dock-description").each(function(i) { var videoID = $(this).closest('.video-js').attr('data-video-id'); $(this).attr('id', "vjs-dock-description-" + videoID); }); $(".backButton").remove(); $(".forwardButton").remove(); $('div.vjs-volume-panel').attr('id', 'vjs-volume-panel'); $('div.vjs-playback-rate').attr('id', 'vjs-playback-rate'); $("#vjs-volume-panel").insertAfter("#vjs-playback-rate"); $('#vjs-dock-title-' + videoID).appendTo('#video-title-' + videoID); $('#vjs-dock-description-' + videoID).appendTo('#video-description-' + videoID); var firstVolume = document.querySelector(".vjs-volume-panel"); // +++ Create divs for buttons +++ var jumpAmount = 10, controlBar, insertBeforeNode, tenSecBackButton = document.createElement("div"), tenSecForwardButton = document.createElement("div"), backButtonImage = document.createElement("img"), forwardButtonImage = document.createElement("img"), volumeHolder = document.createElement("div"); // +++ Assign IDs for later element manipulation +++ tenSecBackButton.id = "backButton"; tenSecForwardButton.id = "forwardButton"; volumeHolder.id = "newVolumeHolder"; // +++ Assign properties to elements and assign to parents +++ backButtonImage.setAttribute("src","/content/dam/larry/images/icons/back10.png"); tenSecBackButton.appendChild(backButtonImage); tenSecBackButton.setAttribute("class","backButton"); forwardButtonImage.setAttribute("src","/content/dam/larry/images/icons/forward10.png"); tenSecForwardButton.appendChild(forwardButtonImage); tenSecForwardButton.setAttribute("class","forwardButton"); // +++ Get controlbar and insert elements +++ controlBar = myPlayer.$(".vjs-control-bar"); // Get the element to insert buttons in front of in conrolbar insertBackBeforeNode = myPlayer.$(".vjs-play-control"); insertForwardBeforeNode = myPlayer.$(".vjs-current-time"); insertNewVolumeHolder = myPlayer.$(".vjs-fullscreen-control"); // Insert the button div in proper location controlBar.insertBefore(tenSecBackButton, insertBackBeforeNode); controlBar.insertBefore(tenSecForwardButton, insertForwardBeforeNode); controlBar.insertBefore(volumeHolder, insertNewVolumeHolder); // +++ Add event handlers to jump back or forward +++ // Back button logic, don't jump to negative times tenSecBackButton.addEventListener("click", function() { var newTime, rewindAmt = jumpAmount, videoTime = myPlayer.currentTime(); if (videoTime >= rewindAmt) { newTime = videoTime - rewindAmt; } else { newTime = 0; } myPlayer.currentTime(newTime); }); // Forward button logic, don't jump past the duration tenSecForwardButton.addEventListener("click", function() { var newTime, forwardAmt = jumpAmount, videoTime = myPlayer.currentTime(), videoDuration = myPlayer.duration(); if (videoTime + forwardAmt <= videoDuration) { newTime = videoTime + forwardAmt; } else { newTime = videoDuration; } myPlayer.currentTime(newTime); }); }); }