Question

我可能会以错误的方式解决这个问题，但我正在尝试创建一个由多个视频填充的垂直滚动网页。每个视频的数据来自我后端的端点，我想使用ng-repeat为每个视频生成一个jwplayer。

目前我得到的是：

<div id="repeatingvids" ng-repeat="video in retrieved_videos">
    <div id="jwplayer{{$index}}">
    </div>
    <script type="text/javascript">
      jwplayer("jwplayer{{$index}}").setup({
        file: {{retrieved_videos[{{$index}}].video_url}},
        type: 'mp4',
        width: '100%',
        aspectratio: '16:9',
        controls: 'true',
        }
      });
    </script>
</div>

控制器的重要部分看起来像

$http.get(getVideos).success(function(results)
    {
      $scope.retrieved_videos = results;
    });

现在在有人说出来之前我绝对知道脚本标签中的代码是垃圾，而那些数据绑定标签完全无效，我只是把它们放在那里，以便对我想要完成的事情有所了解。

我最初尝试在http成功回调中设置所有jwplayers，循环遍历结果，但由于$ http.get的异步性质，ng-repeat没有任何东西可以在加载时循环，并加载回调后的页面导致jwplayer（'element'）。设置未定义，因为当然元素不存在。

所以我遇到了麻烦，任何帮助都会受到赞赏！

Answer 1

您必须在一个页面上包含angular和jwplayer。如果你有一个jwplayer的密钥，就像你通常根据他们的文档那样包含它

<script type="text/javascript" src="/scripts/jwplayer.js" ></script>
<script type="text/javascript">jwplayer.key="YOUR_JW_PLAYER_KEY";</script>

将您想要的任何jwplayer设置选项添加到角度控制器中的对象。

angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {

    $scope.options = {
        file: "pathToMyVideo/myvideo.mp4",
        image: "pathToMyImage/image.jpg", // optionnal
        height: 360,
        width: 640
    };

}]);

将元素添加到页面并设置＆＃34; setup＆＃34;属性为您在控制器中设置的变量。通过设置player-id变量为元素赋予id也是一个好主意。

<div ng-controller='HomeCtrl'>  
    <jwplayer setup="options"></jwplayer>
</div>

https://tomcat.apache.org/maven-plugin-trunk/executable-war-jar.html

使用ng-repeat的多个jwplayers

1 个答案: