Question

我正在研究一个项目并且已经被困了几次了。

所以我有一个文件需要显示一个嵌入youtube的iframe视频播放器。所以我确实使用插值w / c我认为它拉起了正确的URL：

<div class="video-player">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" ng-src="{{'www.youtube.com/embed/' + $ctrl.video.id.videoId}}" allowFullScreen></iframe>
  </div>
  <div class="video-player-details">
    <h3>{{$ctrl.video.snippet.title}}</h3>
    <div>{{$ctrl.video.snippet.description}}</div>
  </div>
</div>

但是，出于某种原因，每当我运行我的代码时，我总是在控制台上出现此错误：

angular.js:3626 GET http://127.0.0.1:56035/www.youtube.com/embed/OPxeCiy0RdY 404 (Not Found)

这里奇怪的是，当我在程序运行后尝试检查检查器工具上的元素代码时，它会在iframe中添加一个带有其他HTML标记的#document属性：

<iframe class="embed-responsive-item" ng-src="www.youtube.com/embed/OPxeCiy0RdY" allowfullscreen="" src="www.youtube.com/embed/OPxeCiy0RdY">
   #document

   <html><head></head><body>Cannot GET /www.youtube.com/embed/OPxeCiy0RdY
   </body></html>

</iframe>

我想知道是什么导致了这个错误以及为什么它没有在播放器中显示实际的视频。我还有两个文件可以在这里发布，可能导致错误。第一个是index.js，第二个是videoPlayer.js：

index.js：

angular.module('video-player', [])
.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**',
    'https://www.googleapis.com/youtube/v3/search'
  ])
});

这是videoPlayer.js：

angular.module('video-player')

.component('videoPlayer', {
  bindings: {
   video: '<'
  },
   templateUrl: 'src/templates/videoPlayer.html'
});

我希望有人能指出我在这里做错了什么。我已尽力解决问题我没有找到任何方法知道错误在哪里以及为什么它导致我们不显示实际的iframe。

PS：我们使用live-server作为服务器

Answer 1

在我读完您对此帖后的第二条评论后，我相信您可以通过执行此类操作来解决您的问题，同时确保将您的网址设置为@Striped建议：

<iframe id="iframe" ng-src="{{$ctrl.redirectUrl | trusted}}">
   <p>Your browser does not support iframes.</p>
</iframe>

将$ ctrl.redirectUrl设置在控制器的某处，如下所示：

$ctrl.redirectUrl = "https://www.youtube.com/watch?v=XIJHg1XWR7o";

然后创建可信过滤器：

app.filter('trusted', ['$sce', function ($sce) {
  return function (url) {
    return $sce.trustAsResourceUrl(url);
  };
}]);

如果有帮助，请告诉我。

Angular 1.6错误：GET http://127.0.0.1:56035/[url] 404（未找到）

1 个答案: