Question

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

JavaScript的？ jquery的？

这是我得到的，我不知道足够的编码（只是html / css）使用它虽然： https://developers.google.com/youtube/js_api_reference#Adding_event_listener

我想出了如何使用API调用视频，并在API中找到一些事件监听器代码来调用状态更改函数（ex play和end video），虽然我不确定为什么听众部分不工作..我没有任何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播放器api才能工作。

在播放YouTube视频时淡出页面

1 个答案: