3

HTML5でビデオを再生して終了したイベントに問題があります。いくつかのHTMLコンテンツを表示し、期限が切れた後、ビデオを再生します。ビデオは終了しましたか？HTMLコンテンツをもう一度表示します。これはループするはずです。そのプレゼンテーション用です。

私の問題は、最初の完全な実行後、終了したイベントが繰り返し発生し、HTMLコンテンツがfalseで表示されることです。

コード部分は次のとおりです。

function playVideo() {
    var video = $('video')[0];
    video.addEventListener('ended', function () {
        $('video').hide();
        fadeShow();
    }, false);
    video.play();  
}

function fadeHide() {
    $('#content').fadeOut(1200, function () {
        $('div ul[id^=item]').each(function () {
            $(this).hide();
        });
        $('li[class^=visitor] span[id]').each(function () {
            $(this).hide();
        });
        playVideo();
    });
}

関数は2回呼び出されるのfadeHide();ではなく、video.addEventListener('ended', function () {};塗りつぶしが数回呼び出されるだけです。`fadeshow（）; HTMLコンテンツを表示します。実際、私は最新バージョンのChromeを使用しています。

誰かが何が悪かったのか考えていますか？

HTMLビデオコードを編集します。私はcssでビデオを隠します。

<video>
    <source src="video/mp4/xxx.mp4" type="video/mp4" />
    <source src="video/ogg/xxx.ogg" type="video/ogg" />
    <source src="video/webm/xxx.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

グリーツ

4

2 に答える 2

12

イベントリスナーを1回割り当てるか、再生時に毎回割り当てる場合は、イベントリスナーを再度デタッチする必要があります。

function playVideo() {
    var video = $('video')[0];
    video.addEventListener('ended', function () {
        $('video').hide();
        video.removeEventListener('ended'); <<<<<<<
        fadeShow();
    }, false);
    video.play();  
}

編集：私はこのフィドルを使ってクロームでテストしました、そして実際にあなたがeventlistenerを削除してもそれは複数回発火し始めます。イベントリスナーの削除が正しく機能しないという問題があるようです。

イベントのバインド/バインド解除をjQueryに変更する必要があります。そうすると、終了したイベントは1つだけになります。

function playVideo() {
    var video = $('video')[0];
    $('video').bind('ended', function () {
        $('video').unbind('ended');
        $('video').hide();
        fadeShow();
    });
    video.play();  
}

そしてあなたのフィドルは更新されました（より短いビデオで）

于 2012-07-27T08:27:55.500 に答える
1

イベントリスナーを追加して手動で削除する代わりに、「one」（ https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player）という組み込みコマンドを使用してみてください。 md＃one-first-second-third-）

したがって、コードは次のようになります。

function playVideo() {
    var video = $('video')[0];
    $('video').one('ended', function () {
        $('video').hide();
        fadeShow();
    });
    video.play();  
}

これは少し簡潔で、API自体に依存します。APIの機能は、複数のブラウザやオペレーティングシステムを使用して、コミュニティ内の多数の人々によって複数回テストされているため、一般的には良い習慣だと思います。

于 2015-07-11T07:21:01.163 に答える