2

我想使用 jquery 或 javascript 动态加载 jwplayer。我想这样做是因为没有安装 FLASH 的浏览器 jwplayer 没有按预期运行。

因此，我想首先检查是否在浏览器中安装了 Flash Player

var hashFlash=((typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") || (window.ActiveXObject && (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) != false));

如果 hashFlash 为真，我将加载 jwplayer 来播放视频/音频。

我正在使用下面的代码动态加载 jwplayer。

function loadjwplayer(filename) {
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", filename);
    alert(fileref);
    document.getElementsByTagName("head")[0].appendChild(fileref);
}

或通过 jquery 如下

$.getScript("/jwplayer/jwplayer.js");

之后，我将根据以下要求将音频/视频播放器添加到我们的页面中。

function load_jwplayer_skin( div_id, audio_file) { 
    jwplayer(div_id).setup({
                      file: audio_file,
                      flashplayer: "/jwplayer/jwplayer.flash.swf",    
                      primary: "flash",
                      width: "350", 
                      height: "25", 
                    });
}

并将其用于 html 如下

<div id='audio_1'>......</div>
<script>
load_jwplayer_skin('audio_1','my_fev_song.mp3');
</script>

但是我遇到了错误“未捕获的引用错误：Jwplayer 未在函数 load_jwplayer_skin 中定义”。

如果我在页面顶部使用 ..... 加载 jwplayer，同样可以正常工作。因此，我认为 jwplayer 在全局范围内不可用。

请有人建议我如何进行。

4

1 回答 1

2

尝试这个：

function load_jwplayer_skin(div_id, audio_file) {
  if(!jwplayer) {
    if(!load_jwplayer_skin.oldCalls) {
      load_jwplayer_skin.oldCalls = [];
    }
    return load_jwplayer_skin.oldCalls.push({divId: div_id, file: audio_file});
  }
  else {

    load_jwplayer_skin.oldCalls.push({divId: div_id, file: audio_file});

    var oldCalls = load_jwplayer_skin.oldCalls,
    oldCallsLen = oldCalls.length,
    i = 0;

    for(i; i < oldCallsLen; i++) {
      var oldCall = oldCalls[i];
      doLoadJWPlayerSkin(oldCall.divId, oldCall.file);
    }

    delete load_jwplayer_skin.oldCalls;

    load_jwplayer_skin = doLoadJWPlayerSkin;
  }
}

function doLoadJWPlayerSkin(divId, audioFile) {
  jwplayer(divId).setup({
    file : audioFile,
    flashplayer : "/jwplayer/jwplayer.flash.swf",
    primary : "flash",
    width : "350",
    height : "25",
  });
}

它的工作原理是这样的，如果jwplayer还没有准备好，则将参数推入数组。一旦jwplayer准备就绪，它就会遍历数组中的所有项目并调用原始 loader doLoadJWPlayerSkin。最后，load_jwplayer_skin = doLoadJWPlayerSkin;确保未来的调用load_jwplayer_skin被定向到doLoadJWPlayerSkin.

而已。

更新：

当浏览器开始读取 html 文件时，它开始呈现 html 内容。如果它遇到一个脚本块，它会立即执行它（这是你的问题产生的地方）。如果它遇到带有src属性的脚本，浏览器会告诉其他一些组件（你必须研究它）来加载脚本并继续加载页面的其余部分。

我想有了这些细节，你就会明白哪里出了问题以及为什么。

我会在这里尝试解释一下。

  • 在您的 html 中，您添加要加载jwplayer的代码，假设代码在head块中。
  • 浏览器通知其他组件加载脚本并继续其 html 解析工作。
  • 现在它遇到一个脚本块并执行脚本（因为这是浏览器的本质）
  • 该脚本块利用jwplayer.
  • 假设jwplayer尚未加载。
  • 所以，你得到的错误jwplayer是undefined.

用我的方法（实际上，类似的东西以不同的形式广泛使用）

  • 如果jwplayer尚未加载，则代码仅将 存储arguments在数组中。
  • load_jwplayer_skin您有许多调用函数的脚本块。
  • 因此，沿着时间线，何时jwplayer准备好并从您调用的其他脚本块中调用load_jwplayer_skin，然后load_jwplayer_skin调用doLoadJWPlayerSkin存储在数组中的每个先前参数。
  • 最后它分配doLoadJWPlayerSkin给load_jwplayer_skin。因此，未来的调用load_jwplayer_skin将直接执行doLoadJWPlayerSkin。实际上这是某种形式的lazy initialization.

我的方法有一个问题；那是 -

假设您开始加载并且jwplayer所有load_jwplayer_skin函数调用都在jwplayer加载之前执行。现在什么都不会发生。

对于这种场景，我events个人使用。但是您可以这样做，用于在调用jQuery的回调中加载脚本 &一次。在其他地方只是打电话。试试这个，我相信你的问题会得到解决。如果你想澄清什么，我在这里。.getScriptload_jwplayer_skinload_jwplayer_skin

祝你好运！

于 2013-06-29T12:38:50.217 回答