-1

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

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

我的功能：

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>
4

2 回答 2

1

我得到了修复，我这样调用我的函数：

$(document).ready(function () {

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

});

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

于 2012-10-10T14:42:34.950 回答
0

把代码改成这样……

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

您需要转换videoHolder为 jQuery 对象。

于 2012-10-10T13:55:56.913 回答