2017-02-06 4 views
1

У меня есть код для игрока API Youtube. Я определил функции, то есть playVideo, stopVideo и т. Д. Но это дает ошибку неопределенных функций.Uncaught TypeError: Не удается прочитать свойство «stopVideo» undefined

После многих исследований я все еще не могу понять эту ошибку.

index.html

<!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

+0

вы можете попробовать с функцией onYouTubeIframeAPIReady() {вместо window.onYouTubeIframeReady = функция() { – Deep

+0

Я пытался это тоже. Но все еще не работает – honey

ответ

2

Попробуйте 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> 
+0

Хорошо, тогда отметьте ответ как правильно. Спасибо заранее. – SatyaDash

0

Судя по всему, ваша player переменная не установлена ​​в YT объект, как вы ожидаете.

  1. Вы могли бы вызвать функцию PlayVid(), прежде чем произойдет onYouTubeIframeReady обратного вызова.
  2. Еще одна проблема в вашем коде - это то, что вы используете одно и то же имя id="player" для нескольких элементов на своей странице. Пожалуйста, переименуйте свой id div на что-то еще.

Например:

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

Я пробовал все пути. Но я до сих пор не могу понять эту ошибку. – honey

+0

Не могли бы вы создать скрипку с кодом? – Uzbekjon