Question

我正在以角度嵌入来自数据库的youtube视频。如果我直接使用它而不使用数据库，那么它工作正常。但是从数据库访问它会给我以下错误。

错误：[$ injector：unpr] http://errors.angularjs.org/1.3.2/ $ injector / unpr？p0 = youtubeEmbedUrlFilterProvider％20％3C-％20youtubeEmbedUrlFilter

我搜索了SO，发现了一个与此类似的问题。 how to embed video link from database in iframe using angularjs

但是在使用相同的答案时，我无法播放YouTube视频。实际上视频没有出现，我得到的错误相同。来自db的Youtube视频 -

youtubevideo:"https://www.youtube.com/embed/c-z9M6KZs_0"

 <div ng-style="{'display':youtubevideo == ''?'none':'block'}">  
                                            <iframe title="YouTube video player"
class="YouTube-player" type="text/HTML" width="350" height="194"
                                                    ng-src="{{youtubevideo| youtubeEmbedUrl}}" frameborder="0" allowfullscreen></iframe></div>

                                    <!-- Youtube Video Above  -->

下面的代码添加在脚本文件中。

 ProfileApp.filter('youtubeEmbedUrl', function ($sce) {
          return function(videoId) {
            return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + videoId);
          };
        });

请告知我的错误。

Answer 1

＆＃13;

console.clear();

var app = angular.module('myApp', []);

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

app.controller('videoController', ['$scope',
  function MyCtrl($scope) {

   $scope.youtubevideo="https://www.youtube.com/embed/c-z9M6KZs_0";

    $scope.getIframeSrc = function(src) {
      return  src;
    };
  }
]);

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="videoController">

  <div class="thumbnail">
    <div class="video-container">
      <iframe width="100%" ng-src="{{getIframeSrc(youtubevideo)}}" frameborder="0 " allowfullscreen></iframe>
    </div>
  </div>

</body>

</html>

＆＃13;

angular：从数据库中嵌入youtube视频

1 个答案: