To play Brightcove videos seeking to the desired cue point and auto-playing, using their new video cloud api


Brightcove's new video cloud api is out and the old one is slated to be retired by end of this year. Following describes on how to use their new api to play the brightcove hosted video, seeking to the desired cue point if given, and then auto-play the video. 

  

From code behind you would need to inject the following javascript code:

<video id="[YOUR DESIRED CLASS ID]"
data-video-id="" data-account="[YOUR ACCOUNT ID (PUBLISHER ID IN OLD API)]" data-player="[YOUR PLAYER ID]" data-embed="default"
 class="video-js videoBox"
 controls
 height="[DESIRED INITIAL HEIGHT]"
 width="[DESIRED INITIAL WIDTH]"
></video/>

<script src="//players.brightcove.net/[YOUR ACCOUNT ID (PUBLISHER ID IN OLD API)]/[YOUR PLAYER ID]_default/index.min.js"></script>

If you wish to further style the initial video load, you can add the following:

<style type="text/css">
.bc-player-[YOUR PLAYER ID]_default {
overflow: hidden;
position: relative;
margin: 20px auto;
padding: 20px;
}
</style>



To allow video to seek to a cue point and auto-play, you can implement a function like this and insert the returned js code right after the <video> tag, where

(a) "_videoSeek" is the desired video cue point in seconds
(b) "cliptitle" is a unique title you can give to your video. Note that it should not contain any special characters and spaces.
(c) "duration" is the video total duration in seconds
(d) "videoTotalDuration" is the string representation of video duration in the format hh:mm:ss, in case you do not have the "duration" value
(e) "videoId" is the brightcove id of the video

        private StringBuilder LoadBrightcoveNew(string _videoSeek, string cliptitle, string duration, string videoTotalDuration, string videoId)
        {
            StringBuilder sb = new StringBuilder();
            if (_videoSeek.Length == 0) _videoSeek = "0";
            if (duration.Length == 0) duration = "0";
            if (duration == "0")
            {
                duration = videoTotalDuration.Replace(":", ".");
                string[] vals = duration.Split(new string[] { "." }, StringSplitOptions.RemoveEmptyEntries);
                double d1 = double.Parse(vals[0]);
                double d2 = double.Parse(vals.Length > 1 ? vals[1] : "0");
                double totaltime = (d1 * 60) + d2;
                duration = (totaltime - double.Parse(_videoSeek)).ToString();
            }

            duration = (int.Parse(_videoSeek)+int.Parse(duration)).ToString();

            double nextCue = ((double.Parse(_videoSeek) + double.Parse(duration)) - 1);
            double pauseCue = nextCue + 1;

            sb.AppendLine("<script type=\"text/javascript\">");

            sb.AppendLine("var myPlayer, textTrack;");
            sb.AppendLine("var allTextTacks;");
            sb.AppendLine("var attLength;");
            sb.AppendLine("var tt;");
            sb.AppendLine(" try {");

            sb.AppendLine("videojs(\"[YOUR DESIRED CLASS ID]\").ready(function(){");

            sb.AppendLine("var myPlayer = this;");
            sb.AppendLine("myPlayer.catalog.getVideo('" + videoId + "', function (error, video) {");
            sb.AppendLine("myPlayer.catalog.load(video);");

            if (double.Parse(duration)>(double)0)
            {
                sb.AppendLine("textTrack = myPlayer.addTextTrack('metadata', 'Timed Cue Point');");

                sb.AppendLine("textTrack.addCue(new window.VTTCue(" + _videoSeek + "," + (int.Parse(duration)-2).ToString() + ",'" + cliptitle + "_BEGIN'));");
                sb.AppendLine("textTrack.addCue(new window.VTTCue(" + duration + "," + (int.Parse(duration) + 2).ToString() + ",'" + cliptitle + "_END'));");
            }


            sb.AppendLine("myPlayer.one(\"loadedmetadata\", function () {");

            sb.AppendLine("allTextTacks = myPlayer.textTracks();");
            sb.AppendLine("attLength = allTextTacks.length;");
            sb.AppendLine("for (var i = 0; i < attLength; i++) {");
            sb.AppendLine("if (allTextTacks[i].kind === 'metadata') {");
            sb.AppendLine("tt = allTextTacks[i];");
            sb.AppendLine("break;");
            sb.AppendLine("};");
            sb.AppendLine("};");

            sb.AppendLine("tt.oncuechange = function () {");

            sb.AppendLine("var cuepointdto;");

            // loop over all the cuepoints
            sb.AppendLine("for (var i = 0; i < tt.activeCues.length; i++) {");
            sb.AppendLine("if (tt.activeCues[i].text == '"+ cliptitle + "_END') {");
            sb.AppendLine("cuepointdto = tt.activeCues[i];");
            sb.AppendLine("break;");
            sb.AppendLine("}");
            sb.AppendLine("}");

            sb.AppendLine("if (cuepointdto != null) {");
            sb.AppendLine("myPlayer.pause();");
            sb.AppendLine("return;");
            sb.AppendLine("}");
            sb.AppendLine("}");

            if (!_videoSeek.Equals("0"))
            {
                sb.AppendLine("myPlayer.currentTime("+_videoSeek+");");
            }
            sb.AppendLine("myPlayer.play();");
            sb.AppendLine("});");
            sb.AppendLine("});");

            sb.AppendLine("});");
            sb.AppendLine("}");
            sb.AppendLine("catch (err) {");
            sb.AppendLine("}");

            sb.AppendLine("</script>");

            return sb;

        }

 
Categories: Sitecore, Brightcove, Video
Tags: Net, Sitecore;

SEARCH ARTICLES