46

YouTube のようにビデオを再生および一時停止できるようにしようとしています (再生ボタンと一時停止ボタンの両方を使用し、ビデオ自体をクリックします)。

<video width="600" height="409" id="videoPlayer" controls="controls">
 <!-- MP4 Video -->
 <source src="video.mp4" type="video/mp4">
</video>


<script>
    var videoPlayer = document.getElementById('videoPlayer');

    // Auto play, half volume.
    videoPlayer.play()
    videoPlayer.volume = 0.5;

    // Play / pause.
    videoPlayer.addEventListener('click', function () {
        if (videoPlayer.paused == false) {
            videoPlayer.pause();
            videoPlayer.firstChild.nodeValue = 'Play';
        } else {
            videoPlayer.play();
            videoPlayer.firstChild.nodeValue = 'Pause';
        }
    });
</script>

これにより、再生と一時停止のコントロール ボタンが壊れる理由はありますか?

4

10 に答える 10

110

最も単純な形式は、onclickリスナーを使用することです。

<video height="auto" controls="controls" preload="none" onclick="this.play()">
 <source type="video/mp4" src="vid.mp4">
</video>

jQuery や複雑な Javascript コードは必要ありません。

で再生/一時停止できますonclick="this.paused ? this.play() : this.pause();"。

デモ：

<video height="200" controls="controls" preload="none" onclick="this.play()">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>

クロム 89 の場合:

  • onclick="this.play()"は、最初の再生と一時停止 (コントロールのクリックは引き続き機能します) の後で、(コントロールではなく) 本文をクリックしてビデオが再度再生されるのを防ぎます。これは一般的に望ましくありません。これはおそらく、コールバックによって再生が行われ、その後イベントが伝播し、ブラウザーがすぐに再度一時停止するためです。
  • なしのデフォルトの動作onclick="this.play()"は次のようになります。最初のボディクリックからボディでの再生は機能しませんが、ボディでの最初の再生クリックの後、再生/一時停止を切り替えます
  • onclick="this.paused ? this.play() : this.pause();"最初の再生の後のボディ クリックは、おそらく再生も一時停止も機能しません。onclick="this.play()"
于 2016-02-22T20:53:35.000 に答える
5

これを行うには数え切れないほどの問題がありましたが、最終的に機能する解決策を思いつきました。

基本的に、以下のコードはビデオにクリック ハンドラーを追加していますが、下部のすべてのクリックを無視しています (0.82 は任意ですが、すべてのサイズで機能するようです)。

    $("video").click(function(e){

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if(y > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();

    });
于 2014-03-12T21:12:33.830 に答える
2

これはどう

<video class="play-video" muted onclick="this.paused?this.play():this.pause();">
   <source src="" type="video/mp4">
</video>
于 2020-12-02T05:28:47.857 に答える
2

preload="none"Chromium 89 および Firefox 86 では、Chromiumの最初のクリックを除いて、本文をクリックします。

それらのブラウザのうち：

  • Firefox は完璧に動作します。ビデオ本体をクリックすると、対応するコントロールをクリックするのと同じように、再生/一時停止が切り替わります。さらに、クリックが機能することをユーザーに明確にする直感的なプレースホルダーが表示されます。

    ここに画像の説明を入力

  • Chromium には、最初のクリックで動画の本文がないというバグがあり、preload="none". ただし、さらにクリックすると機能します。

    そして、そのプレースホルダーは、どこでもクリックして再生できることを明確にしていません (バグが修正されたときに適切なプレースホルダーが追加されることを願っています):

    ここに画像の説明を入力

したがって、最適なオプションは、最初のクリックでのみ再生を行うことで、そのバグを最小限に回避することです。

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Min</title>
</head>
<body>
<video id="vid" height="200" controls="controls" preload="none">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>
<script>
let first = true;
document.getElementById('vid').addEventListener('click', (e) => {
  if (first) {
    e.target.play();
  }
  first = false;
});
</script>
</body>
</html>

これにより、Firefox の正しい動作が損なわれることもありません。

TODO: オーバーレイ div を追加して、最初の再生クリックが機能することを明確に示すことで、この回避策を完璧にします。

https://stackoverflow.com/a/35563612/895245に示されている JavaScript ソリューションonclick="this.play()"は、最初の再生 + これらのブラウザーでの作業の一時停止後に実際に再生を中断するため、お勧めしません。

私の邪悪な部分は、YouTube ビデオだけが重要なビデオであるため、Chromium の動作はより悪いと考えたいと思っています >:-)

于 2021-03-25T18:37:33.580 に答える