角度 - クリック時にYouTube動画を再生する方法

Question

私はiframeにオーバーレイがあり、ユーザーがそのiframeオーバーレイの動画を再生すると再生が始まるようにしたいと考えています。そのページはすべての記事をリストしているので、さらにiframeがあるので、その要素から1つを選んでそれを再生する必要があります。 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

、我々は遊びのようなユーチューブ動作を制御し、我々は、我々はそれを制御することができユーチューブAPIを使用する必要が停止する場合JSを使って

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

---

か、のようないくつかの既製のlibを使用することができます。

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

---

それとも、内部ユーチューブAPIを使用するカスタムディレクティブを作成します。

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

Answer 2

あなたはこのような何かを行うことができます：

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

とクリック

上

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

のinit

上

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