Jquery / Javascript Video Replace

Question

Ok, so I'm obviously missing something here (just can't figure out what it is I'm missing). I've been working on a basic script to take the contents of divs like so:

<div class="sxvideo">1745623935001,640,360</div>
<div class="sxvideo">1745605281001</div>
<div class="sxvideo">1745623933001,900</div>

and then I have this (loaded at the bottom of the page) to take the innerHTML (which is the video ID, width, and height) swap them out, .split the data by comma, make sure that both the height and width aren't left undefined, and then replace the innerHTML with the full embed code, dropping the variables into the right places:

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<script type="text/javascript">
$("div.sxvideo").each(function () {
"use strict";
var bcid = this.innerHTML.split(",");
if (bcid[1] === undefined) {
    bcid[1] = "720";
    }
if (bcid[2] === undefined) {
    bcid[2] = "404";
    }
this.innerHTML = '<center><div style="margin-bottom:15px; height: ' + bcid[2] + 'px; width: ' + bcid[1] + 'px;"><object id="myExperience' + bcid[0] + '" class="BrightcoveExperience"><param name="bgcolor" value="#172531" /><param name="width" value="' + bcid[1] + '" /><param name="height" value="' + bcid[2] + '" /><param name="playerID" value="68593058001" /><param name="playerKey" value="AQ~~,AAAACmfZzQE~,c2ejuULn_boEBJAb-NiqNIQuC2o543gE" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="' + bcid[0] + '" /></object></div></center>';
});
</script>

<script type="text/javascript">brightcove.createExperiences();</script>

EDITED ADDITIONS: In order to clear things up a little bit (and this might be the issue), the embed code takes the info then calls the video up by script (which is what the last line brightcove.createExperiences() does). The embed code is fine. If I take that format and post that (replacing the variables with data), it works fine and loads the video.

Is it because I'm calling the brightcove .js outside the script? I wanted to replace each instance of , THEN call brightcove.createExperiences(), not replace the content and call it for every div (you only have to call it once per page).

Should it be written with a document ready to make sure it's done in the proper order? Brain scrambled.

Or, if anyone has a better suggestion on how to do this more efficiently/better, feel free to post it here. Thanks!

Answer 1

Thought I would add a variation to this. I have a button click that needs to go look up the video id and info via ajax and then show the video. I have to do it all in one page so i hide the divs:

<script type="text/javascript">

function onSelect(e) {
    var dataItem = this.dataItem(e.node);

    var type = $(e.node).data("type");
    if (type == "video") {

        var request = {
            VideoID: dataItem.id
        };

        $.ajax({
            type: "POST",
            url: '@Url.Action("VideoRequest", "Video")',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(request),
            dataType: "json",
            success: function(data) {

                var referenceID = data["ReferenceID"];

                $("#playerCode").html(
                    '<object id="videoPlayer" class="BrightcoveExperience">' +
                        '<param name="bgcolor" value="#FFFFFF" />' +
                        '<param name="width" value="480" />' +
                        '<param name="height" value="270" />' +
                        '<param name="playerID" value="2810882002001" />' +
                        '<param name="playerKey" value="AQ~~,AAACbZTjlpE~,8zoTOFpOgAiTJ1UDRoQvrBanwRVGwo2w" />' +
                        '<param name="isVid" value="true" />' +
                        '<param name="isUI" value="true" />' +
                        '<param name="dynamicStreaming" value="true" />' +
                        '<param name="videoID" value="' + referenceID + '" /></object>');

                brightcove.createExperiences();

                $("#tree").css("visibility", "hidden");
                $("#player").css("visibility", "visible");
            }
        });
    }
}

Answer 2

Ok, after a LOT of caffeine I came back and got it working. Here's what it ended up being:

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
$("div.sxvideo").each(function() {
    var bcid = this.innerHTML.split(",");
    if (bcid[1] === undefined) {
            bcid[1] = "720";
        }
if (bcid[2] === undefined) {
            bcid[2] = "404";
    }
    this.innerHTML = '<center><div style="margin-bottom:15px; height: ' + bcid[2] + 'px; width: ' + bcid[1] + 'px;"><object id="myExperience' + bcid[0] + '" class="BrightcoveExperience"><param name="bgcolor" value="#172531" /><param name="width" value="' + bcid[1] + '" /><param name="height" value="' + bcid[2] + '" /><param name="playerID" value="68593058001" /><param name="playerKey" value="AQ~~,AAAACmfZzQE~,c2ejuULn_boEBJAb-NiqNIQuC2o543gE" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="' + bcid[0] + '" /></object></div></center>';
});
brightcove.createExperiences();
});
</script>

Basically, I just needed to add document ready (thanks Frenchi in LA), and then move the Brightcove initialization inside that. Works like a charm now. Thanks!

Answer 3

Your Flash plugin is dependent on some dynamic HTML attributes assigned to the tags using an external JavaScript. This script (http://admin.brightcove.com/js/BrightcoveExperiences.js) normally runs on page load, but your script runs after page load. Your HTML isn't properly transformed by the Brightcove script because it hasn't been created yet.

The solution is to run the Brightcove script explicitly AFTER your code is completed. Add this line after your code and all should be well:

$.getScript('http://admin.brightcove.com/js/BrightcoveExperiences.js');

​ http://jsfiddle.net/mblase75/bLU9x/

Answer 4

your javascript part doesn't contain document ready. Try:

$(function(){// Your code here});