Как я могу добавить клики для воспроизведения в свои видео HTML5 без вмешательства в собственные средства управления?

Я использую следующий код для добавления функциональности click-to-play к видео HTML5:

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

Он работает нормально, за исключением того, что он вмешивается в собственные средства управления браузером: то есть, он захватывается, когда пользователь нажимает кнопку паузы/воспроизведения, немедленно меняя их выбор и делая кнопку паузы/воспроизведения неэффективной.

Есть ли способ выбрать только часть видео в DOM или, если это не удается, способ захвата кликов в элемент управления частью видеоконтента, чтобы я мог игнорировать/отменить функцию click-to-play, когда пользователь нажимает кнопку паузы/воспроизведения?

ОТВЕТЫ

Ответ 1

Вы можете добавить слой поверх видео, которое захватывает событие click. Затем скройте этот слой во время воспроизведения видео.

(упрощенная) разметка:

<div id="container">
    <div id="videocover">&nbsp;</div>
    <video id="myvideo" />
</div>

script:

$("#videocover").click(function() {
    var video = $("#myvideo").get(0);
    video.play();

    $(this).css("visibility", "hidden");
    return false;
});

$("#myvideo").bind("pause ended", function() {
    $("#videocover").css("visibility", "visible");
});

CSS:

#container {
    position: relative;
}

/*
    covers the whole container
    the video itself will actually stretch
    the container to the desired size
*/
#videocover {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Ответ 2

Я знаю, что это старый вопрос, но я столкнулся с той же проблемой и нашел другое решение! Воспроизведение видео по щелчку, а также приостановка его нажатия. Но в качестве исходного плаката я столкнулся с проблемами с элементами управления. Решил проблему с jquery следующим образом:

$("video").click(function (e) {
    if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
    {
        if(this.paused)
            this.play();
        else
            this.pause();
    }
});

Я проверяю смещение в щелчке и, если он находится над элементами управления, мои функции воспроизведения/паузы ничего не делают.

Ответ 3

Вы можете попробовать event.stopPropagation и посмотреть, работает ли это. Хотя я думаю, что это либо остановило бы собственные средства управления, либо просто ничего не сделало.

$('video').click(function(event) {
  event.stopPropagation();
  if ($(this).get(0).paused) {
    $(this).get(0).play();
  }
  else {
    $(this).get(0).pause();
  }
});

Если браузер рассматривает встроенные элементы управления и видео все части одного и того же элемента (и я считаю, что они это делают), вам, вероятно, не повезло. jQuery event.target не позволит вам рассказать разницу между кликом на видео и щелчком по элементам управления.

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

Ответ 4

Отличные ответы здесь. Спасибо вам за это. Вот трюк, который я понял, чтобы сделать элементы управления доступными для всех, jQuery.

$('#video_player').click(function(e){

    var y = e.pageY - this.offsetTop;

    //Subtract how much control space you need in y-pixels.
    if(y < $(this).height() - 40) 
    {
        //$(this).get(0).play();
        //... what else?
    }

});

Ответ 5

Решение Torsten Walter работает хорошо, и это довольно элегантное решение проблемы, и это, вероятно, лучший способ справиться с этим, даже если он не обрабатывает щелчок -в-пауза. Однако его решение заставило меня задуматься о хакерском способе сделать это, и я придумал это:

Разметка

<div id="container">
  <div id="videocover">&nbsp;</div>
  <video id="myvideo" />
</div>

JavaScript

$('#videocover').click(function(event) {
  var video = $('#myvideo')[0];
  if (video.paused) {
    video.play();
  }
  else {
    video.pause();
  }
  return false;
});

CSS

#container {
  position: relative;
}

#videocover {
  position: absolute;
  z-index: 1;
  height: 290px; /* Change to size of video container - 25pxish */
  top: 0;
  right: 0;
  bottom: 0;
  left;
}

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

Это, конечно, kludge, так как он:

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

Но я подумал, что я поместил его там.