Вопрос по html5, javascript – Воспроизвести паузу HTML5 видео Javascript

26

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

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

В теге HTML5 видео у меня есть что-то вроде:     ID = & Quot; игрок & Quot; OnClick = & Quot; this.play (); & Quot;

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

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

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

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

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

Есть идеи?

пожалуйста, пройдите по этой ссылкеstackoverflow.com/questions/4646998/… Vicky
Я прошел через это, и нет ничего, чтобы помочь с этой проблемой Jizbo Jonez

Ваш Ответ

6   ответов
2

Этот вид работ (с использованием 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 здесь остановилась проблема с переходом между кадрами, которую вы видите, но затем она ломает другие кнопки в разделе управления, такие как полноэкранный и т. д.

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

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();
    }
});
Error: User Rate Limit Exceededstackoverflow.com/questions/28353352/…
10

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

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

Error: User Rate Limit Exceeded
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');
                }
              });

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

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', '');
    });
});
42
$('#play-pause-button').click(function () {
   var mediaVideo = $("#media-video").get(0);
   if (mediaVideo.paused) {
       mediaVideo.play();
   } else {
       mediaVideo.pause();
  }
});

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

EDIT: В ванильном JavaScript: видео это не функция, а часть DOM, следовательно, использовать

 video.play(); 

Instead of

video().play() **wrong**
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы