잡히지 않은 TypeError : 정의되지 않은 'stopVideo'속성을 읽을 수 없습니다.

다음은 YouTube API 플레이어 용 코드입니다. playVideo, stopVideo 등의 함수를 정의했지만 정의되지 않은 함수에 오류가 발생합니다.잡히지 않은 TypeError : 정의되지 않은 'stopVideo'속성을 읽을 수 없습니다.

많은 연구 끝에 아직도이 오류를 파악할 수 없습니다.

index.html을 당신이 기대하는 것처럼 분명히, 당신의 player 변수가 YT 객체에 설정되어 있지

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Videos</title> 
<script src="jquery-3.1.1.js"></script> 
<script src="script.js"></script> 


</head> 
<body> 
<div id="player"> 
    <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sGPrx9bjgC8" frameborder="0" allowfullscreen></iframe> 
    <br/> 
    <a href="javascript:void(0);" onclick = "playVid()">Play</a>|| 
    <a href="javascript:void(0);" onclick = "stopVid()">Stop</a>|| 
    <a href="javascript:void(0);" onclick = "muteVid()">Mute</a>|| 

    </div> 
</body> 
</html> 

**script.js** 

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
tag.scr = "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflioRwVn/www-widgetapi.js"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 

window.onYouTubeIframeReady = function(){ 
    player = new YT.Player('player', { 
     videoId: 'sGPrx9bjgC8', 
     events: { 
      'onReady' : onPlayerReady, 
     } 
    }); 
} 

function onPlayerReady(event){ 
    event.target.playVideo(); 
} 

function playVid(){ 
    player.playVideo(); 
} 

function stopVid(){ 
    player.stopVideo(); 
} 

function muteVid(){ 
    player.mute(); 
}

Here is my erorrs

출처

2017-02-06 honey

당신이 함수에서 onYouTubeIframeAPIReady으로 시도 할 수() {window.onYouTubeIframeReady = 함수() { – Deep

대신에 내가 너무 노력했다. 하지만 여전히 작동하지 않습니다 – honey

이 one.It을 시도 나를 위해 일했다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Videos</title> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script> 

<script type="text/javascript"> 
var tag = document.createElement('script'); 
tag.src = "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflioRwVn/www-widgetapi.js"; 
tag.setAttribute('onload','onYouTubeIframeReady()'); 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 

window.onYouTubeIframeReady = function(){ 
    player = new YT.Player('player', { 
     videoId: 'sGPrx9bjgC8', 
     events: { 
      'onReady' : onPlayerReady, 
     } 
    }); 
} 

function onPlayerReady(event){ 
    event.target.playVideo(); 
} 

function playVid(){ 
    player.playVideo(); 
} 

function stopVid(){ 
    player.stopVideo(); 
} 

function muteVid(){ 
    player.mute(); 
} 
</script> 

</head> 
<body> 
    <div id="player"> 
    <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sGPrx9bjgC8" frameborder="0" allowfullscreen></iframe> 
    <br/> 
    </div> 
    <div> 
    <a href="javascript:void(0);" onclick = "playVid()">Play</a>|| 
    <a href="javascript:void(0);" onclick = "stopVid()">Stop</a>|| 
    <a href="javascript:void(0);" onclick = "muteVid()">Mute</a>|| 
    </div> 
</body> 
</html>

출처

2017-02-06 08:04:32 SatyaDash

알았을 때 대답을 정확하다고 표시하십시오. 미리 감사드립니다. – SatyaDash

onYouTubeIframeReady 콜백이 발생하기 전에 PlayVid() 함수를 호출 할 수 있습니다.
코드의 또 다른 문제는 페이지에서 둘 이상의 요소에 동일한 id="player" 이름을 사용하고 있다는 것입니다. div의 ID를 다른 이름으로 바꿉니다. 예를 들어

<div id="player-wrapper"> 
    <iframe id="player" width="560" height="315" src="..."

출처

2017-02-06 07:20:13 Uzbekjon

나는 모든 방법을 시도했습니다. 그러나 나는 아직도이 오류를 알아낼 수 없다. – honey

코드로 피들을 만들 수 있습니까? – Uzbekjon

잡히지 않은 TypeError : 정의되지 않은 'stopVideo'속성을 읽을 수 없습니다.

답변

관련 문제