1

iframe の代わりに object タグを使用して YouTube ビデオを埋め込もうとしています。ただし、 element.url が正しい URL を指していても機能しません。{{element.url}} (オブジェクト タグ内) を URL だけに置き換えると、問題なく動作します。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 では機能するのに、オブジェクト タグでは機能しないのはなぜですか?

4

1 に答える 1

2

この問題は、多くの SO の質問と回答で説明されています。要するに、私が正しく理解している限り、それは remote を「実行」するためです<object>。この場合、 all <object>see as source は、実際には単なるリテラル {{ 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>のディレクティブをラップすることもできます。

于 2014-08-09T16:16:48.997 に答える