如何在youtube中設置javascript背景的視頻播放默認聲音值？

Question

這是來自|* http://www.seanmccambridge.com/tubular教程的背景視頻播放的JavaScript。

我有一些默認選項，我可以禁用或啓用視頻控制器但我不能設置默認值，當用戶打開我的網站時應該值。

;(function ($, window) { 

    // test for feature support and return if failure 

    // defaults 
    var defaults = { 
     ratio: 3/3, // usually either 4/3 or 16/9 -- tweak as needed 
     videoId: '', // toy robot in space is a good default, no? 
     mute: false, 
     repeat: true, 
     width: $(window).width(), 
     wrapperZIndex: 99, 
     playButtonClass: 'tubular-play', 
     pauseButtonClass: 'tubular-pause', 
     muteButtonClass: 'tubular-mute', 
     volumeUpClass: 'tubular-volume-up', 
     volumeDownClass: 'tubular-volume-down', 
     increaseVolumeBy: 10, 
     start: 0, 
     Volume:10 
    }; 

    // methods 

    var tubular = function(node, options) { // should be called on the wrapper div 
     var options = $.extend({}, defaults, options), 
      $body = $('body') // cache body node 
      $node = $(node); // cache wrapper node 

     // build container 
     var tubularContainer = '<div id="tubular-container" style=" position: fixed; z-index: 1; width: 90%; height: 90%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width:90%; height: 90%; z-index: 2; position: absolute; left: 0; top: 0;"></div>'; 

     // set up CSS prereq's, inject tubular container and set up wrapper defaults 
     $('html,body').css({'width': '90%', 'height': '90%'}); 
     $body.prepend(tubularContainer); 
     $node.css({position: 'relative', 'z-index': options.wrapperZIndex}); 

     // set up iframe player, use global scope so YT api can talk 
     window.player; 
     window.onYouTubeIframeAPIReady = function() { 
      player = new YT.Player('tubular-player', { 
       width: options.width, 
       height: Math.ceil(options.width/options.ratio), 
       videoId: options.videoId, 
       playerVars: { 
        controls: 0, 
        showinfo: 0, 
        modestbranding: 1, 
        wmode: 'transparent' 
       }, 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     window.onPlayerReady = function(e) { 
      resize(); 
      if (options.mute) e.target.mute(); 
      e.target.seekTo(options.start); 
      e.target.playVideo(); 
     } 

     window.onPlayerStateChange = function(state) { 
      if (state.data === 0 && options.repeat) { // video ended and repeat option is set true 
       player.seekTo(options.start); // restart 
      } 
     } 

     // resize handler updates width, height and offset of player after resize/init 
     var resize = function() { 
      var width = $(window).width(), 
       pWidth, // player width, to be defined 
       height = $(window).height(), 
       pHeight, // player height, tbd 
       $tubularPlayer = $('#tubular-player'); 

      // when screen aspect ratio differs from video, video must center and underlay one dimension 

      if (width/options.ratio < height) { // if new video height < window height (gap underneath) 
       pWidth = Math.ceil(height * options.ratio); // get new player width 
       $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth)/2, top: 0}); // player width is greater, offset left; reset top 
      } else { // new video width < window width (gap to right) 
       pHeight = Math.ceil(width/options.ratio); // get new player height 
       $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight)/2}); // player height is greater, offset top; reset left 
      } 

     } 

     // events 
     $(window).on('resize.tubular', function() { 
      resize(); 
     }) 

     $('body').on('click','.' + options.playButtonClass, function(e) { // play button 
      e.preventDefault(); 
      player.playVideo(); 
     }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button 
      e.preventDefault(); 
      player.pauseVideo(); 
     }).on('click', '.' + options.muteButtonClass, function(e) { // mute button 
      e.preventDefault(); 
      (player.isMuted()) ? player.unMute() : player.mute(); 
     }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button 
      e.preventDefault(); 
      var currentVolume = player.getVolume(); 
      if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy; 
      player.setVolume(currentVolume - options.increaseVolumeBy); 
     }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button 
      e.preventDefault(); 
      if (player.isMuted()) player.unMute(); // if mute is on, unmute 
      var currentVolume = player.getVolume(); 
      if (currentVolume > 10 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy; 
      player.setVolume(currentVolume + options.increaseVolumeBy); 
     }) 
    } 

    // load yt iframe js api 

    var tag = document.createElement('script'); 
    tag.src = "//www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // create plugin 

    $.fn.tubular = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'tubular_instantiated')) { // let's only run one 
       $.data(this, 'tubular_instantiated', 
       tubular(this, options)); 
      } 
     }); 
    } 

})(jQuery, window); 

Answer 1

我使用YouTube API，我還沒有找到新的設置內YT.Player體積的一種方式，但你可以設置音量，一旦播放器準備就緒。

window.onPlayerReady = function(e) { 
    e.target.setVolume(50); // 0 - 100 
    e.target.playVideo(); 
}