Angular 2播放背景上的YouTube视频

Question

如何在背景上播放YouTube视频？视频应在我的Angular 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的player 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

 <video [autoplay]="true" [muted]="true" [loop]="true" [controls]="false">
 <source src="../../../media/video/init.mp4" type="video/mp4">
 </video>

Answer 2

遵循阿米特·阿加瓦尔(Amit Agarwal(的教程，如何用声音嵌入youtube视频：

<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线程示例中的IFRAME API中初始化了一个实例后，您可以使用myPlayer.mute();。

您也可以参考此so so so so three for更多示例。