javascript - 逐渐降低页面加载时的YouTube视频音量

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

我将如何实现？

bootsnipp example

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-->

最佳答案

您可以尝试以下代码:

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

注意:我无法测试上述代码，但我相信它将对您有用。

关于javascript - 逐渐降低页面加载时的YouTube视频音量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40415713/