I have this youtube code:
<iframe width="970" height="582" src="EMBED CODE FROM YOUTUBE" frameborder="0" allowfullscreen></开发者_Go百科iframe>
Now, I want to do some action when the user clicks on the video (when he clicks play). I tried to get the iframe click, embed click.. Nothing works. What am I doing wrong?
Thanks!
You can't do anything within iframe
, which is not from the same site. It's forbidden. Read about same origin policy.
I just wrote this modification in the Google Code playground:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>YouTube Player API Sample</title>
<style type="text/css">
#videoDiv {
margin-right: 3px;
}
#videoInfo {
margin-left: 3px;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
/*
* Polling the player for information
*/
// This function is called when the player changes state
function onPlayerStateChange(newState) {
if(newState == 3)
alert('Video playing');
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
document.getElementById("ytPlayer").addEventListener("onStateChange", "onPlayerStateChange");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// 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" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1",
"videoDiv", "480", "295", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="videoDiv">Loading...</div>
</body>
</html>
If you use embed the video this way, then the function onPlayerStateChange is called whenever the state of the video changes. state == 3 means that the video is at the very beginning and is starting to play. state == 1 means that the video is playing so if you want to detect multiple times (IE if they pause and hit play again) you need to use newState == 1 where I put newState == 3. But if you only want to detect the first time they start the video this should work.
精彩评论