Question

我正在设计一个网站，我有一个电影海报，一旦用户将鼠标悬停在海报上，我希望它改为YouTube视频播放器（带电影预告片）。

我需要海报更改为YouTube播放器的效果。要链接我正在使用iframe的YouTube视频：

 <iframe width="420" height="345"
         src="http://www.youtube.com/embed/XGSy3_Czz8k">
  </iframe>

此外，当视频播放时，我希望背景消失，视频在前景中播放，就像http://www.imdb.com/中的那样。

Answer 1

我建议首先使用YouTube的iframe API，如文档here所述。

这样，您只能在基本JS事件上创建iframe。在jQuery中，例如：

$(document).ready(function{
  //load YouTube API as indicated above
  //set the id of each poster to the videoId of the trailer
  $('.someClass').mouseenter(this.id, loadPlayer); 
  var loadPlayer = function(id) {
    new YT.Player(id, {
    videoId: id,
    //other settings as needed
    }
  };
});

这不是复制粘贴工作，所以做一些更多的研究！这个post（外部博客，不是我的博客）对我开始学习点播视频加载非常有帮助。

Answer 2

我建议在youtube包装中使用mediaelementjs; 它就像你使用标签一样公开yo uhtml5方法和属性

如何在将鼠标悬停在图像上时弹出YouTube视频播放器

2 个答案: