javascript - Jwplayer 与 angularjs

Question

我正在尝试以多种方式在我使用 angularjs 的网络应用程序中启动 jwplayer 。我需要在 file 选项中传递文件的动态链接。在我的 Controller 中，我可以通过简单的功能实现动态链接

getVideoStreaming: function(file) {
    $scope.fileName = file.name;
    $scope.documentId = document.id;
    $scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
},

当我单击打开一个要在其中显示视频的模式的按钮时，会调用此函数。

<button data-uk-modal="{target:'#videoPlayer'}" data-ng-click="files.getVideoStreaming(file)"> Open video </button>

现在的问题是..我如何将此变量传递给我的模态？根据jwplayer基本配置，这是我应该做的:

<!-- dialog video -->
<div id="videoPlayer" class="uk-modal">
    <div class="uk-modal-dialog" style="width: 680px!important;">
        <a class="uk-modal-close uk-close"></a>
        <h3 class="uk-panel-title">
            <i class="zmdi zmdi-collection-text"></i>
            {{docName}}
        </h3>
        <div id="myElement">Loading the player...</div>

        <script type="text/javascript">
            var playerInstance = jwplayer("myElement");
            playerInstance.setup({
                file: "http://example.com/uploads/file.mp4",
                image: "http://example.com/uploads/myPoster.jpg",
                width: 640,
                height: 360,
                title: 'Basic Video Embed',
                description: 'A video with a basic title and description!'
            });
        </script>
    </div>
</div>

但是，当然，正如我刚才所说，我需要动态的文件。有可能找到解决办法吗？

Answer 1

我没有尝试在模态中使用 JWPlayer，但我编写的指令应该适合您。如果没有，那么也许您可以进行逆向工程并进行调整。看看我如何使用 ng-src 作为视频文件，指令正在观察变化。

ng-jwplayer

或bower install ng-jwplayer --save

然后使用类似:

<jwplayer ng-src="{{ videoSrc }}"
         player-options="options"
         player-id="myPlayer1">
</jwplayer>

并将您的选项移至

...
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
$scope.options = {
  image: "http://example.com/uploads/myPoster.jpg",
  width: 640,
  height: 360,
  title: 'Basic Video Embed',
  description: 'A video with a basic title and description!'
}

该包还使用一项服务来确保全局 jwplayer 不会被多次实例化。