YouTuve IFrame API trouble with playerVars

问题

I want to start my video at certain times of the day. This is 'script.js':

    var player;
function createPlayer() {
    player=new YT.Player('main-block',{
        height:'400',
        width:'400',
        playerVars:{
            'rel':0,
            'controls':0,
            'showinfo':0,
            'disablekb':1,
            'modestbranding':1,
            'enablejsapi':1
        },
        videoId:'tgbNymZ7vqY',
        events:{
            'onReady':onPlayerReady
        }
    });
}
function onPlayerReady(event) {
        document.getElementById("timer").style.display='none';
        event.target.playVideo();
  }

function clockPlayer(){
        var now = new Date();
        if (now.getHours()==20 && now.getMinutes()==18){
            createPlayer();
        }else if(now.getHours()<20){
            var time_hours = 19 - now.getHours();
            var time_min = 59 - now.getMinutes();
            var time_sec = 59 - now.getSeconds();
            var hours=((time_hours<10) ? "0":"") + time_hours;
            var min=((time_min<10)? "0":"") + time_min;
            var sec=((time_sec<10)? "0":"") + time_sec
            var time = hours + ':' + min + ':' + sec;
            document.getElementById("timer").innerHTML=time;
        }
    }

        setInterval(clockPlayer, 1000);

When I try to call this function my browser ignores 'playerVars', I can't understand why.

This is index.html:

 <body>
        <script language="javascript" src="https://www.youtube.com/iframe_api"></script>
        <div id="timer"></div>
        <div id="main-block"></div>   
        <script language="javascript" src="script.js"></script>
    </body>

The clock function has random date now, I will change it later. When I try to use createPlayer() without clock function, I have the same result.

回答1:

You have a typo in your code. Change widht to width.

If the the problem is still present, please provide more info.

PS. Install a linter to avoid typos ;)

回答2:

Maybe the problem is in the else if section in of your code.

I changed like this and it works as expected:

if (now.getHours() == 1 && now.getMinutes() == 12) {
    createPlayer();
  } else {
    var time_hours = 19 - now.getHours();
    var time_min = 59 - now.getMinutes();
    var time_sec = 59 - now.getSeconds();
    var hours = ((time_hours < 10) ? "0" : "") + time_hours;
    var min = ((time_min < 10) ? "0" : "") + time_min;
    var sec = ((time_sec < 10) ? "0" : "") + time_sec
    var time = hours + ':' + min + ':' + sec;
    document.getElementById("timer").innerHTML = time;
  }

This is the working jsfiddle with the following modifications:

I changed the if condition for create the player once the time is 12:49 - for testing purposes.
Remove the else if and set the else only.

来源：https://stackoverflow.com/questions/53979619/youtuve-iframe-api-trouble-with-playervars

标签

javascript

youtube-iframe-api