带有 angularjs 的 Jwplayer答案

【问题标题】：Jwplayer with angularjs带有 angularjs 的 Jwplayer
【发布时间】：2019-08-07 15:37:01
【问题描述】：

我正在尝试以多种方式在我使用 angularjs 的 Web 应用程序中启动 jwplayer。我需要在 file 选项处传递文件的动态链接。在我的控制器中，我可以通过一个简单的功能获得动态链接

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>

当然，正如我刚才所说，我需要file 动态。有没有办法解决这个问题？

【问题讨论】：

标签： javascript jquery angularjs jwplayer

【解决方案1】：

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

ng-jwplayer

或bower install ng-jwplayer --save

然后使用like：

<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 不会被多次实例化。

【讨论】：