-1

html5 ビデオ コントローラーをカスタマイズする関数を作成しました。それは正常に動作しますが、後でページ内に no.of インスタンスがあるため、それぞれを複数の要素に使用して関数を変更しましたが、エラーがスローされます..

私の機能の何が問題になっていますか？提案してください..

私の機能：

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

0

コードを次のように変更します...

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

videoHolderjQuery オブジェクトに変換する必要があります。

于 2012-10-10T13:55:56.913 に答える