i have video buttons control playback. if presses play button while video playing, video restart beginning. need disable play button after first click, , re-enable when user requests video.
additionally, when user requests video, want current video stop playing , cleared player. currently, when requests video in browsers (such ie), audio first video keeps playing.
here code 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 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 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 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 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 solved 1 click problem , no need use close button, still problem of repetition of iframe.
if click on first video not able click again unless click second video button , come again click on first 1 problem repetition , keeping audio playing in background
how make clear iframe work again on code after solved 1 click problem?
note: clear iframe worked when change close value video , video2 value 1 click function clear iframe not working
the new code
<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 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 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 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 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 result copy above code html test code better understanding
are these actual buttons, or links styled buttons? if it's real button can disable via my_button.attr('disabled', true).
otherwise, you'll need come method of storing state yourself. use jquery's data method store enabled/disabled state of "button". on other hand, if handle via presence/lack of class, can take care of shading button let users know it's disabled.
in other words, when hits play add "disabled" class play button. have css targets element make different color users know not click it. then, in play function, check see if play button has disabled class before doing anything.
as video continuing play in browsers, go nuclear option: remove iframe altogether, , put new 1 in place.
Comments
Post a Comment