YouTube视频向下滚动或粘性并仍在播放时静音

Question

当在不显示或粘贴滚动时，在标题上响起和静音时如何创建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');
    }
  });
}

我想要在标题上听起来的视频，当滚动视频静音并且仍在播放时，当向后滚动到标头时，视频响起。

。

我已经放了代码

events: {
           onReady: function(e) {
             e.target.mute();
           }

在Onyoutubeiframeapiready（）中，视频都被静音了，当我将该代码放入功能scrollvideosticky（）中时，粘性就消失了。我应该在哪里放那个代码？

请帮助或分享您的想法将非常感激。谢谢！

Answer 1

我想出了一个脚本来处理YT视频和视频标签视频中的n个视频。变得粘稠。您可以在此处引用我的代码笔

参考：https://codepen.io/aravi-pen/pen/VMaRvX

这是JS

var ytIframeList, videoList, currentPlayer, closeButton, gradientOverlay, fullScreenIcon;
var inViewPortBol = true;
var ytIframeIdList = [];
var ytVideoId = [];
var ytPlayerId = [];
var videoTagId = [];
var events = new Array("ended", "pause", "playing");

document.addEventListener('DOMContentLoaded', function () {

    /*Adding Youtube Iframe API to body*/

    var youTubeVideoTag = document.createElement('script');
    youTubeVideoTag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    document.body.appendChild(youTubeVideoTag, firstScriptTag);

    /*Getting all the iframe from the Page and finding out valid URL and ID. Then creating instance of players*/

    ytIframeList = document.getElementsByTagName("iframe");
    for (i = 0; i < ytIframeList.length; i++) {
        if (new RegExp("\b" + "enablejsapi" + "\b").test(ytIframeList[i].src)) {
            var url = ytIframeList[i].src.replace(/(>|<)/gi, '').split(/(vi/|v=|/v/|youtu.be/|/embed/)/);
            if (url[2] !== undefined) {
                ID = url[2].split(/[^0-9a-z_-]/i);
                ID = ID[0];
                ytIframeIdList.push(ID);
                ytIframeList[i].id = "featured-video" + i;
                ytVideoId.push("ytVideoId" + i);
                ytVideoId[i] = document.getElementById(ytIframeList[i].id);
                ytPlayerId.push("player" + i);
            }
        }
    }

    /*Getting Video Tag List and Creating instances*/

    videoList = document.getElementsByTagName("video");
    for (i = 0; i < videoList.length; i++) {
        videoList[i].id = "video-featured" + i;
        videoTagId.push("videoPlayerId" + i);
        videoTagId[i] = document.getElementById(videoList[i].id);

    }
    for (i = 0; i < videoTagId.length; i++) {
        for (var j in events) {
            videoTagId[i].addEventListener(events[j], videoTagPlayerhandler, false);
        }
    }

    closeButton = document.querySelector("a.close-button");
    gradientOverlay = document.querySelector(".gradient-overlay");
    fullScreenIcon = document.querySelector("i.fa.fa-arrows-alt");
    fullScreenPlay();

});

window.onYouTubeIframeAPIReady = function () {
    for (i = 0; i < ytIframeIdList.length; i++) {
        ytPlayerId[i] = new YT.Player(ytIframeList[i].id, {
            events: {
                "onStateChange": onPlayerStateChange
            }
        });
    }
};

function videoTagPlayerhandler(e) {
    /*Play Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (e.target == videoTagId[i]) {
            if (e.type == "playing") {
                currentPlayer = videoTagId[i];
                videoTagId[i].classList.remove("is-paused");
                videoTagId[i].classList.add("is-playing");
                break;
            }
        }
    }
    for (i = 0; i < videoTagId.length; i++) {
        if (currentPlayer == videoTagId[i]) {
            continue;
        }
        videoTagId[i].classList.remove("is-playing");
        videoTagId[i].classList.add("is-paused");
    }

    /*Pause Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (e.target == videoTagId[i]) {
            if (e.type == "pause") {
                videoTagId[i].classList.add("is-paused");
                videoTagId[i].classList.remove("is-playing");
                videoTagId[i].pause();
            }
        }
    }

    /*Sticky Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (videoTagId[i].classList.contains("is-sticky")) {
            videoTagId[i].pause();
            fullScreenIcon.style.display = "none";

        }
    }

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytVideoId[i].classList.contains("is-sticky")) {
            ytPlayerId[i].pauseVideo();
            fullScreenIcon.style.display = "none";

        }
    }

    /*End Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (e.target == videoTagId[i]) {
            if (e.type == "ended") {
                videoTagId[i].classList.remove("is-playing");
                videoTagId[i].classList.remove("is-paused");
            }
        }
    }
    videohandler();
};

function onPlayerStateChange(event) {

    /*Play Rules*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytPlayerId[i].getPlayerState() === 1) {
            currentPlayer = ytVideoId[i];
            ytVideoId[i].classList.remove("is-paused");
            ytVideoId[i].classList.add("is-playing");
            break;
        }
    }
    for (i = 0; i < ytVideoId.length; i++) {
        if (currentPlayer == ytVideoId[i]) {
            continue;
        }
        ytVideoId[i].classList.remove("is-playing");
        ytVideoId[i].classList.add("is-paused");
    }

    /*Pause Rules*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytPlayerId[i].getPlayerState() === 2) {
            ytVideoId[i].classList.add("is-paused");
            ytVideoId[i].classList.remove("is-playing");
            ytPlayerId[i].pauseVideo();
        }
    }


    /*Sticky Rules*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytVideoId[i].classList.contains("is-sticky")) {
            ytPlayerId[i].pauseVideo();
            fullScreenIcon.style.display = "none";

        }
    }

    for (i = 0; i < videoTagId.length; i++) {
        if (videoTagId[i].classList.contains("is-sticky")) {
            videoTagId[i].pause();
            fullScreenIcon.style.display = "none";

        }
    }

    /*End Rule*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytPlayerId[i].getPlayerState() === 0) {
            ytVideoId[i].classList.remove("is-playing");
            ytVideoId[i].classList.remove("is-paused");
        }
    }
    videohandler();
}

function videohandler() {

    if (currentPlayer) {
        if (closeButton) {
            closeButton.addEventListener("click", function (e) {
                if (currentPlayer.classList.contains("is-sticky")) {
                    currentPlayer.classList.remove("is-sticky");
                    closeFloatVideo();
                    for (i = 0; i < ytVideoId.length; i++) {
                        if (currentPlayer == ytVideoId[i]) {
                            ytPlayerId[i].pauseVideo();
                        }
                    }
                    for (i = 0; i < videoTagId.length; i++) {
                        if (currentPlayer == videoTagId[i]) {
                            videoTagId[i].pause();
                        }
                    }

                } else {
                    for (i = 0; i < ytVideoId.length; i++) {
                        if (currentPlayer != ytVideoId[i]) {
                            ytVideoId[i].classList.remove("is-sticky");
                            closeFloatVideo();
                        }
                    }
                    for (i = 0; i < videoTagId.length; i++) {
                        if (currentPlayer != videoTagId[i]) {
                            videoTagId[i].classList.remove("is-sticky");
                            closeFloatVideo();
                        }
                    }
                }

            });
        }
    }
}

window.addEventListener('scroll', function () {

    inViewPortBol = inViewPort();
    if (currentPlayer) {
        if (!inViewPortBol && currentPlayer.classList.contains("is-playing")) {
            for (i = 0; i < ytVideoId.length; i++) {
                if (currentPlayer != ytVideoId[i]) {
                    ytVideoId[i].classList.remove("is-sticky");
                }
            }
            for (i = 0; i < videoTagId.length; i++) {
                if (currentPlayer != videoTagId[i]) {
                    videoTagId[i].classList.remove("is-sticky");
                }
            }
            currentPlayer.classList.add("is-sticky");
            openFloatVideo();
        } else {
            if (currentPlayer.classList.contains("is-sticky")) {
                currentPlayer.classList.remove("is-sticky");
                closeFloatVideo();
            }
        }
    }
});


function fullScreenPlay() {

    if (fullScreenIcon) {
        fullScreenIcon.addEventListener("click", function () {
            if (currentPlayer.requestFullscreen) {
                currentPlayer.requestFullscreen();
            } else if (currentPlayer.msRequestFullscreen) {
                currentPlayer.msRequestFullscreen();
            } else if (currentPlayer.mozRequestFullScreen) {
                currentPlayer.mozRequestFullScreen();
            } else if (currentPlayer.webkitRequestFullscreen) {
                currentPlayer.webkitRequestFullscreen();
            }
        });
    }
}

function inViewPort() {

    if (currentPlayer) {
        var videoParentLocal = currentPlayer.parentElement.getBoundingClientRect();
        return videoParentLocal.bottom > 0 &&
            videoParentLocal.right > 0 &&
            videoParentLocal.left < (window.innerWidth || document.documentElement.clientWidth) &&
            videoParentLocal.top < (window.innerHeight || document.documentElement.clientHeight);
    }
}

function openFloatVideo() {
    closeButton.style.display = "block";
    gradientOverlay.style.display = "block";
    fullScreenIcon.style.display = "block";
}

function closeFloatVideo() {
    closeButton.style.display = "none";
    gradientOverlay.style.display = "none";
    fullScreenIcon.style.display = "none";
}

检查Codepen中的CSS和HTML要求。谢谢！