javascript - 在播放 youtube 视频时淡出页面

Question

当嵌入的 youtube 视频正在播放时，如何淡出/或在整个页面上放置黑色半透明封面，并在视频结束或暂停时恢复正常？

JavaScript？ jquery？

据我所知，我不知道足够的编码(只是 html/css)来使用它: https://developers.google.com/youtube/js_api_reference#Adding_event_listener

我想出了如何使用 API 来调用视频，并且我在 API 中找到了一些事件监听器代码来调用状态变化时的函数(例如播放和结束视频)，尽管我不确定为什么监听器部分不工作..我在这个级别没有任何 API 或 javascript 经验..

$(document).ready(function(){

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(
    "http://www.youtube.com/v/TEHWDA_6e3M?enablejsapi=1&playerapiid=ytplayer&version=3",
    "ytapiplayer", 
    "960", 
    "540", 
    "8", 
    null, 
    null, 
    params, 
    atts
);

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}

});

Answer 1

放置一个 position:fixed 和 background-color: rgba(0, 0, 0, 0.75) 覆盖整个页面的 div，然后将视频放在通过监听来自播放器的 onStateChanged 事件最重要的是。您必须使用 javascript player api 才能工作。