YouTube 동영상 재생/일시 중지 버튼

Question

내 YouTube 동영상을 제어하는 ​​재생/일시 중지 전환 버튼이 있습니다.

<a id="play-button">Play/Pause</a> 

지금은 단지 링크 일뿐입니다. 이것은 onPlayerReady 함수의 자바 스크립트 코드입니다.

function onPlayerReady(event) { 

var playButton = document.getElementById("play-button"); 
    playButton.addEventListener("click", function(event) { 
    if (event.data==YT.PlayerState.PLAYING) { 
     player.pauseVideo();  
    }else { 
     player.playVideo(); 
    } 
    }); 

어떤 이유로 링크를 클릭 할 때마다 항상 else 명령이 수행됩니다. 동영상이 현재 재생 중임을 인식하도록하려면 어떻게해야합니까? 이 재생/일시 중지 전환 작업을 수행하는 더 좋은 방법이 있습니까?

해결시 onPlayerReady

에 대한

function onPlayerStateChange(event) { 

if (event.data == YT.PlayerState.BUFFERING) { 
    event.target.setPlaybackQuality('hd1080'); 
} 

if (event.data == YT.PlayerState.PAUSED) { 
    $("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg"); 
    this.is_playing = false; 
} 

if (event.data == YT.PlayerState.PLAYING) { 
    $("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg"); 
    this.is_playing = true; 
    } 


    } 

전체 코드

<div id="centerplayer"> 
<div id="player"></div> 
<script> 
    var is_playing = false; 
    var fullscreen = false; 
    var live = true; 

    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 onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '600', 
     width: '1067', 
    playerVars:{ 
      autoplay: 1, 
      controls: 0, 
      rel: 0, 
      iv_load_policy: 3, 
      showinfo: 0 
     }, 

    loadPlaylist:{ 
     listType:'playlist' 
    }, 

     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange, 
     'onError': onErrorDetect 
     } 
    }); 
    } 

    function onErrorDetect(event){ 
    if (event.data == 100) { 
    //video request was not found, error occurs when video has been removed or has been marked as private 
    event.target.nextVideo(); 
    } else{ 
    location.reload(); 
    } 

} 

    function onPlayerReady(event) { 
    event.target.setPlaybackQuality('default'); 
    event.target.loadPlaylist(gon.playlist,gon.s_index,gon.s_time); 
    event.target.setLoop(true); 

    //PLAYER CONTROLS 
     var playButton = document.getElementById("play-button"); 
     var that = this; 
     playButton.addEventListener("click", function(click_event) { 
     if (that.is_playing) { 
      $("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg"); 

     // if(live){ 
     // var liveimg = document.getElementById('live-icon'); 
     // liveimg.parentNode.removeChild(liveimg); 
     // live = false; 
     // } 

      player.pauseVideo();  
     }else { 
      $("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg"); 
      player.playVideo(); 
     } 
     }); 

     var muteButton = document.getElementById("mute-button"); 
     muteButton.addEventListener("click", function() { 
     if(player.isMuted()){ 
      $("#mute-button").attr("src", "http://www.beached.tv/assets/sound-2850c52028b16dd2c2e264c5dddb39ba.svg"); 
      player.unMute(); 
     }else{ 
      $("#mute-button").attr("src", "http://www.beached.tv/assets/mute-8d50674fdbcdd2cc9597f009be41cea9.svg"); 
      player.mute(); 
     } 
     }); 

     var enlargeButton = document.getElementById("enlarge-button"); 
     enlargeButton.addEventListener("click", function() { 
     if (fullscreen){ 
      $("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-enlarge-a44a4204dca596b45aacb25610ee3189.svg"); 
      player.setSize(1067,600); 
      fullscreen = false;   
     }else{ 
      $("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-shrink-f63cf0e6ab1eb2bb8f7223798c4fc9c5.svg"); 
      player.setSize(1410,793); 
      fullscreen = true; 
     } 
     }); 

    } 

    function onPlayerStateChange(event) { 

    if (event.data == YT.PlayerState.BUFFERING) { 
     event.target.setPlaybackQuality('hd1080'); 
    } 

    if (event.data == YT.PlayerState.PAUSED) { 
     $("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg"); 
     this.is_playing = false; 

     if(live){ 
     var liveimg = document.getElementById('live-icon'); 
     liveimg.parentNode.removeChild(liveimg); 
     live = false; 
     } 
    } 

    if (event.data == YT.PlayerState.PLAYING) { 
     $("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg"); 
     this.is_playing = true; 

     var current_time = Math.round(new Date().getTime()/1000); 
     if (current_time > gon.end_of_stream){ 
     // location.reload(); 
     } 
    } 


    } 

</script> 

Answer 1

당신하여 addEventListener에 전달하는 기능도 사용하고 있기 때문에 onPlayerReady 매개 변수 이벤트는 접근 할 수없는 그 변수 이름

다른 변수 이름을 사용하십시오 (예 :

).

playButton.addEventListener (함수 (click_event) {

더 큰 오류가 실제로있다 "클릭". onPlayerStateChange의 이벤트를 사용하여 상태를 알려주고 싶습니다.

var is_playing = false; 

function onPlayerReady(event) { 
    var playButton = document.getElementById("play-button"); 
    var that = this; 
    playButton.addEventListener("click", function(click_event) { 
    if (that.is_playing) { 
     player.pauseVideo();  
    }else { 
     player.playVideo(); 
    } 
    }); 
} 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
    this.is_playing = true; 
    } 
} 

Answer 2

유튜브의 현재 HTML5 플레이어의 경우이 작업을 수행 할 수 있습니다 쉽게 사용 : 다음 작업 조각입니다

document.getElementByTagName('video')[0].play()

document.getElementByTagName('video')[0].play()

내가 크롬 확장 here를 만들었습니다.