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

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

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

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

Сценарий:

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

Я знаю, что это старый вопрос, но я столкнулся с той же проблемой и нашел другое решение! Воспроизведение видео по клику, а также приостановка его по клику. Но в качестве оригинального постера я столкнулся с проблемами с управлением. Решил проблему с 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();
    }
});

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

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

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

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

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

Отличные ответы здесь. Спасибо за это. Вот трюк, который я придумал, чтобы сделать элементы управления кликабельными, все 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?
    }

});

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

Разметка

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

По сути, он постоянно держит кликабельную обложку, чтобы обрабатывать функции «нажми, чтобы воспроизвести» / «нажми, чтобы приостановить», но следит за тем, чтобы обложка не перекрывалась с элементами управления в нижней части видео.

Это, конечно, кладж, так как:

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

Но я решил выложить его там.