Jquery/Javascript视频替换

Jquery / Javascript Video Replace

本文关键字：替换 视频 Javascript Jquery      更新时间：2024-01-28

好的，所以我显然在这里缺少了一些东西（只是不知道我缺少了什么）。我一直在编写一个基本的脚本来获取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>

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

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

它是否应该写一份文件，以确保按照正确的顺序完成？大脑混乱。

或者，如果有人对如何更有效/更好地做到这一点有更好的建议，请随时在这里发布。谢谢

您的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/

好吧，喝了很多咖啡因后，我回来了，开始工作了。结果是：

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

基本上，我只需要添加准备好的文档（感谢洛杉矶的Frenchi），然后在其中移动Brightcove初始化。现在效果很好。谢谢

您的javascript部分不包含文档就绪。尝试：

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

我想给它添加一个变体。我点击了一个按钮，需要通过ajax查找视频id和信息，然后显示视频。我必须在一页中完成所有操作，所以我隐藏了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");
            }
        });
    }
}
相关文章：