我一直想在运行时插入一个小脚本到DOM中,以便加载视频播放器。但是玩家被加载到所有不同的地方,除了我想要的<div>
。我不知道该怎么处理这件事。我把整个代码粘贴在这里。请帮帮我。
<html>
<head><title>video test</title>
<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript" src="swf.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// debugger;
var template = $('<div class="sResult"><div class="figure"></div><div class="title"></div></div>');
var url = 'http://player.ooyala.com/player.js?width=320&height=240&embedCode=thbXMxMzpq0RhOS82Hzx1lma8UMnFN-3&callback=apicallback';
var tempScript = document.createElement('script');
tempScript.type = 'text/javascript';
tempScript.src = url;
$("#main").append(template);
$("div.figure", $('#main')).html(tempScript);
$("div.title", $('#main')).append("testkjdfnkjdb");
})
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
div.title
的附加程序工作正常。但是我试图附加视频播放器的div
不能正常工作。视频播放器被附加到<head>
编辑:可以一些javascript大师请查看player.js和告诉我为什么它不为我工作?
播放器<div>
包含以下内容:
<div style="width: 320px; height: 240px; overflow: hidden;" id="ooyalaPlayer6764909_10qreejOoyalaPlayerOutterWrapper"><object width="320" height="240" type="application/x-shockwave-flash" id="ooyalaPlayer6764909_10qreej" class="OoyalaVideoPlayer" data="http://player.ooyala.com/static/cacheable/fb1a00342b9ec2d6df7c69946617dcee/player_v2.swf"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#000000"><param name="wmode" value="window">
<param name="flashvars"></object></div>
您还可以为Ooyala播放器提供targetReplaceId=(element id)查询字符串参数,以强制它替换页面上的项。
首先修改URL,传递playerId
参数。
var url = 'http://player.ooyala.com/player.js?playerId=player&width=320&height=240&embedCode=thbXMxMzpq0RhOS82Hzx1lma8UMnFN-3&callback=apicallback';
为tempScript loader创建一个监听器,并将播放器脚本添加到头文件中:
$(tempScript).load(function() {
$('#main').find('div.figure').append($('head>div'));
});
$('head')[0].appendChild(tempScript);
在监听器中移动播放器中的内容,然后重新添加。
我认为问题是在player.js中,而不是你附加脚本加载器的地方。
Ooyala API Docs: http://ooyala.com/support/docs/player_api#javascript
选择器错误:
$("#main div.figure").html(tempScript);
等。