Question

以下所有代码均可成功运行以获取youtube播放列表并显示它没有任何问题。但我无法使用角度js播放此列表中的任何视频。

Angular JS

   var app = angular.module("myApp", []);
   app.controller("myCtrl", function ($scope, $http) {
       //contentDetails - snippet

       $http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLlMsyZB0poTDYImmOliKyiC-jpAFUsr6X&key=AIzaSyDGm1uzuqPPUGzG-qN7u6gTaS8ApXBJYvw')
            .then(function (response) {
                $scope.records = response.data.items;
            });

       $scope.PlayFun = function (Val) {
           var Vid_ID = Val;
           var New_Vid = "<iframe width='450' height='283' src='https://www.youtube.com/embed/" + Vid_ID + "?autoplay=1&loop=1&rel=0&wmode=transparent' frameborder='0' allowfullscreen wmode='Opaque'></iframe>";
           var Vid_Elm = document.getElementById("video");

           Vid_Elm.setAttribute("crs", New_Vid);

       };

   });

HTML

    <iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

    <br />

    <ul data-ng-app="myApp" data-ng-controller="myCtrl">
        <li data-ng-repeat="x in records">
                    <img class="img-thumbnail" style="width:100px; height:80px;" 
                    src="{{x.snippet.thumbnails.default.url}}" />
            <br />

            <input data-ng-click="PlayFun(x.snippet.resourceId.videoId)" type="button" value="{{x.snippet.title}}" />
        </li>
    </ul>

我的问题具体在＆＃34; $ scope.PlayFun＆＃34;我无法使用角度js通过视频ID从列表中运行视频。我的方法是在ng-click上更改iframe html以传递新选择的Vid_ID并使其成为＆＃34; autoplay = 1＆＃34;说它没有用。

Answer 1

您可以将iframe的src设置为ng-src，如下所示：

<iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" ng-src="{{videoSource}}" frameborder="0" allowfullscreen></iframe>

在您的控制器中，您只需更改视频源的网址，它就会自动更改视频源。为了安全起见，你确实需要信任资源网址（这也意味着注入$ sce）

$scope.videoSource = $sce.trustAsResourceUrl("//www.youtube.com/embed/9B7te184ZpQ?rel=0");

Working PLunker demo

如何使用angularjs播放youtube视频

1 个答案: