代码之家  ›  专栏  ›  技术社区  ›  user2596635

静音YouTube视频和自动播放

  •  0
  • user2596635  · 技术社区  · 6 年前

    我已经做了一些工作,我正在尝试让页面上的YouTube视频自动启动并在页面加载时静音,这是我的HTML:

    <div class="col-sm-8 product-video-section" id="player">
        <iframe id="ytplayer" width="560" height="315" src="https://www.youtube.com/embed/tMnpYFl6-k8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen wmode="Opaque"></iframe>
    </div>
    

    JS:(我在谷歌上找到的)

    <script>
            // 2. This code loads the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
    
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
            // 3. This function creates an <iframe> (and YouTube player)
            //    after the API code downloads.
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '195',
                    width: '260',
                    videoId: 'h3P1OR9gg2Y',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }
    
            // 4. The API will call this function when the video player is ready.
            function onPlayerReady(event) {
                event.target.setVolume(0);
                event.target.playVideo();
            }
    
            // 5. The API calls this function when the player's state changes.
            //    The function indicates that when playing a video (state=1),
            //    the player should play for six seconds and then stop.
            var done = false;
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    //      setTimeout(stopVideo, 6000);
                    done = true;
                }
                event.target.setVolume(0);
            }
        </script>
    

    这几乎是我想要的方式,问题是它正在设置videoID并在JS中构建iframe-我不想这样,我有多个页面,使用这个模板有不同的视频,所以我需要在内容中具有iframe的能力。有没有一种不用设置id的方法?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Laura    6 年前

    可以放置属性 data-videoId 在html代码中,并能够对您想要的每个页面使用脚本,如本示例中所示: https://jsfiddle.net/h939dyxr/

    使现代化

    我添加了以下功能:

     function youtube_parser(url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var match = url.match(regExp);
        return (match && match[7].length == 11) ? match[7] : false;
     }
    

    从这个 post 直接从 iframe url,如示例所示: https://jsfiddle.net/h939dyxr/2/