Question

我在iframe上有一个叠加层，我希望这样做，以便当用户点击iframe叠加视频开始播放时。由于该页面是我列出所有文章的地方，我有更多的iframe，所以我应该从该元素中选择一个然后播放它。我怎么能在Angular中做到这一点，当点击事件发生时我应该在控制器中做什么？

这是我的HTML：

          <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
            <iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
            <div class="article-image-link">
              <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
            </div>
            <div class="iframe-overlay" ng-click="playVideo()"></div>
          </div>

更新

我尝试了一个建议，我不需要使用Youtube API，但视频没有播放。这是我的代码：

          <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
            <iframe ng-if="!hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&controls=0&showinfo=0' | safeUrl }}"></iframe>
            <iframe ng-if="hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&autoplay=1' | safeUrl }} "></iframe>
            <div class="article-image-link">
              <h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
            </div>
            <div class="iframe-overlay" ng-click="playVideo($index)"></div>
          </div>

我的控制器：

  $scope.playVideo = function(index) {
    $scope.videoPlaying[index] = true;
    $scope.hasOverlayBeenClicked = true;
  };

Answer 1

根据下面提到的文章，如果我们想控制youtube动作，比如播放和停止，我们需要使用youtube api，然后我们可以使用JS来控制它。

https://developers.google.com/youtube/iframe_api_reference

或者您可以使用一些现成的lib，例如。

https://github.com/brandly/angular-youtube-embed

或者您创建内部使用youtube api的自定义指令。

http://blog.oxrud.com/posts/creating-youtube-directive/

Answer 2

你可以这样做：

on init

$scope.videoSrc = article.external_media[0].url;

并点击

element.bind("click", function(){
  $scope.videoSrc = article.external_media[0].url + "&autoplay=1";
});

然后在html上

<iframe ng-src="{{videoSrc | safeUrl }} "></iframe>

Answer 3

最简单的解决方案（不涉及使用YouTube API）是自动播放视频并从DOM树中删除<iframe />，直到用户点击叠加层。

例如为：

      <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
        <iframe ng-if='hasOverlayBeenClicked' ng-src="{{article.external_media[0].url + '?autoplay=1' | safeUrl }} "></iframe>
        <div class="article-image-link">
          <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
        </div>
        <div class="iframe-overlay" ng-click="playVideo()"></div>
      </div>

和控制器中的某个地方：

$scope.playVideo = function() {
  // ...
  $scope.hasOverlayBeenClicked = true;
}

YouTube Iframe embed auto play @ StackOverflow

Angular - 如何点击

3 个答案: