Хватит проигрывать (не останавливать) HTML5 видео при наведении мыши

Question

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

jsbin: https://jsbin.com/fenixinuku/edit?html,css,js,output

HTML:

<video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>

JS:

$(document).ready(function() {
  $(".myvideo").on("mouseover", function(event) {
    $(this).get(0).play();

  }).on('mouseout', function(event) {
    $(this).get(0).pause();
  });
})

РЕДАКТИРОВАТЬ: Спасибо, ребята, на основеВаши ответы Я сделал альтернативу этому, разместив видео-постер в качестве первого кадра (спасибо, Теренс Иден, за предложение).Единственная небольшая проблема заключается в том, что изображение плаката мигает при наведении мыши. Есть ли лучшее решение?

HTML:

   <video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" poster="https://www.w3schools.com/images/w3html5.gif"></video>

JS:

$(document).ready(function() {
  $(".myvideo").on("mouseover", function(event) {
    $(this).get(0).play();

  }).on('mouseout', function(event) {
    this.load();
  });
})

демо 2 jsbin: https://jsbin.com/kivisutici/1/edit?html,css,js,output

Answer 1

Это пример кода для остановки видео с использованием функции паузы при наведении мыши в HTML5.

<script>
function testover(e)
{
//e.src="movie.mp4";
e.play();
}
function testout(ee)
{
ee.pause();
ee.currentTime =0;
//ee.src=null;
}
</script>
<video width="320" height="240" onmouseover="testover(this)" onmouseout="testout(this)" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Пожалуйста, пренебрегайте, если это бесполезно.

Answer 2

Вам нужно изменить mouseout на это

.on('mouseout', function(event) {
    $(this).get(0).currentTime = 0
    $(this).get(0).pause();
  });

Демо

Answer 3

Пожалуйста, попробуйте следующее и дайте мне знать, если это сработало для вас.

// Ссылка здесь: https://www.w3schools.com/tags/av_prop_currenttime.asp

$(".myvideo"). mouseout(function() {
    $(this).get(0).currentTime = 0;
});

or 

$(".myvideo"). mouseout(function() {
    $(this).currentTime = 0;
});

Answer 4

Вы можете сделать две вещи.

Во-первых, установите текущее время на 0.

$(this).get(0).currentTime = 0;

, которое возвращает позицию игрока на 0 минут, 0 секунд - как если бы выобновил страницу.

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

Answer 5

Удаление свойства видео src и добавление его снова должно работать.Попробуйте это внутри события mouseout:

var video = $(this).get(0);
var source = video.src;
video.src = "";
video.src = source;