Медленно уменьшайте громкость видео YouTube при загрузке страницы

Question

Я использую этот шаблон для создания полноэкранного фонового видео для моего проекта. Мне нужно, чтобы звук медленно уменьшался со 100% до 0% в течение 10 секунд.

Как бы я этого достиг?

пример Bootsnipp

HTML

    <!-- Warming Up -->
<link href='http://fonts.googleapis.com/css?family=Buenard:700' rel='stylesheet' type='text/css'>
<script src="http://pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>

<!--Video Section-->
<section class="content-section video-section">
  <div class="pattern-overlay">
  <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=fdJc1_IBKJA',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
        <h1>Full Width Video</h1>  
        <h3>Enjoy Adding Full Screen Videos to your Page Sections</h3>
       </div>
      </div>
    </div>
  </div>
</section>
<!--Video Section Ends Here-->

Answer 1

Вы можете попробовать этот код:

$(document).ready(function () {

    $(".player").mb_YTPlayer(); //init the player

    var startingVolume = 100;
    var decreasingFactor = 10;

    var currentVloume = startingVolume;

    $(".player").YTPSetVolume(currentVloume); //setting the volume 100% initially

    var timeFrame = 10000; //10 sec
    var step = 1000; //1 sec
    var myInterval = null;

    //reduce the volume step by step per second
    myInterval = setInterval(function(){
        currentVloume = currentVloume - decreasingFactor;
        decreaseVolume(currentVloume);
    },step);

    //after 10 sec set the volume to 0 if its not yet set
    setTimeout(function(){
        clearInterval(myInterval);
        $(".player").YTPSetVolume(0);
    },timeFrame);

    function decreaseVolume(newVolume){
        if(newVolume < 0){
            clearInterval(myInterval);
            $(".player").YTPSetVolume(0);
        }
        else
            $(".player").YTPSetVolume(newVolume);
    }
});

Примечание: я не смог протестировать приведенный выше код, но я верю, что он будет работать для вас.

Answer 2

Фрагмент вашей ссылки не работает для меня. В любом случае, попробуйте это и посмотрите, поможет ли это.

$(document).ready(function () {

    $(".player").mb_YTPlayer();
    // set the volume to 100
    document.getElementById("player").YTPSetVolume(100);
    var timerId = 0;
    var sec = 0;
    // run an interval every second
    timerId = setInterval(function(){
        if(sec <= 10) {
            // get the player's current volume
            var vol = document.getElementById("player").mb_YTPlayer.getVolume();
            // set the player's volume reducing it by 10
            document.getElementById("player").YTPSetVolume(vol - 10);
            if(sec == 10) {
                // End the interval
                clearInterval(timerId);
            }
            sec++;
        }
    }, 1000);
});