Question

我正在尝试使用object标签而不是iframe嵌入youtube视频。但是，即使element.url指向正确的URL，它也不起作用。如果我只用url替换{{element.url}}（在object标签中），它就可以了。 iframe按原样运行。

<div ng-show="element.url" id="resourceFrame">      
  <iframe class="iframe" width="500" height="325"  src="{{element.url}}" frameborder="0" allowfullscreen></iframe>
  <object width="500" height="325" >
    <param
      name="{{element.name}}"
      value="{{element.url}}">
    </param>
    <param
      name="allowscriptaccess"
      value="always">
    </param>
    <param
      name="allowFullScreen"
      value="true">
    </param>
    <embed
      src="{{element.url}}"
      type="application/x-shockwave-flash"
      allowscriptaccess="always"
      allowfullscreen="true"
      width="500"
      height="325">
    </embed>
  </object> 
  <div id="text-content" ng-show="element.text">
    <p>{{element.text}}</p>
  </div>
</div>

为什么{{element.url}}可以在iframe中运行，但不能在对象标签中运行？

Answer 1

许多SO问题和答案都描述了这个问题。简而言之，据我所知，这是因为你＆＃34;执行＆＃34;远程<object>。在这种情况下，所有<object>视为来源，实际上只是文字{{ element.url }}。

您可以通过创建自己的Youtube directive来解决此问题。例如：

app.directive('youtube', function() {
    return {
        restrict: 'E',
        scope: {
          movie: '@'
        },
        link: function(scope, element) {
            var object = '<object width="560" height="315">' +
              '<param name="movie" value="' + scope.movie + '" />' +
              '<embed ' +
              '  src="' + scope.movie + '" ' +
              '  type="application/x-shockwave-flash" ' +
              '  width="560" ' +
              '  height="315" />' +
            '</object>';
            element.replaceWith(object);
        }
    };
});

HTML模板中的用法就像

一样简单

<body ng-controller="MyCtrl">
    <youtube movie="{{ movie.url }}"></youtube>
</body>

在控制器中，你有你的电影

$scope.movie = { 
    name: 'movie',
    url: '//www.youtube.com/v/YrrzgE8J1KI'
};

示例Plunker http://plnkr.co/edit/RJyewh，您可以通过添加新属性（宽度等）继续改进。

当然，您也可以在指令中包装任何其他<object>。

嵌入“object”标记不适用于动态数据

1 个答案: