web-dev-qa-db-ja.com

再生一時停止html5ビデオjavascript

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

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ブラウザをFirefoxがネイティブに動作するように強制しようとしています。

javascripthtmlvideo
27
Jizbo Jonez
$('#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**
45
sheelpriy

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

したがって、video()の代わりにvideoを使用してください

10
user1076821

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

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', '');
    });
});
2
Tahir Fazal

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を使用すると、表示されるフレームジャンプの問題が停止しますが、フルスクリーンなどのコントロールセクションの他のボタンが壊れます。

簡単な理由がないようです。私はベンダーがデフォルトでクリックしてプレイするだろうと思っていただろう、それはやるべきことのようだ。 ：|

2
Sprintstar

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

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');
                }
              });

コンソールへのログ記録は、もちろん、単なる例示です。

0
Chris Bryant
$('#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();
    }
});
0
Martin Quintana
            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();
            }
            };
0
manu