angular 2 在背景上播放静音 youtube 视频答案

【问题标题】：angular 2 play muted youtube video on backgroundangular 2 在背景上播放静音 youtube 视频
【发布时间】：2017-09-15 18:08:24
【问题描述】：

如何在静音背景下播放 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 的播放器 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>

【问题讨论】：

标签： angular video youtube youtube-api

【解决方案1】：

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

【讨论】：

欢迎来到 SO！不鼓励仅使用代码的答案，因为它们无法深入了解问题是如何解决的。请编辑您的解决方案，以说明您的代码如何解决手头的问题:)

【解决方案2】：

在How to Embed a YouTube Video with Sound Muted 中关注 Amit Agarwal 的教程：

<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 了解更多示例。

【讨论】：