个人中心
gpt4 book ai didi

angularjs - 使用ngRepeat嵌入YouTube视频

转载 作者：行者123 更新时间：2023-12-03 05:45:42 26 4
gpt4 key购买 nike

我有一个问题。我正在投资组合网站上，它应该根据存储在json中的URL自动列出所有内容。我在videos数组下有这行。

"url": "https://www.youtube.com/watch?v=4ZHwu0uut3k",
"date": "2016-05-11"

我必须使用此方案，因为我在其他地方以不同的形式使用链接。我想没问题，我去实现一个过滤器。 
.filter("GetYouTubeID", function ($sce) {
  return function (text) {
      var video_id = text.split('v=')[1].split('&')[0];
      return video_id;
  }
})

因此，我转到HTML，然后从 ng-repeat开始 
    <div class="media z-depth-1" ng-repeat="video in videos | orderBy: '-date'"  style="padding:20px">
        <div>
     <iframe width="560" height="315" src="https://www.youtube.com/embed/{{video.url | GetYouTubeID}}" frameborder="0" allowfullscreen></iframe>
            <p>Display output for control reasons: {{video.url | GetYouTubeID}}</p>
        </div>
    </div>

所有这些都应该起作用，对吗？但是，事实并非如此。为什么？我无法理解这一点。完全没有请帮忙？

编辑＃1

西蒙·舒普巴赫(SimonSchüpbach)发表评论后，我尝试了以下操作，但无济于事: 
.filter("GetYouTubeID", function ($sce) {
  return function (text) {
      var video_id = text.split('v=')[1].split('&')[0];
      var ytembed = 'https://www.youtube.com/embed/';
      var complete_id = ytembed + video_id;
      return complete_id;
  }
})

我认为也许在过滤器中构造整个URL可能很聪明。 
 <div class="media z-depth-1" ng-repeat="video in video| orderBy: '-date' | filter: 'video'" style="padding:20px">
                <div>
             <iframe width="560" height="315" ng-src="{{video.url | GetYouTubeID}}" frameborder="0" allowfullscreen></iframe>
                    <p>{{video.url | GetYouTubeID}}</p>
                </div>
            </div>

这次，我的应用似乎可以嵌入一些东西，但是视频应该有空白。不过，底部的控制输出是正确的。

编辑＃2

我对此线程的建议有些不满意。但是，没有任何效果。如果将完整的embed-URL放入重复元素，则会显示视频。我得出结论，问题是重复出现的。

因此，我决定查看Chrome的“检查元素”输出。它给出了什么: 
<iframe width="560" height="315" frameborder="0" allowfullscreen=""></iframe>

你看到什么丢失了吗？ src。所以有什么可以解决的。

我在底部显示的control-URL始终与正确的YouTube嵌入URL匹配。

编辑＃3

@bahadirT建议后，我尝试了以下操作:

在我的IndexController中: 
 $scope.getProperURL = function (videoURL) {
        var video_id = videoURL.split('v=')[1].split('&')[0];
        return "https://www.youtube.com/embed/" + video_id;
    }

在我的HTML中: 
<iframe width="560" height="315" src={{getProperURL(video.url)}} frameborder="0" allowfullscreen></iframe>

                    <p>Display output for control reasons: {{video.url | GetYouTubeID}} </p>

                    <p>Function URL: {{getProperURL(video.url)}}</p>

现在，您认为这将起作用，因为带有功能URL的行显示了正确的URL。然而!当我扔ngRepeat时，控制台给了我很多错误。全部都在 [$interpolate:interr]下提交 
  at Error (native)
    at http://127.0.0.1:58561/bower_components/angular/angular.min.js:6:412
    at Function.Ja.interr (http://127.0.0.1:58561/bower_components/angular/angular.min.js:209:135)
    at H (http://127.0.0.1:58561/bower_components/angular/angular.min.js:104:156)
    at Array.<anonymous> (http://127.0.0.1:58561/bower_components/angular/angular.min.js:128:176)
    at R.exp (http://127.0.0.1:58561/bower_components/angular/angular.min.js:105:277)
    at pre (http://127.0.0.1:58561/bower_components/angular/angular.min.js:79:130)
    at ja (http://127.0.0.1:58561/bower_components/angular/angular.min.js:80:350)
    at n (http://127.0.0.1:58561/bower_components/angular/angular.min.js:65:341)
    at g (http://127.0.0.1:58561/bower_components/angular/angular.min.js:58:305)

即使我的内容安全策略位于“单页应用程序”的头中，也是如此: 
jquery.min.js:3The Content Security Policy 'child-src *;' was delivered via a <meta> element outside the document's <head>, which is disallowed. The policy has been ignored.

最佳答案

我的代码在此jsfiddle link上工作:

js面[编辑]:

var app = angular.module("app", []);
app.controller("controller", function ($scope) {
$scope.videos = [
{
    "url": "https://www.youtube.com/watch?v=6vE0oFFSE7c",
        "date": "2016-05-11"
},
{
    "url": "https://www.youtube.com/watch?v=6vE0oFFSE7c",
        "date": "2016-05-11"
}
];

});

app.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
            var video_id = url.split('v=')[1].split('&')[0];
        return $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + video_id);
    };
}]);

html面[编辑]: 
<div ng-controller="controller">
<div ng-repeat="video in videos | orderBy: '-date'"  style="padding:20px">
<div>
   <iframe width="560" height="315" ng-src="{{video.url | trusted}}" 
     frameborder="0" allowfullscreen></iframe>
    <p>Display output for control reasons: {{video.url | trusted}}</p>
</div>
</div>
</div>

编辑:我已经更新了代码，现在正在使用过滤器。我所做的是用“$ sce.trustAsResourceUrl()”标记URL。从 here找到了解决方案。

关于angularjs - 使用ngRepeat嵌入YouTube视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37279174/

26 4 0
文章推荐： elasticsearch - Gradle构建即使实际上在其中也找不到JAVA_HOME
文章推荐： ruby-on-rails - 为什么要求我运行 'rake db:migrate RAILS_ENV=test' ？
文章推荐： javascript - jQuery .load 函数不起作用
文章推荐： mobile - Microsoft Edge 的用户代理字符串名称是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com