基本上，有没有一种方法可以使图像/div“不可见”，因为用户点击直接通过它进入z空间中它下方的div？
示例是 iframe 中的 Youtube 视频，但需要自定义播放按钮。关键是它必须是用户按下启动播放的原生播放按钮。它不能通过 js api 或任何自动化方法触发。所以......本质上需要让用户看到图像，但是当用户点击时让它表现得好像它不存在一样。
有什么建议么？
最佳答案
编辑 04-22-2015
关于您的评论:
我们可以在文档中看到 player.playVideo()不计入增加的 YouTube 品牌 channel 视频观看次数。只有 native 按钮播放适用于此。
事实上，我们可以在 doc 上阅读:
player.playVideo():Void Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
来源:https://developers.google.com/youtube/iframe_api_reference#playVideo
此信息由官方YouTube support确认
部分: YouTube 公开播放次数
The YouTube Video Player allows masthead video views to count directly toward overall YouTube brand channel video views. For the YouTube view to count, the user must click to start the video using the standard YouTube play button. Autoplay videos don't count toward YouTube views.
部分:标准 VS 无 Chrome
The chromeless YouTube Player lets you customize features like player controls, while still pulling in YouTube-served videos. Aside from the standard play button overlay, clicks on the chromeless player's custom control buttons don't count toward incremental YouTube brand channel video views.
来源:https://support.google.com/richmedia/answer/2566092?hl=en
所以我用函数
hide() 做了一个新的解决方案和 show()的 Jquery。使用此解决方案，用户将单击 native 按钮播放器，如果视频未播放，则会正面显示图像。您需要使用元素，而不是 API
HTML
$(".player-video").mouseenter(function() {
$('.player-video').hide();
$('#player').show();
});
$("#player").mouseleave(function() {
$('.player-video').show();
$('#player').hide();
});
Javacript
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/l-gQLqv9f4o" frameborder="0" allowfullscreen style="display:none"></iframe>
<div class="player-video">
</div>
我给你做了另一个活生生的例子:http://jsbin.com/luqewajuse/1/edit?html,js,console,output
结束编辑
您可以使用:
<div id="player"></div>
<button class="play-video">Play</button> //can be button or whatever
$(".play-video").click(function() {
player.playVideo();
}
编辑 31/01/2015
关于你的评论和你想要做什么，我给你做了一个现场演示，向你展示它是如何工作的:
现场演示:http://jsbin.com/jefubusejo/2/edit?html,js,output
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.player-video {
width: 600px;
height: 340px;
background-image:url('http://www.hqsoul.com/wp-content/uploads/2014/11/Mark-Ronson-Uptown-Funk-ft.-Bruno-Mars.jpg');
}
</style>
</head>
<body>
<div id="player" style="display:none"></div>
<div class="player-video">
</div>
</body>
</html>
Javascript:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
$(".player-video").click(function() {
$('.player-video').hide();
$('#player').show();
onPlayerReady();
});
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'l-gQLqv9f4o',
events: {
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady() {
player.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
关于iframe - iframe播放按钮上的图像z-index，无需js直接通过点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28053243/