Youtube iframe api自动播放不适用于Chrome和视频分辨率设置不适用于所有浏览器

时间:2018-05-24 11:16:57

标签: youtube-api youtube-javascript-api youtube-iframe-api



<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;
                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('youtube-vid', { 
                    videoId: 'M7lc1UVf-VE',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                    });
                }
                function onPlayerReady(event) {
                   event.target.playVideo(); 
                    event.target.setPlaybackQuality('hd1080'); 
                }
                function onPlayerStateChange(e) {
                    if (e.data === YT.PlayerState.ENDED) {
                        player.playVideo(); 
                      }
                      
                }
</script>
&#13;
&#13;
&#13;

  

请帮我设置youtube质量hd1080并在页面上自动播放   加载我使用上面的代码,但它不适合我

提前致谢!

2 个答案:

答案 0 :(得分:2)

Chrome自动播放政策于2018年4月发生变化 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Google Chrome不允许自动播放视频。如果您想自动播放,则必须将视频静音。根据政策指南。

FireFox浏览器 enter image description here 谷歌浏览器 enter image description here

&#13;
&#13;
// 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);

//    This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady
        }
    });
}

//  The API will call this function when the video player is ready.
function onPlayerReady(event) {
    player.setPlaybackRate(2);
    event.target.playVideo();
}
&#13;
<div id="player"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

必须这样才能开始使用Chrome:

function onPlayerReady(event) { 
  player.mute(); // have to in order to allow auto start in chrome! 
  player.seekTo(20, true); 
}