在我的网站上加载 youtube 视频时,不会触发 Youtube API 的 onYoutubePlayerReady() 和 addEventListener("onstatechange"...) 函数
->此代码托管在位于http://www.vapetropolis.ca/handheld-portable-vaporizers的 Web 服务器上
- >当视频加载时应该弹出一个警报 - 我尝试通过 onYoutubePlayerReady 和 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>
有多个视频:在 foreach 循环中创建 div。为了便于阅读,删除了大部分代码
<div id="videoDiv-<?php echo $_product->getName();?>"></div>
将产品/视频 ID 添加到 javascript 数组
<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++;
}?>
);
遍历产品数组,加载相关视频(这工作正常)
var iterator;
for (iterator = 0; iterator < <?php echo $_productCollection->count(); ?>; iterator++) {
if (productVideos[productNames[iterator]]) {
loadPlayer(productNames[iterator], productVideos[productNames[iterator]]);
}
}
});
尝试将事件侦听器附加到视频 - 这不起作用
jQuery(window).load(function() {
for (var index in window.productVideos) {
if (document.getElementById("ytPlayer-" + window.productVideos[index])) {
document.getElementById("ytPlayer-" + window.productVideos[index]).addEventListener("onStateChange", "alert");
}
}
});
</script>
各种不相关的功能
<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>