jwplayer或任何js文件的动态加载

Posted 2023-02-25

【中文标题】jwplayer或任何js文件的动态加载

【英文标题】：Dynamic loading of jwplayer or any js file

【发布时间】：2013-06-29 12:29:08

【问题描述】：

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

因此，我想首先检查浏览器中是否安装了 Flash 播放器，如果是的话，我只想加载 jwplayer。要检查是否安装了 Flash，我在下面使用

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 在全局范围内不可用。

请有人建议我如何进行。

【问题讨论】：

你有运行这个的例子吗？

【参考方案1】：

试试这个：

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 准备就绪，它就会遍历数组中的所有项目并调用原始加载程序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 加载脚本& 在.getScript 的回调中调用load_jwplayer_skin 一次。在其他地方只需拨打load_jwplayer_skin。试试这个，我相信你的问题会得到解决。如果你想澄清什么，我在这里。

祝你好运！

【讨论】：

我不能使用它，因为我需要在一个页面上添加多个音频皮肤。在这种情况下，每次都会下载 jwplayer（如果浏览器不支持缓存）。因此我想在全局范围内加载 js这样我就可以从任何有文件的地方使用 jwplayer。

感谢您的回复。我不明白你要在哪里加载 jwplayer.js。如果 jwplayer 在全局范围内可用，我可以直接调用 doLoadJWPlayerSkin 以在所需位置获取 jwplayer 的皮肤。我的问题是将 jwplayer.js 加载到全局范围内，以便我可以调用 doLoadJWPlayerSkin。同样 jwplayer.js 应该仅在安装了 flash 播放器时才被加载。但是您的代码不会处理这个问题。您的代码似乎将视频/音频动态绑定到 jwplayer。如果我错了，请纠正我。

抱歉耽搁了。我忘了提到，你可以使用任何一种你用来加载jwplayer 的方法。我以为你会弄清楚的。没问题。我从load_jwplayer_skin 打电话给doLoadJWPlayerSkin 的原因是，我们不知道jwplayer 什么时候准备好。浏览器以不同的方式解析 html 并以不同的方式加载脚本。请在答案中查看我的更新以获取更多详细信息。