Play / Pause HTML5 Video Using JQuery

Question

I would like to play / pause a video using jquery.

Here is my code:

(function ($) { // plugin definition $.fn.htmlvideo = function (options) { // build main options before element iteration var defaults = { theme: 'normal', }; var options = $.extend(defaults, options); // iterate and reformat each matched element return this.each(function () { var $htmlvideo = $(this); addvideo(); addcontrols(); function addvideo() { var addvideo = $('<video width="1000"><source src="http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv" type="video/ogg; codecs="theora, vorbis""><source src="http://devfiles.myopera.com/articles/2642/sintel-trailer.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""></video>'); $(addvideo).appendTo('#video'); } function addcontrols() { var controls = $('<div id="controls" class="controls"><button id="playbtn" class="playbtn"></button></div>'); $(controls).appendTo('#controlspane'); } $('.playbtn').click(function () { //Here I need to make the video play }); }); }; })(jQuery); 

Answer 1

add ann identifier to video control

 function addvideo() { var addvideo = $('<video controls="controls" width="480" height="208" id="videoo"><source src="http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv" type="video/ogg; codecs="theora, vorbis""><source src="http://devfiles.myopera.com/articles/2642/sintel-trailer.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""></video>'); $(addvideo).appendTo('body'); } 

use delegate as the button you add is dynamic

 $(document).delegate('.playbtn',"click",function () { $('#videoo')[0].play(); }); 

$("#videoo")[0] will return you a DOM element, not a jQuery object, since the play method is not a jquery method, its a DOM method

Demo

Answer 2

You can do:

 $('video').trigger('play'); $('video').trigger('pause'); 

Read more: http://wonderdesigners.com/?p=219