Angular - 如何在点击时播放YouTube视频

I have an overlay over iframe and I want to make it so that when a user clicks on that iframe overlay video starts playing. Since that page is where I list all the articles I have more iframes, so I should pick the one from that element and then play it. How can I do that in Angular, what should I do in my controller when the click event happens?

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

This is my html:

这是我的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>

Update

I have tried a suggestion where I don't need to use the Youtube API, but the video was not being played. This is my code:

我尝试了一个建议,我不需要使用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>

My controller:

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

3 个解决方案

#1

Based on article below mention, if we want to control youtube action like play and stop we need to use youtube api then we can control it by using JS.

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

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

or you can use some ready made lib like.

或者你可以使用一些现成的lib。

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

Or you create custom directive which internally uses youtube api.

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

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

#2

The simplest solution, which doesn't involve using the YouTube API would be to autoplay the video and remove the <iframe /> from the DOM tree until the user clicks the overlay.

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

E.g.:

      <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>

and somewhere in your controller:

在控制器的某个地方:

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

YouTube Iframe embed auto play @ *

YouTube Iframe嵌入了自动播放@ *

#3

you could do something like this :

你可以这样做:

on init

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

and on click

并点击

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

and then on html

然后在HTML上

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

#1