18

次のコードを使用して、クリックして再生する機能をHTML5ビデオに追加しています。

$('video').click(function() {
  if ($(this).get(0).paused) {
    $(this).get(0).play();
  }
  else {
    $(this).get(0).pause();
  }
});

ブラウザのネイティブコントロールに干渉することを除いて、問題なく機能します。つまり、ユーザーが一時停止/再生ボタンをクリックしたときにキャプチャし、すぐに選択を元に戻し、一時停止/再生ボタンを無効にします。

DOMでビデオ部分だけを選択する方法はありますか、それとも失敗すると、ビデオコンテナのコントロール部分へのクリックをキャプチャする方法があります。これにより、ユーザーが押したときにクリックして再生する機能を無視/元に戻すことができます。一時停止/再生ボタン？

4

5 に答える 5

18

クリックイベントをキャッチするレイヤーをビデオの上に追加できます。次に、ビデオの再生中にそのレイヤーを非表示にします。

（簡略化された）マークアップ：

<div id="container">
    <div id="videocover">&nbsp;</div>
    <video id="myvideo" />
</div>

スクリプト：

$("#videocover").click(function() {
    var video = $("#myvideo").get(0);
    video.play();

    $(this).css("visibility", "hidden");
    return false;
});

$("#myvideo").bind("pause ended", function() {
    $("#videocover").css("visibility", "visible");
});

CSS：

#container {
    position: relative;
}

/*
    covers the whole container
    the video itself will actually stretch
    the container to the desired size
*/
#videocover {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
于 2012-08-09T20:56:01.043 に答える
4

これは古い質問ですが、同じ問題が発生し、別の解決策を見つけました。クリックでビデオを再生し、クリックで一時停止します。しかし、元のポスターとして、私はコントロールに問題が発生しました。次のようなjqueryの問題を解決しました：

$("video").click(function (e) {
    if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
    {
        if(this.paused)
            this.play();
        else
            this.pause();
    }
});

クリックでオフセットを確認し、それがコントロール上にある場合、再生/一時停止機能は何もしません。

于 2013-12-20T02:35:36.857 に答える
3

event.stopPropagationを試して、それが機能するかどうかを確認できます。それはネイティブコントロールが機能しなくなるか、何もしないかのどちらかだと思いますが。

$('video').click(function(event) {
  event.stopPropagation();
  if ($(this).get(0).paused) {
    $(this).get(0).play();
  }
  else {
    $(this).get(0).pause();
  }
});

ブラウザがネイティブコントロールとビデオをすべて同じ要素の一部と見なす場合（そして私はそれらがそうすると信じています）、おそらく運が悪いでしょう。jQueryのevent.targetでは、ビデオのクリックとコントロールのクリックの違いを区別できません。

したがって、最善のオプションは、独自のコントロールを作成することだと思います（古いチュートリアルですが、まだかなり簡単です）。または、コントロールが有効になっているときに、ブラウザの開発者にビデオの再生/一時停止をクリックするように依頼します。デフォルトでそれを行う必要があるようです。

于 2012-08-09T20:52:50.183 に答える
1

ここで素晴らしい答え。これらをありがとう。これが、コントロールをクリック可能にするために私が考え出したトリックです。すべてjQueryです。

$('#video_player').click(function(e){

    var y = e.pageY - this.offsetTop;

    //Subtract how much control space you need in y-pixels.
    if(y < $(this).height() - 40) 
    {
        //$(this).get(0).play();
        //... what else?
    }

});
于 2013-04-19T13:46:28.067 に答える
0

Torsten Walterのソリューションはうまく機能し、問題に対するかなり洗練されたソリューションであり、クリックして一時停止を処理しない場合でも、おそらくそれを処理するための最良の方法です。しかし、彼の解決策は私にそれを行うためのハッキーな方法を考えさせました、そして私はこれを思いつきました：

マークアップ

<div id="container">
  <div id="videocover">&nbsp;</div>
  <video id="myvideo" />
</div>

JavaScript

$('#videocover').click(function(event) {
  var video = $('#myvideo')[0];
  if (video.paused) {
    video.play();
  }
  else {
    video.pause();
  }
  return false;
});

CSS

#container {
  position: relative;
}

#videocover {
  position: absolute;
  z-index: 1;
  height: 290px; /* Change to size of video container - 25pxish */
  top: 0;
  right: 0;
  bottom: 0;
  left;
}

基本的に、クリックして再生/クリックして一時停止する機能を処理するために、クリック可能なカバーを常に表示し続けますが、カバーがビデオの下部にあるコントロールと重ならないようにします。

もちろん、これは次のような応急修理です。

  • すべてのブラウザがコントロールを同じ領域に配置し、コントロールが同じ高さであることを前提としています
  • CSSでビデオコンテナの高さを指定する必要があります
  • マウスをビデオの上に置いたときにコントロールが表示されないようにします

しかし、私はそれをそこに出すと思いました。

于 2012-08-10T08:58:11.270 に答える