Jwplayer - 错误：jwplayer(...).setup 不是函数答案

【问题标题】：Jwplayer - Error: jwplayer(...).setup is not a functionJwplayer - 错误：jwplayer(...).setup 不是函数
【发布时间】：2016-10-17 05:22:09
【问题描述】：

我必须在弹出窗口中显示 jwplayer，对于弹出窗口我使用 ngDialog(angular)，ngDialog 的代码如下：

$scope.showVideoPlayerPopup = function(video_path)
{
    $scope.ngDialog = ngDialog;
            ngDialog.open({
                animation: true,
                scope:$scope,
                template:'<div id="video_popup"></div>',
                plain: true,
                //className: 'ngdialog-theme-default',
                closeByDocument: true
                //backdrop : 'static'
            });
        playVideo(video_path);
}

上面调用的播放视频函数包含jwplayer的代码，如下：

<script>
    function playVideo(video_path)
    {
        jwplayer("video_popup").setup({
            file: video_path,
            width: "600px",
            height: "600px",
            stretching: "bestfit",
        });
    }

</script>

当我对没有弹出窗口的简单 html 代码使用相同的 jwplayer 代码时，它工作正常，但我尝试将我的 html 放在弹出窗口中，它给了我以下错误：

错误：jwplayer(...).setup 不是函数

更新

我包含的文件：

<script src="https://content.jwplatform.com/libraries/qAkRysIB.js"></script>

【问题讨论】：

你添加了 jwplayer.js 文件吗？

标签： angularjs jwplayer ng-dialog

【解决方案1】：

确保包含 jwplayer src（您可能已经这样做了，但万一没有：）

2021 年 11 月更新

请参阅文档页面Add a player library 上的Cloud-hosted 部分。这需要obtaining a JWPlayer account。
1. 从您的 Player Downloads & Keys 页面，向下滚动到 Cloud Hosted Player Libraries 部分。
2. 在 Cloud Hosted Player Libraries 部分，从下拉菜单中选择 Player Title。
3. 复制云播放器库网址。
4. 在您页面的<head> 中，将网址复制并粘贴到播放器库。
```
<script src="{cloud_hosted_player_library_url}"></script>
```
在调用setup 函数之前确保面板已经加载。一种方法是从 ngDialog 为 ngDialog.opened 注册一个事件侦听器（请参阅 ngDialog readme 的 Events 部分）：
```
$scope.$on('ngDialog.opened', function (e, $dialog) {
  playVideo();
});
```

【讨论】：

谢谢@Sam。工作完美。拯救了我的一天！
文档在哪里描述<script type="text/javascript" src="http://p.jwpcdn.com/6/10/jwplayer.js"></script>是必要的？
@Philll_t 我不记得我在哪里找到该 URL，但我已经更新了答案以与最新文档一致，因为以前的 URL 似乎不再适用于 jsbin 示例。

【解决方案2】：

是的...因为在 jwplayer(...).setup 脚本可以工作之前，您的 id 为“current_video_path”的 div 标签必须存在于 DOM 中...也许您可以使用 $timeout 或 setTimeout 添加一些延迟，所以在此脚本可以运行之前，它将有足够的时间在弹出窗口中呈现 div..

【讨论】：

如何确定延迟时间，在这种情况下总是使用回调。
@Sweety Webashlar ：我已经在我的 DOM 中创建了。还是谢谢。
是的......可以做到......我只是想让他意识到一定有时间问题......这只是我主要关心的问题。这是快速检查他的情况是否相同的选项..

2021 年 11 月更新