Jwplayer

Question

我必须在弹出窗口中显示 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 放在弹出窗口中，它给我以下错误：

Error: jwplayer(...).setup is not a function

更新

我包含的文件：

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

Answer 1

是的...因为在 jwplayer(...).setup 脚本可以工作之前，您的带有 id "current_video_path" 的 div 标签必须在 DOM 中存在...可能你可以使用 $timeout 或 setTimeout 添加一些延迟，这样它就有足够的时间在这个脚本运行之前在弹出窗口中呈现 div..

Answer 2

确保包含 jwplayer src（您可能已经包含但以防万一：）

更新 11/2021

参见 Cloud-hosted on the documentation page Add a player library. This will require obtaining a JWPlayer account.
部分
1. From your Player Downloads & Keys page, scroll down to the Cloud Hosted Player Libraries section.
2. In the Cloud Hosted Player Libraries section, select a Player Title from the dropdown menu.
3. Copy the Cloud Player Library Url.
4. Within the <head> of your page, copy and paste the URL to the player library.
```
<script src="{cloud_hosted_player_library_url}"></script>
```
确保面板在调用setup函数之前已经加载。一种方法是从 ngDialog 为 ngDialog.opened 注册一个事件侦听器（参见 Events section of the ngDialog readme）：
```
$scope.$on('ngDialog.opened', function (e, $dialog) {
  playVideo();
});
```

Jwplayer - Error: jwplayer(...).setup is not a function

Jwplayer - Error: jwplayer(...).setup is not a function

angularjs

ng-dialog

更新 11/2021