31

プレーヤーに表示されているポスター画像をクリックすると動画を再生する機能がありますが、動作しているようです：

var video = document.getElementById('player');
video.addEventListener('click',function(){
    video().play();
},false);

html5ビデオタグには次のようなものがあります：id = "player" onclick = "this.play（）;"

問題は、ビデオコントロールで一時停止を押すと、実際には一時停止しますが、これは良いことですが、ビデオコントロールの再生ボタンを押すと、ボタンが一瞬再び一時停止するように変化するのを見ることができます。再び再生ボタンに戻ります。だから私は再生を押すと、それは数フレームの間だけ再生され、その後一時停止されて戻ってきます。もう一度再生する唯一の方法は、ビデオ表示領域をクリックすることです。

コントロールバーの再生/一時停止ボタンを使用しているときに一時停止に戻るのを停止するにはどうすればよいですか？また、ビデオ表示領域をクリックしたときに一時停止に戻すにはどうすればよいですか？

私は以下を試しましたが、うまくいきません：

var video = document.getElementById('player');
video.addEventListener('click',function(){
    if(video.paused){
        video().play();
    }else{
        video.pause();
    }
},false);

実際の表示領域を押したときにビデオを再生したい理由は、Androidで小さなコントロールバーの再生ボタンを見つけるのが難しいためです。これは非常に小さいため、表示領域を押すだけで簡単に取得できます。行きます。Firefoxでは、表示領域をクリックするとビデオプレーヤーが再生され、一時停止します。これはまさに私が望んでいることであり、JavaScriptを必要とせずにこれも実行します。Androidでは、表示領域を押してもビデオがまったく再生されません。だから私は基本的にAndroidブラウザをFirefoxがネイティブに動作するように動作させようとしています。

4

8 に答える 8

53 
$('#play-pause-button').click(function () {
   var mediaVideo = $("#media-video").get(0);
   if (mediaVideo.paused) {
       mediaVideo.play();
   } else {
       mediaVideo.pause();
  }
});

私はこれをjQueryで実行しました。これはシンプルで高速です。試してみるには、ビデオタグのIDと再生/一時停止ボタンを使用する必要があります。

編集： バニラJavaScriptの場合：ビデオは関数ではありませんが、DOMの一部であるため使用します

 video.play();

それ以外の

video().play() **wrong**
于 2014-01-09T07:21:33.417 に答える
11

私が見るところ、ビデオは機能ではないのに、なぜ括弧があるのですか？それはあなたのエラーです。

したがって、video()単に使用する代わりにvideo

于 2012-06-04T16:34:07.547 に答える
2

Chrome v22、Firefox v15、IE10では、この種の作業（jqueryを使用）は次のようになります。

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

ここpreventDefaultで、表示されるフレームジャンプの問題は停止しましたが、フルスクリーンなどのコントロールセクションの他のボタンが壊れます。

それをするのは簡単な理由がないように見えますか？私はベンダーがデフォルトでクリックしてプレイするだろうと思っていたでしょう、それは論理的なことのようです。：|

于 2012-09-27T13:27:19.953 に答える
2

これが最も簡単な解決策です

this.on("pause", function () {
    $('.vjs-big-play-button').removeClass(
        'vjs-hidden'
    ).css('display', 'block');
    this.one("play", function () {
        $('.vjs-big-play-button').addClass(
            'vjs-hidden'
        ).css('display', '');
    });
});
于 2015-10-21T08:30:22.590 に答える
0 
$('#video-id').click(function() {
    // jQuery sets this as the DOM element that triggered the event
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0)
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }
});
于 2014-07-23T12:38:23.320 に答える
0

これは、あなたが達成しようとしていることを書くための最も簡単で簡単な方法だと私は信じています。

var myVideo = document.getElementById('exampleVideo');

            $(myVideo).click(function toggleVideoState() {
                if (myVideo.paused) {
                  myVideo.play();
                  console.log('Video Playing');
                } else {
                  myVideo.pause();
                  console.log('Video Paused');
                }
              });

もちろん、コンソールへのログ記録は説明のためだけのものです。

于 2017-05-09T06:43:33.627 に答える
0 
            function myFunction(){ 
            var playVideo = document.getElementById('myVideo');
            var button = document.getElementById('myBtn');

            if (playVideo.paused) {
               playVideo.play();
                button.innerHTML= "pause";
            } else {
               button.innerHTML= "play";
               playVideo.pause();
            }
            };
于 2019-07-18T05:07:24.327 に答える
-2 
document.getElementById("play").onclick = function(){
    if (document.getElementById("videoPlay").paused){
        document.getElementById("videoPlay").play();
    } else {
        document.getElementById("videoPlay").pause(); 
    }
}
于 2019-08-01T05:48:19.880 に答える