Question

我写了一个函数来自定义html5视频控制器。它工作正常，后来我在页面中没有实例，所以我转动了函数，使用每个元素到多个元素，但它会抛出错误..

我的功能出了什么问题？建议请..

myfunction：

var videoProcess = function (videoHolder) {
    var videoContainer = videoHolder,
        videoElement = videoContainer.find('video'),
        videoControler = videoContainer.find('span');

    videoControler.add(videoElement).bind('click',function () {
        videoElement.get(0).paused === false ?  videoElement.get(0).pause() : videoElement.get(0).play();
        videoElement.get(0).ended === true ? videoElement.get(0).play() : videoElement.get(0).ended === true;
    } );

    videoElement.bind('play',function () {
        videoControler.hide().removeClass('play').addClass('pause');
    } )

    videoElement.bind('ended',function () {
        videoControler.show().removeClass('pause').addClass('play');
    } )

    videoContainer.mouseleave(function () {
        videoContainer.mouseenter(function () {
            videoControler.show();    
        } ).mouseleave(function () {
            if(videoElement.get(0).paused === false && videoElement.get(0).ended === false ){
                videoControler.hide();    
            }

        } )    
    } )

    videoElement.bind('pause',function () {
        videoControler.show().removeClass('pause').addClass('play');
    } )
}

$(document).ready(function () {
     if($('video').length){
        $.each($('.video-holder'), function(num,val){ // i have no.of video-holder
            videoProcess(val);    
        } )
    }
} );

我得到的错误：

TypeError: videoContainer.find is not a function [Break On This Error]  

videoElement = videoContainer.find('video'),

更新功能：

var videoProcess = function (videoHolder) {
    var videoContainer = $(videoHolder),
        videoElement = videoContainer.find('video'),
        videoControler = videoContainer.find('span');

    videoControler.add(videoElement).bind('click',function () {
        videoElement.get(0).paused === false ?  videoElement.get(0).pause() : videoElement.get(0).play();
        videoElement.get(0).ended === true ? videoElement.get(0).play() : videoElement.get(0).ended === true;
    } );

    videoElement.bind('play',function () {
        videoControler.hide().removeClass('play').addClass('pause');
    } )

    videoElement.bind('ended',function () {
        videoControler.show().removeClass('pause').addClass('play');
    } )

    videoContainer.mouseleave(function () {
        videoContainer.mouseenter(function () {
            videoControler.show();    
        } ).mouseleave(function () {
            if(videoElement.get(0).paused === false && videoElement.get(0).ended === false ){
                videoControler.hide();    
            }

        } )    
    } )

    videoElement.bind('pause',function () {
        videoControler.show().removeClass('pause').addClass('play');
    } )
}

$(document).ready(function () {   
    if($('video').length){
        $('.video-holder').each(videoProcess($(this)));
    }

} );

html：重复次数

        <div class="video-holder">
            <video autobuffer poster="images/common-poster.png">
                <source src="Video/webm/Task_1.0_Host_treated.webm" type="video/webm" />
                <source src="Video/ogv/Task_1.0_Host_treated.ogv" type="video/ogg" />
                <source src="Video/MP4/Task_1.0_Host_treated.mp4" type="video/mp4" />
            </video>
            <span class="play">play th is</span>
        </div>

Answer 1

我得到了修复，我称之为我的功能：

$(document).ready(function () {

if($('video').length){
        $('.video-holder').each(function(num,element) {
            videoProcess(element);
        });
}

});

没有什么特别的，我在尝试使用单个参数之前添加了一个参数'num'，所以它只有错误的值。

Answer 2

更改代码，使其像这样......

var videoContainer = $(videoHolder),
    videoElement = videoContainer.find('video'),
    videoControler = videoContainer.find('span');

您需要将videoHolder转换为jQuery对象。

使用每个错误将单个函数转换为多个元素

2 个答案: