采用NG-重演角嵌入YouTube视频 [英] Embed YouTube videos using ng-repeat in Angular

问题描述

我正在使用角 NG-重复指令嵌入从服务器获取一些视频。

I am using ng-repeat directive in Angular to embed some videos fetched from server.

我从服务器获取视频的ID和我有以下code：

I get video IDs from server and I have following code:

<div ng-repeat="media in product.media">
    <div class="thumbnail">
        <div class="video-container">
            <iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen></iframe>
        </div>
    </div>
</div>

当我看到输出，视频没有显示出来。当我在谷歌浏览器检查元素，
在HTML似乎没有改变：

When I see the output, the video is not showing up. And when I inspect element in Google chrome, the html doesnt seem to change:

有什么想法？

推荐答案

由于1.2只能绑定一名当然pression为* [来源] * [NG-SRC]或动作。你可以阅读更多关于它的<一个href=\"https://docs.angularjs.org/guide/migration#you-can-only-bind-one-ex$p$pssion-to-src-ng-src-or-action-\"相对=nofollow>这里。

Since 1.2 you can only bind one expression to *[src], *[ng-src] or action. You can read more about it here.

使用 NG-SRC ，改变你的HTML：

Use ng-src and change your HTML to:

ng-src="{{getIframeSrc(media.src)}}"

在控制器添加：

$scope.getIframeSrc = function(src) {
  return 'https://www.youtube.com/embed/' + src;
};

请注意，你需要指定协议。

Note that you need to specify the protocol.

您还需要添加URL通过配置 $ sceDelegate 服务为值得信赖的：

You also need to add the URL as trusted by configuring the $sceDelegate service:

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

演示： http://plnkr.co/编辑/ 4U5HxNnVDwlF5udRiQa1？p = preVIEW

这篇关于采用NG-重演角嵌入YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！