Воспроизвести / приостановить видео HTML5 с помощью Jquery - PullRequest
Новая
       7

Воспроизвести / приостановить видео HTML5 с помощью Jquery

6 голосов
/ 26 марта 2012

Я хотел бы воспроизвести / приостановить видео с помощью jquery.

Вот мой код: 

(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);

Ответы [ 2 ]

3 голосов
/ 26 марта 2012

добавление идентификатора Анны к элементу управления видео 

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');


        }

использовать делегата, поскольку добавляемая кнопка является динамической 

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

$("#videoo")[0] вернет вам элемент DOM, а не объект jQuery, поскольку метод play не является методом jquery, это метод DOM

DEMO

1 голос
/ 27 февраля 2014

Вы можете сделать: 

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

Для более: http://wonderdesigners.com/?p=219

...