javascript - How to correctly bind the html5 'ended' event to any future (jquery-produced) elements? -
the title explains of it. have list of links lead videos , audio-files load in page through javascript. html looks this:
<html> ... <body> ... <div id="main"> <ul> <li><a class="video" href="video/file1">video 1</a></li> <li><a class="audio" href="audio/file1">video 1</a></li> </ul> </div> ... </body> </html> my javascript looks follows. idea when click audio link insert audio tag, when click video link insert video tag. clicking anywhere on page plays/pauses audio/video. works except bottom block of code supposed handle 'ended' event. idea head list of links when media has finished. seems event won't bind @ all.
$(document).ready(function() { var mediablock; var playing = false; $(".video").on("click", function() { var link = $(this).attr("href"); $("#main").hide(); $("body").append('<video id="videoblock" width="'+$(window).width()+'" height="'+$(window).height()+'"><source src="'+link+'.mp4" type="video/mp4"><source src="'+link+'.ogg" type="video/ogg"></video>'); mediablock = $("#videoblock").get(0); mediablock.play(); playing = true; return false; }); $(".audio").on("click", function() { var link = $(this).attr('href'); $("#main").hide(); $("body").append('<audio id="audioblock" width="'+$(window).width()+'" height="'+($(window).height()-50)+'"<source src="'+link+'.mp3" type="audio/mpeg"><source src="'+link+'".ogg type="audio/ogg"></audio>'); mediablock = $("#audioblock").get(0); mediablock.play(); playing = true; return false; }); $(document).on("click", function() { if (playing) { mediablock.pause(); playing = false; } else { mediablock.play(); playing = true; } }); $(document).on("ended", "audio, video", function() { alert('test'); }); }); i have tried different ways of binding event. above , follows:
$("audio, video").bind("ended", function() { alert('test'); }); $("audio, video").on("ended", function() { alert('test'); }); after these tries have no clue anymore on how event caught correctly. please me out 1 can continue on audio/video webapp.
thanks in advance! :)
edit: solved problem not recreating video/audio tag reassigning sources of tag. gave 2 source-tags inside audio/video tag class , updated src-attribute of source-tags. event binding works expected.
Comments
Post a Comment