离子 iframe ng-src youtube 视频链接不起作用答案

【问题标题】：ionic iframe ng-src youtube video link not working离子 iframe ng-src youtube 视频链接不起作用
【发布时间】：2016-07-04 17:38:20
【问题描述】：

我是 Ionic 的新手，我正在尝试使用 ionic 1 构建一个应用程序。除了 ng-src 中的视频 URL 外，一切正常。这是我的代码

$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }
<iframe width="100%" height="315" ng-src="{{trustSrc(guide.video_url)}}" frameborder="0" allowfullscreen></iframe>

拒绝显示“youtube.com/watch?v=4me16JMuBbs”；在一个框架中，因为它将“X-Frame-Options”设置为“SAMEORIGIN”

【问题讨论】：

什么是错误？？
@WasiqMuhammad 这是我遇到的错误拒绝在框架中显示“youtube.com/watch?v=4me16JMuBbs”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

标签： javascript angularjs iframe ionic-framework

【解决方案1】：

您应该将您的视频 URL 修改为可嵌入版本：

这是您的网址，因为 YouTube 不允许将其嵌入到 iFrame 中，所以该网址无效

youtube.com/watch?v=4me16JMuBbs

这是正确的网址

youtube.com/embed/4me16JMuBbs

对于 YouTube，您可以这样做（您应该测试每个 URL 是否具有相同的格式）

url.replace('watch?v=', 'embed/')

对于 Vimeo，您可以这样做（您也应该对其进行测试）：

url.replace('vimeo.com', 'player.vimeo.com/video')

【讨论】：

数据来自数据库，用户可以上传任何 youtube 或 vimeo url
我想我必须在控制器中转换 url...让我试试...谢谢

【解决方案2】：

试试这个

<iframe width="100%" height="315" ng-bind-html="trustAsResourceUrl" frameborder="0" allowfullscreen></iframe>


in your controller first add `'$sce' then

$scope.trustSrc = function(src) {
$scope.trustAsResourceUrl = $sce.trustAsHtml(//Your URL code);

}

或

<iframe width="100%" height="315" src="{{trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>

【讨论】：