javascript - Changing the ref_id of a url to deliver tailor-made video content to users. Brightcove advanced embed code + Idomoo logic -
hello wise , helpful people of stackoverflow. using combination of brightcove video player , sample code below third-party company supposed use with. main concept of trying achieve ability deliver tailor-made video content specific users changing ref_id of video on url. have received sample code , instructions still not sure how go this. appreciate , insights can think great project that's pretty cool in opinion. need find out how change ref_id of url different video can 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> /** * function gets id of video url (the hashid refid of 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, " ")); } /** * url query contain accountid/statsid/clipid (have in format) * refid = 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 player load video object reference video 0000(have set ref video " 0000" in brightcove site) * src value remote assets source set in brightcove site. * srcpth value path before "0000/" (have include "0000/") * function set new video in 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 poster img have in same path , same name myplayer.poster(srcpath + refid + ".jpg"); //diplay 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 texttracks var oldtracks = myplayer.remotetexttracks(); var = oldtracks.length; while (i--) { myplayer.removeremotetexttrack(oldtracks[i]); } ; //add caption object(option) myplayer.addremotetexttrack(option, true); myplayer.src({"type": "video/mp4", "src": srcpath + refid + ".mp4"}); myplayer.play(); }); }); /** * open video function --> loads main video (without descriptive audio) player */ function openvideo() { //remove older caption , set new 1 var oldtracks = myplayer.remotetexttracks(); var = 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 video refid + "da" * refid + "da" descriptive audio video version of main audio */ function changevideo() { //remove older caption , set new 1 var oldtracks = myplayer.remotetexttracks(); var = 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"); } /** * function run until srcpath value video object brightcove * , set in href attribute in transcript. * transcript html have in same bucket , same name of clipid */ function waitforsrcpath() { if (srcpath == null) { settimeout(waitforsrcpath, 50); return; } } var isfinished = false; var stopinterval; /** * send request idomoo analytics every 10 percent start @ 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 request idomoo analytics when 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 button "click here" send request 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 player attribute "data-customguid" * run function analyticsvideohandle() every 50 milliseconds check every change in video time until video finish */ $(document).ready(function () { waitforsrcpath(); $("#myplayer").attr("data-customguid", "ref:" + refid); analyticsonload(); analyticsonclick(); stopinterval = setinterval(function () { analyticsvideohandle(); }, 100); }); </script> </html>
Comments
Post a Comment