如何使用angularjs在iframe中嵌入来自数据库的视频链接

how to embed video link from database in iframe using angularjs

本文关键字：数据库 的视频 链接 angularjs 何使用 iframe      更新时间：2023-09-26

我有一个url视频链接（http://www.youtube.com/watch?v=myvideoid)从我的数据库中，我想使用angular嵌入到我的框架中。

我试过下面的代码，但不起作用

<iframe width="200" height="300"  ng-src="http://www.youtube.com/embed/{{v_link}}" frameborder="0" allowfullscreen></iframe>

其中{{v_link}}是在mysql数据库中存储视频的列。有任何帮助请

您得到的错误是$interpolate:noconcat。它指出：

当需要可信值时，严格上下文转义不允许连接多个表达式的插值。来源

这意味着您必须使用$sce并将所需的URL标记为可信URL这将解决您的问题：

angular
  .module('myApp', [])
  .controller('MainCtrl', function($sce) {
    this.youtubeLink = $sce.trustAsResourceUrl('https://www.youtube.com/embed/N4ony2r0QFs');
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl as vm">
  <iframe width="560" height="315" ng-src="{{ vm.youtubeLink }}" frameborder="0" allowfullscreen></iframe>
</div>

另一种方法，如本答案所述，是创建一个专门为信任youtube URL而构建的自定义过滤器：

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

只要你想嵌入视频，你就会使用这个过滤器，比如ng-src="{{ vm.youtubeLink | youtubeEmbedUrl }}"。

使用$sce，您可以将所需的URL设置为可信URL：

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
  
});
app.filter('trustUrl', function($sce) {
  return function(url) {
    return $sce.trustAsResourceUrl(url);
  };
});
app.directive('youtubePlayer', function() {
  return {
    restrict: 'E',
    scope: {
      header: '@',
      video: '@'
    },
    transclude: true,
    replace: true,
    template: '<iframe ng-src="{{video | trustUrl}}"></iframe>',
    link: function(scope, element, attrs) {
      scope.header = attrs.header;
    }
  };
});
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS App</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <youtube-player video="https://www.youtube.com/embed/ZzlgJ-SfKYE" header="Url Description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </youtube-player>
  </body>
</html>

相关文章：