1

유튜브 API의 onYoutubePlayerReady() &하여 addEventListener ("되고 onStateChange"...) 기능은 YouTube 동영상이 내 사이트에로드 될 때 실행되지 않는유튜브 API onYoutubePlayerReady 또는 addEventListener은

실행되지 않는 ->이 코드는 호스팅을 웹 서버에서 http://www.vapetropolis.ca/handheld-portable-vaporizers

-> 동영상로드시 알림이 표시됩니다 .YoutubePlayerReady 및 addEventListener ("onStateChange"...)를 통해 알림을 구현하려고 시도했지만 성공하지 못했습니다. 어떤 도움이 아주 많이 여기

을 감사

내가 지금까지 가지고 무엇 -이 모든 코드는 하나의로 .phtml 파일에 있습니다 :

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 

이 onYoutubePlayerReady 경고하는 중 ...

<script type="text/javascript"> 
     function onYouTubePlayerReady(playerId) { 
    alert("READY"); 
} 

    </script> 

여러 개의 비디오가 있습니다. div는 foreach 루프에서 만들어집니다. 이 코드의 대부분은 관련 동영상을로드, 제품의 배열을 자바 스크립트 배열

<script type="text/javascript"> 

jQuery(document).ready(function() { 
    window.productVideos = { 
     //Product Name : Youtube Video Id 
    }; 

    productVideos["Volcano Vaporizer - Classic or Digital"] = "ukHcyEMxBEE"; 
    productVideos["Iolite Original Vaporizer"] = "WaVSuJ0DH7c"; 
    productVideos["Iolite Wispr Vaporizer"] = "OTCN-bl10f0"; 


    var productNames = new Array(
     <?php $count = 0; foreach($_productCollection as $_product) { 
      if ($count > 0) echo ','; 
      echo '"' . $_product->getName() . '"'; 
      $count++; 
     }?> 
    ); 

순회에 제품/동영상 ID를 추가 가독성

<div id="videoDiv-<?php echo $_product->getName();?>"></div> 

제거됩니다

var iterator; 
    for (iterator = 0; iterator < <?php echo $_productCollection->count(); ?>; iterator++) { 
     if (productVideos[productNames[iterator]]) { 
      loadPlayer(productNames[iterator], productVideos[productNames[iterator]]); 
     } 
    } 


}); 
(이 잘 작동)

동영상에 이벤트 수신기를 연결하려고합니다. 작동하지 않습니다.

비디오를로드 할

다양한 관련이없는 기능

<script type="text/javascript">   
        /** 
* Resizing the player in JavaScript. 
*/ 

function alert() { 
    alert("HI"); 
} 


// Make the player small. 
function smallPlayer() { 
    resizePlayer(480, 295); 
} 

// Set the player back to normal. 
function normalPlayer() { 
    resizePlayer(560, 340); 
} 

// Make the player big. 
function largePlayer() { 
    resizePlayer(640, 385); 
} 

function onPlayerStateChange() { 
     resizePlayer(560, 340); 
} 

// Set the loaded player to a specific height and width. 
function resizePlayer(width, height, videoID) { 
    var playerObj = document.getElementById("ytPlayer-" + videoID); 
    jQuery("#yt-player-" + videoID).parents('li').height('600px'); 
    playerObj.height = height; 
    playerObj.width = width; 
} 

기능 -

// The "main method" of this sample. Called when someone clicks "Run". 
function loadPlayer(productName, videoID) { 

    //jQuery("videoDiv-" + productName).parents('li').height('600px'); 
    // The video to load 
    //var videoID = "ylLzyHk54Z0"; 
    // Lets Flash from another domain call JavaScript 
    var params = { allowScriptAccess: "always"}; 
    // The element id of the Flash embed 
    var atts = { id: "ytPlayer-" + videoID, class: "ytplayer"}; 
    // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) 
    swfobject.embedSWF("http://www.youtube.com/v/" + videoID + 
        "?version=3&enablejsapi=1&playerapiid=player1", 
        "videoDiv-" + productName, "140", "85", "9", null, null, params, atts); 
} 
</script> 

답변

1

위라고는 각 플레이어 playerapiid 독특한 지정해야합니다. 그 쉽게 그것을 만들 있기 때문에, 몇몇 선수를 관리하는 코드를 작성하기 전에 정말 중요한이 API로 작업하고, 하나의 플레이어로 시작

function loadPlayer(blockID, videoID) { 
    swfobject.embedSWF(
     'http://www.youtube.com/v/'+videoID+'?autostart=0&enablejsapi=1&playerapiid='+blockID, 
     blockID, '320', '200', '8', null, null, 
     { allowScriptAccess: 'always', wmode: 'transparent' }, 
     { id: blockID, name: blockID } 
    ); 
} 

: 나는 두 개의 인수를 허용하도록 loadPlayer 기능을 조금 단순화하도록 제안 작업.

이 기능을 사용하는 JSFiddle 작업 : http://jsfiddle.net/rbRF3/

관련 문제