web-dev-qa-db-ja.com

HTML 5 Video要素をクリックして、再生、ビデオの一時停止、再生ボタンの中断

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>

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

html5videoyoutube
31
user2698522

最も簡単な形式は、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();"で実行できます。

84
oabarca

古い投稿を表示するのではなく、同じ解決策を探してこの質問に行き着きました。私は自分のものを思いついた。私が貢献すると思いました。

HTML：

<video class="video"><source src=""></video>

JAVASCRIPT：「JQUERY」

$('.video').click(function(){this.paused?this.play():this.pause();});
44
Mickey

return false;を追加するとうまくいきました：

jQueryバージョン：

$(document).on('click', '#video-id', function (e) {
    var video = $(this).get(0);
    if (video.paused === false) {
        video.pause();
    } else {
        video.play();
    }

    return false;
});

バニラJavaScriptバージョン：

var v = document.getElementById('videoid');
v.addEventListener(
    'play', 
    function() { 
        v.play();
    }, 
    false);

v.onclick = function() {
    if (v.paused) {
        v.play();
    } else {
        v.pause();
    }

    return false;
};
8
Roberts126

これと同じ問題があり、クリックアクションに加えて再生アクションのイベントハンドラーを追加することで解決しました。再生中はコントロールを非表示にして、一時停止ボタンの問題を回避します。

    var v = document.getElementById('videoID');
    v.addEventListener(
       'play', 
          function() { 
             v.play();
          }, 
        false);

    v.onclick = function() {
      if (v.paused) {
        v.play();
        v.controls=null;
      } else {
        v.pause();
        v.controls="controls";
      }
    };

それでもシークはおかしくなりますが、少なくともプレイコントロールとの混乱はなくなりました。お役に立てれば。

誰もがそれに対する解決策を持っていますか？

3
jkrz

これを行うには無数の問題がありましたが、最終的には機能するソリューションを思い付きました。

基本的に、以下のコードはクリックハンドラーをビデオに追加しますが、下部のすべてのクリックを無視します（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();

    });
2
ios-lizard

問題は<video>要素内での内部バブリングのように見えます...そのため、「再生」ボタンをクリックすると、コードがトリガーされ、次に再生ボタン自体がトリガーされます:(

クリックの泡立ちを止める簡単な（信頼できる）方法を見つけることができませんでした（ロジックは方法があるべきだと言っていますが、...それは今私を逃します）

とにかく、私がこれを見つけた解決策は、コントロールが表示される場所に収まるサイズの透明な<div>を置くことでした...したがって、divをクリックすると、スクリプトが再生/一時停止しますユーザーがコントロール自体をクリックすると、<video>要素がそれを処理します。

以下のサンプルは私のビデオ用にサイズ設定されているため、相対的な<div>sのサイズを調整する必要があるかもしれませんが、開始する必要があります

<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>

<script>
    var v = document.getElementById('videoPlayer');
    var vv = document.getElementById('vOverlay');
    <!-- Auto play, Half volume -->
    v.play()
    v.volume = 0.5;
    v.firstChild.nodeValue = "Play";

    <!-- Play, Pause -->
    vv.addEventListener('click',function(e){
        if (!v.paused) {
            console.log("pause playback");
            v.pause();
            v.firstChild.nodeValue = 'Pause';
        } else {
            console.log("start playback")
            v.play();
            v.firstChild.nodeValue = 'Play';
        }
      });
</script>
1
Offbeatmammal

Ios-lizardのアイデアのフォローアップ：

ビデオのコントロールは約35ピクセルであることがわかりました。これは私がやったことです：

$(this).on("click", function(event) {
    console.log("clicked");
    var offset = $(this).offset();
    var height = $(this).height();
    var y = (event.pageY - offset.top - height) * -1;
    if (y > 35) {
        this.paused ? this.play() : this.pause();
    }
});

基本的に、要素に対する相対的なクリックの位置を見つけます。 -1を掛けて正にしました。値が35（コントロールの高さ）より大きい場合、ユーザーがコントロール以外の場所をクリックしたことを意味します。したがって、ビデオを一時停止または再生します。

1
Nathan