Hello wise and helpful people of StackOverflow. I am using a combination of Brightcove as a video player and the sample code below is from a third-party company that I am supposed to use it with. The main concept of what I am trying to achieve is the ability to deliver tailor-made video content to specific users by changing the ref_Id of the video on the URL. I have received sample code and instructions but I am still not sure how to go about this. I would very much appreciate all the help and insights I can get as I think this is a great project that's pretty cool in my opinion. Basically I need to find out how to change the ref_Id of the URL so a different video can be played.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<!-- Bootstrap plugin & jquery plugin -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script type="text/javascript" src="jquery/js/jquery-3.2.0.min.js"></script>
<title>Landing-Page</title>
</head>
<body>
<div class="title">
<h1>LP Sample</h1>
</div>
<!-- video tag -->
<div class="video-container">
<video id="myPlayer"
crossorigin
data-account="5387496927001"
data-player="S1WpvbFwlW"
data-embed="default"
data-application-id
class="video-js" controls
autoplay
width="1280"
height="720">
</video>
<!--end video tag -->
<br/>
<!--link buttons-->
<div class="link">
<a id="movie2" href="javascript:" onclick="changeVideo()">Turn on audio description</a>
<a id="movie1" href="javascript:" onclick="openVideo()">Turn off audio description</a>
</div>
<!--end link buttons-->
<div class="button">
<button id="get-btn" type="button" class="btn btn-default">Click Here</button>
</div>
<!--player script-->
<script src="//players.brightcove.net/5387496927001/S1WpvbFwlW_default/index.min.js"></script>
</div>
</body>
<script>
/**
* the function gets the ID of the video from the url (the hashID is the refId of the video)
* */
function getParameterByName(hashId) {
var url = window.location.href;
hashId = hashId.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + hashId + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
/**
* The Url query contain accountID/statsID/ClipID (have to be in this format)
* refId = all Url query
* hashOnly = ClipID
* */
var refId = getParameterByName('ref_id');
var params = refId.split("/");
var hashOnly = params[2];
var count = 0;
var myPlayer;
var srcPath;
var option;
var on;
var off;
var isOn = false;
var stats = "stats-usa.idomoo.com";
/**
* When the player load get the video object from the reference video 0000(have to set the ref video " 0000" in brightcove site)
* src value get the remote assets source we set in the brightcove site.
* the srcPth value get the path before the "0000/" (have to include the "0000/")
* finally the function set the new video in the player.
* */
videojs("myPlayer").ready(function () {
myPlayer = this;
//set video on start
myPlayer.catalog.getVideo("ref:0000", function (error, video) {
myPlayer.catalog.load(video);
//get path
var src = video.sources[0].src;
srcPath = src.substring(0, src.indexOf("0000/"));
myPlayer.mediainfo.name = "";
//set the poster img have to in the same path and same name
myPlayer.poster(srcPath + refId + ".jpg");
//diplay the CC button
myPlayer.mediainfo.textTracks = [
{
"src": srcPath + refId + "_en.vtt",
"srclang": "en",
"label": "en",
"kind": "captions",
"mime_type": "text/vtt"
}
];
option =
{
kind: "captions",
label: "EN",
language: "en",
src: srcPath + refId + "_en.vtt"
};
//Delete all the textTracks
var oldTracks = myPlayer.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
myPlayer.removeRemoteTextTrack(oldTracks[i]);
}
;
//Add the caption object(option)
myPlayer.addRemoteTextTrack(option, true);
myPlayer.src({"type": "video/mp4", "src": srcPath + refId + ".mp4"});
myPlayer.play();
});
});
/**
* open video function --> loads the main video (without descriptive audio) to the player
*/
function openVideo() {
//remove older caption and set a new one
var oldTracks = myPlayer.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
myPlayer.removeRemoteTextTrack(oldTracks[i]);
}
;
off =
{
kind: "captions",
label: "en",
language: "en",
src: srcPath + refId + "_en.vtt"
};
myPlayer.addRemoteTextTrack(off, true);
myPlayer.src({"type": "video/mp4", "src": srcPath + refId + ".mp4"});
myPlayer.play();
count = 0;
$("#movie1").hide();
$("#movie2").show();
isOn = false;
$("button.vjs-caption-toggle-control.vjs-icon-captions.vjs-control").removeClass("vjs-selected");
}
/**
* change video function --> loads the video with refID + "da"
* refID + "da" is the descriptive audio video version of the main audio
*/
function changeVideo() {
//remove older caption and set a new one
var oldTracks = myPlayer.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
myPlayer.removeRemoteTextTrack(oldTracks[i]);
}
;
on =
{
kind: "captions",
label: "en",
language: "en",
src: srcPath + refId + "da_en.vtt"
};
myPlayer.addRemoteTextTrack(on, true);
myPlayer.src({"type": "video/mp4", "src": srcPath + refId + "da.mp4"});
myPlayer.play();
count = 0;
$("#movie2").hide();
$("#movie1").show();
isOn = true;
$("button.vjs-caption-toggle-control.vjs-icon-captions.vjs-control").removeClass("vjs-selected");
}
/**
* That function run until get the srcPath value from the video object from the brightcove
* and set it in href attribute in the transcript.
* the transcript html have to be in the same bucket and same name of the ClipID
*/
function waitForSrcPath() {
if (srcPath == null) {
setTimeout(waitForSrcPath, 50);
return;
}
}
var isFinished = false;
var stopInterval;
/**
* send Get request to idomoo analytics every 10 percent start at 0 until 100
*/
function analyticsVideoHandle() {
var currentTime = myPlayer.currentTime();
var videoTime = myPlayer.duration();
var timePercent = currentTime / videoTime;
var timeTemp = Math.ceil(timePercent * 10) * 10;
timeTemp = timeTemp - 10;
if (count != 0 && count <= timeTemp) {
count = timeTemp;
}
var rawTimeTemp = timePercent * 100;
rawTimeTemp = Math.floor(rawTimeTemp);
if (isOn) {
if (((Math.floor(rawTimeTemp) === timeTemp && count === timeTemp) || timePercent === 1) && !isFinished) {
if (timePercent != 1) {
count = count + 10;
$.ajax({
'url': 'https://' + stats + '/?pid=' + params[0] + '&eiid=' + params[1] + '&eid=' + hashOnly + 'da&atype=0&cvprogress=' + timeTemp,
'type': 'GET'
});
} else {
$.ajax({
'url': 'https://' + stats + '/?pid=' + params[0] + '&eiid=' + params[1] + '&eid=' + hashOnly + 'da&atype=0&cvprogress=' + 100,
'type': 'GET'
});
isFinished = true;
if (stop != null) {
clearInterval(stopInterval);
}
return;
}
}
} else {
if (((Math.floor(rawTimeTemp) === timeTemp && count === timeTemp) || timePercent === 1) && !isFinished) {
if (timePercent != 1) {
count = count + 10;
$.ajax({
'url': 'https://' + stats + '/?pid=' + params[0] + '&eiid=' + params[1] + '&eid=' + hashOnly + '&atype=0&cvprogress=' + timeTemp,
'type': 'GET'
});
} else {
$.ajax({
'url': 'https://' + stats + '/?pid=' + params[0] + '&eiid=' + params[1] + '&eid=' + hashOnly + '&atype=0&cvprogress=' + 100,
'type': 'GET'
});
isFinished = true;
if (stop != null) {
clearInterval(stopInterval);
}
return;
}
}
}
}
/**
* Send GET request to Idomoo analytics when the landing page load
*/
function analyticsOnLoad() {
$.ajax({
'url': 'https://' + stats + '/?pid=' + params[0] + '&eiid=' + params[1] + '&eid=' + hashOnly + '&atype=1&cfatype=1&landingPageVisited=' + window.location.href.split('?')[0],
'type': 'GET'
});
}
/**
* When click on the button "Click Here" send GET request to Idomoo analytics
*/
function analyticsOnClick() {
$("#get-btn").click(function () {
$.ajax({
'url': 'https://' + stats + '/?pid=' + params[0] + '&eiid=' + params[1] + '&eid=' + hashOnly + '&atype=1&cfatype=1&ccfan=CLICKHERE',
'type': 'GET'
});
});
}
/**
* Set to the player the attribute "data-customguid"
* run the function analyticsVideoHandle() every 50 milliseconds to check every change in video time until the video finish
*/
$(document).ready(function () {
waitForSrcPath();
$("#myPlayer").attr("data-customguid", "ref:" + refId);
analyticsOnLoad();
analyticsOnClick();
stopInterval = setInterval(function () {
analyticsVideoHandle();
}, 100);
});
</script>
</html>
