如何使用 angularjs 播放 youtube 视频

Question

以下所有代码都可以成功获取 youtube 播放列表并毫无问题地显示它。但是我无法使用 angular 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>

我的问题具体出在“$scope.PlayFun”，我无法使用 angular js 运行按视频 ID 从列表中选择视频。我的方法是在 ng-click 上更改 iframe html 以传递新选择的 Vid_ID 并使其 "autoplay=1" 不起作用。

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>

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

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

Working PLunker demo

如何使用 angularjs 播放 youtube 视频

How to play youtube video using angularjs

javascript

angularjs

youtube-iframe-api