javascript - Jquery / Javascript 视频替换

Question

好的，所以我显然在这里遗漏了一些东西（只是无法弄清楚我遗漏了什么）。我一直在编写一个基本脚本来获取 div 的内容，如下所示：

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

然后我有这个（加载在页面底部）来获取innerHTML（这是视频ID，宽度和高度）将它们交换出来，用逗号分割数据，确保高度和宽度都是'不要未定义，然后用完整的嵌入代码替换innerHTML，将变量放到正确的位置：

<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>

编辑添加：为了稍微澄清一下（这可能是问题），嵌入代码获取信息，然后通过脚本调用视频（这是最后一行 brightcove.createExperiences() 所做的）。嵌入代码很好。如果我采用这种格式并发布（用数据替换变量），它可以正常工作并加载视频。

是因为我在脚本之外调用了 brightcove .js 吗？我想替换 的每个实例，然后调用 brightcove.createExperiences()，而不是替换内容并为每个 div 调用它（您只需每页调用一次）。

是否应该与准备好的文档一起编写以确保以正确的顺序完成？脑子乱成一团。

或者，如果有人对如何更有效/更好地执行此操作有更好的建议，请随时在此处发布。谢谢！

Answer 1

您的 Flash 插件依赖于使用外部 JavaScript 分配给标记的一些动态 HTML 属性。此脚本 (http://admin.brightcove.com/js/BrightcoveExperiences.js) 通常在页面加载时运行，但您的脚本在页面加载后运行。Brightcove 脚本未正确转换您的 HTML，因为它尚未创建。

解决方案是在代码完成后显式运行 Brightcove 脚本。在您的代码之后添加这一行，一切都应该很好：

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

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

Answer 2

好的，在喝了很多咖啡因后，我回来了，让它起作用了。这就是它最终的样子：

<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>

基本上，我只需要添加准备好的文档（感谢 LA 的 Frenchi），然后在其中移动 Brightcove 初始化。现在就像一个魅力。谢谢！

Answer 3

以为我会为此添加一个变体。我有一个按钮单击，需要通过 ajax 查找视频 ID 和信息，然后显示视频。我必须在一页中完成所有操作，所以我隐藏了 div：

<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 4

您的 javascript 部分不包含准备好的文档。尝试：

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