CODEWITHSUNDEEP
jqueryhtmlvideo
coder
coder

Reputation: 13248

Display HTML5 video with Jquery

I am trying to make a plugin for displayng html5 video as follows:

(function ($) {
    // plugin definition
    $.fn.myvideo = 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 $myvideo = $(this);
            addvideo();

            function addvideo() {
                var addvideo = $('<video controls="controls" width="480" height="208" id="video2"><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).append('body');
            }
        });
    };
})(jQuery);

This is how I call it:

 <script>
        $(function () {
            $('#video').htmlvideo();
        });
 </script>

This is a link to call the video:

<a href='#' id='video'><span>Launch video</span></a>

And it dosent display anyting :(

Can anyone say what the mistake is?

And how do I display the video without the link?

Upvotes: 1

Views: 806

Answers (2)

Rafay
Rafay

Reputation: 31043

you are re-wrapping the addVideo

 function addvideo() {
                var addvideo = $('<video controls="controls" width="480" height="208" id="video2"><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.append('body');//<-- here addvideo is already wrapped in $
                               ^
                //may be you wanted to use appendTo
                //addvideo.appendTo('body');
            }

DEMO

Upvotes: 1

montrealist
montrealist

Reputation: 5693

Your code is all wrong. First of all, you don't need a link, you're already trying to execute htmlvideo() on document ready, but your $('#video') doesn't return anything because an element with ID "video" doesn't exist in your HTML.

Here's a working code:

(function ($) {
// plugin definition
$.fn.myvideo = 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 $myvideo = $(this);
        addvideo();

        function addvideo() {                  
            var addvideo = $('<video controls="controls" width="480" height="208" id="video2"><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('#vid');
        }
    });
};

    $(function () {
        $('#vid').myvideo();
    });

})(jQuery);

This is the sample HTML (you don't really need a div, you can just attach the element to body like you did in your question):

<div id="vid"></div>

Here's a fiddle:

http://jsfiddle.net/PCNeJ/

I've inserted some console.log() statements that you can follow in a tool like Firebug and erase them later.

Upvotes: 1

Related Questions