html - Angularjs + HTML鼠标悬停播放youtube

Question

鼠标悬停在电影上时，我想播放电影。就像facebook。

<div class="col-sm-12">   
  <div class="embed-responsive embed-responsive-16by9">   
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/pQIXz-uhjIk">
    </iframe>   
  </div>
</div>

该网站是使用angularjs和html构建的。
(我是一个非常新的人，所以请尽可能解释一下解决方案，而不仅仅是粘贴代码)

溴

Answer 1

在这个plunker中建立一个“像” facebook的解决方案

要动态运行播放器，您必须集成ifram api。

您必须将其添加到index.html

<script src="https://www.youtube.com/iframe_api"></script>

然后，您需要在 Controller 中像这样处理其API的异步加载(不知道为什么要这样做):

//i create a promise to wait for the YT.loaded to be true
var defered = $q.defer();
var promise = defered.promise;

//i launch this function until the YT.loaded is true
var interval = $interval(function(){
  if(YT.loaded){
    //if the YT api is loaded, i cancel the interval and resolve the promise
    defered.resolve();
    $interval.cancel(interval);
  }
})

现在，当YT api准备就绪时，我可以创建一个播放器:

var videoId = "pQIXz-uhjIk";
//when the API is ready
promise.then(function(){
  //i create an Iframe player in the div with the "ytplayer" id
  $scope.ytplayer = new YT.Player('ytplayer', {
      height: '200',
      width: '300', 
      videoId: videoId
    }) ; 
}); 

现在，我可以使用 $scope.ytplayer对象完全控制播放器。

我准备了两个功能来启动和暂停播放器:

$scope.startPlayer = function(player){
  player.playVideo();
};
$scope.pausePlayer = function(player){
  player.pauseVideo();
}

现在让我们看一下HTML和鼠标的技巧:

  <div ng-show="ytplayer" ng-mouseenter="startPlayer(ytplayer)" ng-mouseleave="pausePlayer(ytplayer)" class="embed-responsive embed-responsive-16by9">
     <div id="ytplayer"></div>
  </div>

仅当设置了 ytplayer时，我才显示div。当我进入div时，我在播放器 startPlayer()上运行 ytplayer。当我离开div时，我在 pausePlayer()上运行 ytplayer。
embed-responsive类是包装播放器的 inline-block
...几乎就是全部。

如果您只需要在mouseenter上启动播放器，那么Michelem的解决方案可能是最好的选择，也是最简单的选择。但是，如果您需要对播放器进行更多控制，请记住我的解决方案(即使有些棘手)。

希望能有所帮助。