角2在背景上播放静音的YouTube视频

Question

如何在背景上播放YouTube视频静音？视频应该在我的角度2应用中的组件模板上播放。如果我使用iframe例如

<div class="video-background"> 
<div class="video-foreground"> 
<iframe id="myVideo" src="https://www.youtube.com/embed/TjOXLJGH0P8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=TjOXLJGH0P8" frameborder="0" allowfullscreen> 
</div> 
</div> 

视频被显示，但它没有被静音。如果我使用yputube的播放器api，则不显示任何内容。

<script src="http://www.youtube.com/player_api"></script> 

<div id="player"></div> 

<script> 
    var player; 

    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      playerVars: { 
       'autoplay': 1, 
       'controls': 0, 
       'autohide': 1, 
       'wmode': 'opaque', 
       'showinfo': 0, 
       'loop': 1, 
       'mute': 1, 
       //'start': 15, 
       //'end': 110, 
       'playlist': 'NQKC24th90U' 
      }, 
      videoId: 'NQKC24th90U', 
      events: { 
       'onReady': onPlayerReady 
      } 
     }); 

    } 

    function onPlayerReady(event) { 
     event.target.mute(); 
     $('#text').fadeIn(400); 
     //why this? Well, if you want to overlay text on top of your video, you 
     //will have to fade it in once your video has loaded in order for this 
     //to work in Safari, or your will get an origin error. 
    } 

    //this pauses the video when it's out of view, just wrap your video in .m-//video 
    $(window).scroll(function() { 
     var hT = $('.m-video').height(), 
      wS = $(this).scrollTop(); 
     if (wS > hT) { 
      player.pauseVideo(); 
     } 
     else { 
      player.playVideo(); 
     } 
    }); 
</script> 

Answer 1

关注阿米特·阿加瓦尔的教程中How to Embed a YouTube Video with Sound Muted：

<script async src="https://www.youtube.com/iframe_api"></script> 
<script> 
function onYouTubeIframeAPIReady() { 
    var player; 
    player = new YT.Player('muteYouTubeVideoPlayer', { 
    videoId: 'YOUR_VIDEO_ID', // YouTube Video ID 
    width: 560,    // Player width (in px) 
    height: 316,    // Player height (in px) 
    playerVars: { 
     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 
    }, 
    events: { 
     onReady: function(e) { 
     e.target.mute(); 
     } 
    } 
    }); 
} 

比方说，你有一个名为myPlayer的对象，这SO thread样品中的iFrame API中初始化实例等之后，可以使用myPlayer.mute();。

您也可以参考此SO thread了解更多示例。