强制所有youtube视频播放720 hd in html

时间:2016-08-16 09:51:16

标签: javascript html youtube

任何人都可以帮我修复此代码以强制YouTube播放720 hd的视频?   我尝试了4天,但问题仍未解决。   我需要在一个页面中播放2个或更多视频,下面是代码,视频显示"假" 720高清,不是真正的720质量,你需要手动调整质量,播放器发生了什么?这是youtube播放器bug的错误吗?

<a class="wp-colorbox-inline" href="#player"><img src="http://www.planwallpaper.com/static/cache/51/5e/515ea22c3b785229fb2afd0fd6ef8c92.jpg" onclick="image_01()" />
</a>

<a class="wp-colorbox-inline" href="#player"><img src="http://www.planwallpaper.com/static/cache/b8/14/b81459a5dad107be1518b3238d262ce3.jpg" onclick="image_02()" />
</a>

<div style='display:none'>
    <div id='player' sytle='padding:10px; background:#fff;'>
        <p>
            <script>
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScripttag = document.getElementsByTagName('script')[0];
                firstScripttag.parentNode.insertBefore(tag, firstScripttag);
                var player;
                var isrunning_01 = false;
                var isrunning_02 = false;

                function image_01() {
                    isrunning_01 = true;
                }

                function image_02() {
                    isrunning_02 = true;
                }

                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {
                        height: '768',
                        width: '1024',
                        videoId: '7YZBNzYwOME',
                        events: {
                            'onReady': onPlayerReady,
                            'onPlaybackQualityChange': onPlayerPlaybackQualityChange
                        }
                    });
                }

                function onPlayerReady(event) {
                    player.setPlaybackQuality('hd720');
                    if (isrunning_01 == true) {
                        event.target.cueVideoById({
                            videoId: 'xhXo7zIKJIc',
                            suggestedQuality: 'hd720'
                        });
                        event.target.playVideo();
                        isrunning_01 = false;
                    }
                    if (isrunning_02 == true) {
                        event.target.cueVideoById({
                            videoId: 'brNH_Z_QLx4',
                            suggestedQuality: 'hd720'
                        });
                        event.target.playVideo();
                        isrunning_02 = false;
                    }
                }

                function onPlayerPlaybackQualityChange(event) {
                    player.setPlaybackQuality('hd720');
                }

                function onPlayerStateChange(event) {
                    player.setPlaybackQuality('hd720');
                }
            </script>
        </p>
    </div>
</div>

我现在真的不知道该怎么做。

这是屏幕截图的高清示例:

enter image description here

1 个答案:

答案 0 :(得分:0)

这段代码完成了我的工作:

// 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: '400',
            width: '600',
            videoId: 'VIDEOID',
           // playerVars: { 'autoplay': 1 },
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    // In this case we set the playback quality to 1080p
    function onPlayerReady(event) {
        event.target.setPlaybackQuality('hd720');
    }

有一个例子: http://codepen.io/bra1N/pen/RRdWKk

相关问题