Display HTML5 video with Jquery

Question

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?

Rafay · Accepted Answer · 2012-03-25 21:26:36Z

1

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

edited Mar 25, 2012 at 21:26

answered Mar 25, 2012 at 18:45

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

coder Over a year ago

@3nigma-Thanks for your reply.I understood where I went wrong as you mentioned above.But after removing that line it still not showing up.Here is my fiddle demo. jsfiddle.net/CSTPv/1

Rafay Over a year ago

you havent selected jquery in the fiddle

Rafay Over a year ago

@DotNetter i have added a demo in the answer

montrealist · Accepted Answer · 2012-03-25 19:00:09Z

1

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.

answered Mar 25, 2012 at 19:00

montrealist

5,72012 gold badges50 silver badges72 bronze badges

1 Comment

coder Over a year ago

dalbaeb-Thanks for the explanation-I am at the starting point as you said may be my code is wrong?Thats the way I am trying to learn something about jquery.Anyways +1 for the fiddle demo.

Collectives™ on Stack Overflow

Display HTML5 video with Jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related