Play pause html5 video javascript

У меня есть функция, которая воспроизводит видео, когда я нажимаю на изображение плаката, отображаемое в плеере, и оно работает:

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

В теге html5 video у меня есть что-то вроде: id = "player" onclick = "this.play();"

проблема заключается в том, что если я нажимаю pause на элементах управления видео, это фактически делает паузу, что хорошо, но затем, если я нажимаю то, что сейчас является кнопкой воспроизведения на элементах управления видео, я вижу изменение кнопки, чтобы снова сделать паузу в течение доли секунды, затем она идет снова стать кнопкой воспроизведения. Поэтому я нажимаю кнопку воспроизведения, и она воспроизводится только в течение нескольких кадров, а затем возвращается в режим паузы. Единственный способ заставить его играть снова - это нажать на область просмотра видео.

Как я могу заставить его перестать возвращаться к паузе при использовании кнопки воспроизведения/паузы на панели управления, и как я могу заставить его остановиться, когда я нажимаю на область просмотра видео?

Я пробовал следующее, но это не работает:

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

Причина, по которой я хочу воспроизвести видео при нажатии на фактическую область просмотра, заключается в том, что слишком трудно найти крошечную кнопку воспроизведения на панели управления Android, поскольку она настолько мала, что людям будет проще просто нажать на область просмотра, чтобы получить это происходит. В Firefox проигрыватель видео воспроизводится, когда я нажимаю на область просмотра, а также делаю паузы, что является именно тем, что я хочу, и также делает это без необходимости использования JavaScript. В Android видео просто не воспроизводится, когда я нажимаю на область просмотра. Поэтому я пытаюсь заставить браузер Android вести себя так же, как и Firefox.

Ответы

Ответ 1

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

Я сделал это в jQuery, который прост и быстр. Чтобы попробовать, вам просто нужно использовать идентификатор видео тега и кнопку воспроизведения/паузы.

РЕДАКТИРОВАТЬ: В vanilla JavaScript: видео не функция, а часть DOM, следовательно, использовать

 video.play();

Вместо

video().play() **wrong**

Ответ 2

Из того, что я вижу, видео не является функцией, так почему у вас есть круглые скобки? Это ваша ошибка.

Итак, вместо video() просто используйте video

Ответ 3

Это самое простое решение

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

Ответ 4

Этот вид работ (с использованием jquery) для меня в Chrome v22, Firefox v15 и IE10:

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

preventDefault здесь остановилась проблема с перекосом кадров, которую вы видите, но затем она разрывает другие кнопки в секции управления, такие как полноэкранный режим и т.д.

Похоже, что нелегко это сделать? Я бы подумал, что у игроков было бы щелкнуть по умолчанию, кажется логичным.: |

Ответ 5

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

Ответ 6

Это, я считаю, самый простой и простой способ написать то, что вы пытаетесь достичь:

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

Вход в консоль, конечно, просто для иллюстрации.

Ответ 7

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