1
表示されていない場合やスティッキーがスクロールしていない場合に、スクロールダウンまたはスティッキーで再生しても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クラスを追加します。その後、現在のプレイヤーにミュート機能を追加することができます。 –