How to clear all videos if one video are watched and one click button function_问答_开发者

I have a video with buttons to control playback. If someone presses the play button while the video is already playing, the video will restart from the beginning. I need to disable the play button after the first click, and re-enable it when a user requests another video.

Additionally, when a user requests another video, I want the current video to stop playing and be cleared from the player. Currently, when someone requests another video in certain browsers (such as IE), the audio from the first video keeps playing.

Here is my code thus far:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".buttons").click(function () {
                var divname= this.value;

                if (divname == "Video") {
                    // Add iframe to div#Video
                    $("#Video").append('<h2>YouTube<\/h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/X3QoZn3lEbk" frameborder="0" allowfullscreen><\/iframe>');
                } else if (divname == "Close")  {
                    // Clear the iframe
                    $("#Video").empty();
                }
                //Hide/Show
                $("#"+divname).show("slow").siblings().hide("slow");
            });

        }); 
    </script>

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".buttons").click(function () {
                var divname= this.value;

                if (divname == "Video2") {
                    // Add iframe to div#Video2
                    $("#Video2").append('<h2>YouTube<\/h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9AZ6jvA9sUw" frameborder="0" allowfullscreen><\/iframe>');
                } else if (divname == "Close") { 
                    // Clear the iframe
                    $("#Video2").empty();
                }
                //Hide/Show
                $("#"+divname).show("slow").siblings().hide("slow");
            });

        }); 

    </script>
    <title></title>
  </head>
  <body>
    <div id="buttonsDiv">
      <input type="button" id="button1" class="buttons" value="Video">
      <input type="button" id="button2" class="buttons" value="Video2">
      <input type="button" id="button#" class="buttons" value="Close">
    </div>
    <div>
      <div id="Video" style="display:none"></div>
      <div id="Video2" style="display:none"></div>
      <div id="Close" style="display:none"></div>
    </div>
  </body>
</html>

o.k I solved the one click problem and no need to use close button, but still the problem of the repetition of the iframe.

if someone click on the first video he will not be able to click again unless he click the second video button and come back again to click on the first one but the problem is the repetition and the keeping audio playing in the background

How to make the clear iframe work again on this code after I solved the one click problem?

Note: the clear iframe worked when i change the close value to video and video2 value but with one click function clear all iframe is not working

the new code is

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#button1').click(function(){
  $('#button2').attr('disabled','');
  $('#button1').attr('disabled','disabled');


                var divname= this.value;

                if (divname == "Video") {
                    // Add iframe to div#Video
                    $("#Video").append( '<h2>YouTube<\/h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/Jwc43KzUl_k" frameborder="0" allowfullscreen><\/iframe>' );
                } else if (divname == "Video2") {
                    // Clear the iframe
                    $("#Video").empty();                                        
                }
                //Hide/Show
                $("#"+divname).show("slow").siblings().hide("slow");
            });

        }); 
    </script>

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
$('#button2').click(function(){
  $('#button1').attr('disabled','');
  $('#button2').attr('disabled','开发者_如何学运维disabled');

                 $(this).attr("disabled", "true");
                var divname= this.value;

                if (divname == "Video2") {
                    // Add iframe to div#Video2
                    $("#Video2").append('<h2>YouTube<\/h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9AZ6jvA9sUw" frameborder="0" allowfullscreen><\/iframe>');
                } else if (divname == "Video") {
                    // Clear the iframe
                    $("#Video2").empty();
                }
                //Hide/Show
                $("#"+divname).show("slow").siblings().hide("slow");
            });

        }); 

    </script>
    <title></title>
  </head>
  <body>
    <div id="buttonsDiv">
      <input type="button" id="button1" class="buttons" value="Video">
      <input type="button" id="button2" class="buttons" value="Video2">

    </div>
    <div>
      <div id="Video" style="display:none"></div>
      <div id="Video2" style="display:none"></div>
    </div>
  </body>
</html>

to see the result copy the above code to html test code for better understanding

Are these actual buttons, or links styled to look like buttons? If it's a real button then you can disable it via my_button.attr('disabled', true).

Otherwise, you'll need to come up with some method of storing this state yourself. You could always use jQuery's data method to store the enabled/disabled state of the "button". On the other hand, if you handle it via the presence/lack of a class, then you can take care of shading the button to let users know it's disabled.

In other words, when someone hits play you would add a "disabled" class to the play button. Then have some CSS that targets the element to make it a different color so users know not to click it. Then, in the play function, check to see if the play button has the disabled class before doing anything.

As for the video continuing to play in some browsers, you could always go for the nuclear option: remove the iframe altogether, and put a new one in its place.