动态加载jwplayer或任何js文件

Dynamic loading of jwplayer or any js file

本文关键字：js 文件 任何 加载 jwplayer 动态      更新时间：2023-09-26

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

因此，我想首先检查flash播放器是否安装到浏览器中，如果是的话，我只想加载jwplayer。要检查是否安装了闪存，请使用以下

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

如果hashFlash为true，那么只有我会加载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 OR，如下

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

但我得到了以下错误"Uncaught Referenceror:Jwplayer没有在函数load_Jwplayer_skin中定义"。

如果我使用…加载jwplayer，同样也能正常工作。。。。。在页首。因此，我觉得jwplayer在全球范围内是不可用的。

请有人建议我如何进行。

试试这个：

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准备好，它就循环遍历数组中的所有项&调用原始加载器CCD_ 3。最后，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
  • 最后将CCD_ 21分配给CCD_。因此，将来对load_jwplayer_skin的调用将直接执行doLoadJWPlayerSkin。实际上这是lazy initialization的某种形式

我的方法有一个问题；即

假设您已开始加载CCD_ 26&所有的CCD_ 27函数调用都在CCD_。现在什么都不会发生。

对于这种场景，我个人使用events。但你可以这样做，使用CCD_ 30加载脚本&在CCD_ 31的回调中调用CCD_。在其他地方，只需拨打doLoadJWPlayerSkin3。试试这个，我相信你的问题会解决的。如果你想澄清什么，我在这里。

祝你好运！

相关文章：