Play/Pause HTML5 video using Jquery

Question

I would like to play/pause 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);

score 4 · Accepted Answer · answered Mar 25 '12 at 21:36

add ann id to the 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 are adding is dynamic

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

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

DEMO

glad that helped, from the previous question i noticed that you are using the multiple ids in the anchor and in the video control, that is wrong the ids should be unique... — Rafay, Mar 25 '12 at 21:40

score 2 · Answer 2 · edited Feb 27 '14 at 08:13

2

You can do:

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

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

edited Feb 27 '14 at 08:13

Klaster_1 Нет войне

11,790
9
61
73

answered Feb 27 '14 at 07:55

wonder

1,001
7
2

Play/Pause HTML5 video using Jquery

2 Answers2