Question

我正在尝试为displayng html5视频制作一个插件，如下所示：

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

这就是我所说的：

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

这是调用视频的链接：

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

它显示任何：（

谁能说出错是什么？

如何在没有链接的情况下显示视频？

Answer 1

您正在重新包装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

Answer 2

你的代码都错了。首先，你不需要一个链接，你已经尝试在文档就绪上执行htmlvideo（），但你的$('#video')没有返回任何内容，因为ID为“video”的元素不存在在你的HTML中。

这是一个有效的代码：

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

这是示例HTML（您实际上不需要div，您可以像在问题中一样将元素附加到正文）：

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

这是一个小提琴：

http://jsfiddle.net/PCNeJ/

我已经插入了一些console.log()语句，您可以在Firebug等工具中使用这些语句，稍后将其删除。

使用Jquery显示HTML5视频

2 个答案: