当嵌入的 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);
}
});
最佳答案
放置一个 position:fixed
和 background-color: rgba(0, 0, 0, 0.75)
覆盖整个页面的 div,然后将视频放在通过监听来自播放器的 onStateChanged 事件最重要的是。您必须使用 javascript player api 才能工作。
关于javascript - 在播放 youtube 视频时淡出页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13485287/