javascript - 在页面加载时缓慢降低 YouTube 视频音量

Question

我正在使用此模板为我的项目制作全屏背景视频。我需要声音在 10 秒内从 100% 慢慢降低到 0%。

我将如何实现这一目标？

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();
    // 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);
});

Answer 2

你可以试试这段代码：

$(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);
    }
});

注意：我无法测试上面的代码，但我相信它会为你工作。