Question

如何播放背景静音的YouTube视频？视频应该在我的angular 2 appplication中的组件模板上播放。如果我使用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

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

Answer 2

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

here-place

假设您有一个名为myPlayer的对象，在iFrame API中初始化实例后，就像在此SO thread示例中一样，您可以使用<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(); } } }); }。

您还可以参考此SO thread了解更多样本。

角2播放静音youtube视频背景

2 个答案: