표시되지 않거나 스티커가 아래로 스크롤 될 때 헤더가 켜지고 음소거되면 YouTube 동영상을 만드는 방법은 무엇입니까?아래로 스크롤되거나 끈적 거리는 소리가 계속 나올 때 YouTube 동영상이 음소거됩니다.
function onYouTubeIframeAPIReady() {
$('iframe[src*="youtube"]').each(function(i) {
var youtubeIframeId = $(this).attr('id');
if (!youtubeIframeId) {
youtubeIframeId = $(this).attr('src').split('?')[0].split('/').pop();
$(this).attr('id', youtubeIframeId);
}
var $video = $("#" + youtubeIframeId),
videoData = $video.data(),
videoId = videoData.videoId;
/**
* Remove videoId property from data
*/
//delete videoData.videoId;
/* jshint camelcase:false */
if ($(this).attr('src').indexOf('enablejsapi=1') > 0) {
var player = new YT.Player(youtubeIframeId, {
videoId: youtubeIframeId, // YouTube Video ID
//videoId : $video.data("videoId"), // YouTube Video ID
// width : "100%", // Player width (in px)
// height : "auto", // Player height (in px)
playerVars: $.extend({
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
}),
// }, videoData),
events: {
// onReady: function(e) {
// e.target.mute();
// }
onStateChange: onPlayerStateChange
}
});
} else {
$(this).attr('src', $(this).attr('src') + '&enablejsapi=1').on('load', function() {
var player = new YT.Player(youtubeIframeId, {
videoId: youtubeIframeId, // YouTube Video ID
// videoId : $video.data("videoId"), // YouTube Video ID
// width : "100%", // Player width (in px)
// height : "auto", // Player height (in px)
playerVars: $.extend({
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
}),
// }, videoData),
events: {
// onReady : function(e)
// {
// var $video = $(e.target.a);
// if($video.data("mute")) e.target.mute();
// else e.target.unMute();
// },
onStateChange: onPlayerStateChange
}
});
});
}
});
/* jshint camelcase:true */
}
이다 내가 헤더 비디오가 울리고 싶은 스크롤 아래로 비디오가 음소거 때 여전히 재생하고 다시 스크롤 할 때 헤더에
/**
* FUNCTION STICKY YOUTUBE VIDEO ON SCROLL
*/
var $window = $(window),
$stickyVideoContainer = $("#stickyvideo_container"),
$btnHideStickyVideo = $("#hide_sticky_video"),
$stickyVideo = $("#sticky_video"),
$headerStickyVideo = $("#header_sticky_video");
function onPlayerStateChange(event) {
var isPlay = 1 === event.data,
isPause = 2 === event.data,
isEnd = 0 === event.data;
if (isPlay) {
$stickyVideo.removeClass("is-paused");
$stickyVideo.toggleClass("is-playing");
}
if (isPause) {
$stickyVideo.removeClass("is-playing");
$stickyVideo.toggleClass("is-paused");
}
if (isEnd) {
$stickyVideo.removeClass("is-playing", "is-paused");
}
}
function scrollVideoSticky($window, $stickyVideoContainer, $stickyVideo) {
// var done = false;
if ($stickyVideoContainer.length) {
var containerTop = $stickyVideoContainer.offset().top,
containerOffset = Math.floor(containerTop + ($stickyVideoContainer.outerHeight()/2));
}
$window.on("resize", function() {
if ($stickyVideoContainer.length) {
containerTop = $stickyVideoContainer.offset().top,
containerOffset = Math.floor(containerTop + ($stickyVideoContainer.outerHeight()/2));
}
}).on("scroll", function() {
if ($stickyVideo.hasClass('is-hide') && $btnHideStickyVideo.hasClass('is-hide') && $headerStickyVideo.hasClass('is-hide')) {
if ($window.scrollTop() < containerOffset) {
$btnHideStickyVideo.hide();
} else {
$btnHideStickyVideo.show();
}
} else {
$stickyVideo.toggleClass("is-sticky", //&& $stickyVideo.hasClass("is-playing")
$window.scrollTop() > containerOffset
).removeClass('is-show');
$btnHideStickyVideo.toggleClass("is-sticky",
$window.scrollTop() > containerOffset
).removeClass('is-show');
$headerStickyVideo.toggleClass("is-sticky",
$window.scrollTop() > containerOffset
).removeClass('is-show');
}
});
}
스크롤 내 끈적 비디오 , 비디오가 다시 들렸다.
는 이미 코드에서 onYouTubeIframeAPIReady에서
events: {
onReady: function(e) {
e.target.mute();
}
(), 비디오가 모두 음소거를 넣어 내가 scrollVideoSticky() 함수에 그 코드를 삽입 할 때, 끈적 끈적한 사라 졌어요. 그 코드는 어디에 두어야합니까?
아이디어를 공유하거나 도움을 주시면 감사하겠습니다. 감사!
비디오가 끈적 할 때 어디에서 코드 이벤트 player.mute()를 사용하여 비디오를 음소거해야합니까? –
스크롤 기능 안에서 나는 비디오를 끈적 거리게 할 클래스 is-sticky를 추가 할 것입니다. 그래서 그 후에 현재 플레이어에게 음소거 기능을 추가 할 수 있습니다. –