0

我目前正在构建一个顶部有一个大英雄视频的网站，我想覆盖一个自定义标题卡。该项目要求标题卡在悬停时稍微改变颜色，单击时消失并播放隐藏在其后面的 YouTube 视频。

第一部分，制作带有悬停文本的大英雄图像，很容易（http://couchcreative.co/tcc/stories.html）。但是，现在我正在努力执行以下步骤：

1）让标题卡在点击时消失，显示下面的 YouTube 视频（我猜我会使用某种形式的 javascript 来切换不透明度或在 div 上显示更改以交换两个元素？）。

2）获得点击立即开始播放YouTube视频，因此用户无需点击两次即可观看视频。

3) 确保视频暂停或播放结束时标题卡不会返回。

我一直在使用 YT 的 javascript API，并且我已经根据我的需要定制了一个无铬播放器，但是我遇到了确保标题卡消失并且视频开始播放的 javascript 的问题。任何帮助将不胜感激！

4

1 回答 1

1

弄清楚了。原来 YouTube API 要求我准备好播放器，我没有意识到这是必要的。添加了一些 jQuery 淡入和淡出，我很高兴。我所要做的就是创建一个新的 JS 文件，其中包含：

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
    });
}

$('a.containerdiv').click(function() {
    $('.titlecard').fadeOut('fast', function() {

    });

    $('.youtubevideo').fadeIn('fast', function() {

    });

    player.playVideo();

});

我还确保在我的 HTML 中调用 YouTube API 文件，但我很晚才意识到我忘了这样做。最后的动画效果也很好。甜的！

于 2013-01-31T04:09:01.617 回答