how to run identical javascript functions

Question

after extensive research i couldn't find an answer that fitted my (fairly) low skills in javascript. it'd be a great relief if any of you could help.

i'm trying to run this script twice on the same page but i think the problem is the function onYouTubePlayerReady cannot be called two times without having it overwritten by the last. Also, if I change its name the actual functions won't be performed.

here's the code. I'd like it to play up to 4 youtube videos with no sound and autoplay in the same page. do you know how it's possible?

thanks for your time

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prova 1</title>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
    </script> 

</head>

<body align="center">


<div id="ytapiplayer2"></div>

    <script type="text/javascript">
        function onYouTubePlayerReady2(playerId2) {
            ytplayer2 = document.getElementById("myytplayer2");
            ytplayer2.playVideo();
            ytplayer2.mute();
                }
        var videoID2 = "OFIhzSwDfwo"
        var params = { allowScriptAccess: "always" };
        var atts = { id: "myytplayer2" };
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID2 + "?enablejsapi=1&playerapiid=ytplayer\
        &autoplay=1&version=3&showinfo=0&iv_load_policy=3&controls=0&modestbranding=1",
        "ytapiplayer2", "250", "inherit", "0", null, null, params, atts)
    </script>



<div id="ytapiplayer"></div>

    <script type="text/javascript">
        function onYouTubePlayerReady(playerId) {
            ytplayer = document.getElementById("myytplayer");
            ytplayer.playVideo();
            ytplayer.mute();
                }
        var videoID = "e5iqtQLm-BM"
        var params = { allowScriptAccess: "always" };
        var atts = { id: "myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?enablejsapi=1&playerapiid=ytplayer\
        &autoplay=1&version=3&showinfo=0&iv_load_policy=3&controls=0&modestbranding=1",
        "ytapiplayer", "250", "inherit", "0", null, null, params, atts)
    </script>


</body>
</html>

I see a couple of things that *might* be problematic, e.g. `ytplayer` is global and not local to the function. Also, you make the function accept an argument but it is not using it. You have two identical pieces of code. Are you saying using both does not work? Or do you have problems using the original `onYouTubePlayerReady` function for both videos? — Felix Kling, Oct 08 '11 at 23:03
I don't know, as I said, there seem to be a couple of problems. E.g. you have no elements with IDs `myytplayer2` or `myytplayer`. `onYouTubePlayerReady2` will never be called as the API does not know about this function. — Felix Kling, Oct 08 '11 at 23:10
the second script works as it should using them at the same time — michele post-durante, Oct 08 '11 at 23:12
i can see the embed elements having those myytplayer Ids, and if onYouTubePlayerReady2 is not recognized, how can i run it for the two elements (the embed videos)? — michele post-durante, Oct 08 '11 at 23:16

score 0 · Answer 1 · answered Dec 05 '13 at 01:47

0

Use arguments instead of global variables to avoid side effects:

 function onYouTubePlayerReady2(playerId2, ytplayer2, video2, params, atts)

Then pass in the hardcoded values instead of changing state during each call.

answered Dec 05 '13 at 01:47

Paul Sweatte

24,148
7
127
265

how to run identical javascript functions

1 Answers1