Нажатие кнопки "HTML 5" для воспроизведения, приостановки видео, разрыва кнопки воспроизведения

Ответ 1

Простейшая форма заключается в использовании слушателя 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();".

Ответ 2

Не поднимать старый пост, но я приземлился на этот вопрос в своем поиске того же решения. В итоге я придумал что-то свое. Понял, что буду участвовать.

HTML:

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

JAVASCRIPT: "JQUERY"

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

Ответ 3

Добавление 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;
});

Версия Vanilla 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;
};

Ответ 4

У меня была эта же проблема и она была решена, добавив обработчик событий для действия игры в дополнение к действию click. Я скрываю элементы управления во время игры, чтобы избежать проблемы с кнопкой паузы.

    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";
      }
    };

Искривление все еще действует смешно, но, по крайней мере, путаница с контролем игры ушла. Надеюсь, это поможет.

У кого-нибудь есть решение?

Ответ 5

У меня было бесчисленное множество проблем, но в итоге появилось решение, которое работает.

В основном код ниже добавляет обработчик клика к видео, но игнорирует все клики в нижней части (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();

    });

Ответ 6

Проблема заключается в том, что внутри элемента <video> возникает внутреннее пузырение... поэтому, когда вы нажимаете кнопку "Воспроизвести", код запускается, а затем сама кнопка воспроизведения запускается: (

Я не мог найти простой (надежный) способ остановить прокрутку клика (логика говорит мне, что должен быть способ, но... он ускользает от меня прямо сейчас)

В любом случае решение, которое я нашел, состояло в том, чтобы поместить прозрачный <div> по размеру видео, чтобы оно соответствовало тому, где отображаются элементы управления... поэтому, если вы нажмете на div, ваш script будет управлять воспроизведением/паузой но если пользователь нажимает на сами элементы управления, то элемент <video> обрабатывает это для вас.

Образец ниже был рассчитан для моего видео, поэтому вам может потребоваться манипулировать размерами относительного <div>, но он должен начать работу

<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>

Ответ 7

Следуя идее 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 (высота элементов управления), это означает, что пользователь нажимает в другом месте, кроме элементов управления. Поэтому мы приостанавливаем или воспроизводим видео.