Почему не работает остановка видео jquery?

Question

[Worddoc]

Здравствуйте. Начало проигрывания видео работает хорошо, но видео никак не хочет останавливаться по клику, в чем может быть дело?

<div class="input-play"><i class="icon-play-circled2"></i></div>
		<video src="video/guardians.mp4" poster="img/main2.jpg" id="video"></video>

if($('.input-play i[class="icon-play-circled2"]')) {
    $('.input-play').click(function(){
      $('.input-play i').toggleClass('icon-play-circled2');
      $('.input-play i').toggleClass('icon-cancel');
      $('#video').get(0).play();
    })
  }
  else if($('.input-play i[class="icon-cancel"]')) {
    $('.input-play').click(function(){
      $('.input-play i').toggleClass('icon-cancel');
      $('.input-play i').toggleClass('icon-play-circled2');
      $('#video').get(0).pause();
    })
  }

BOWER!



Первый снимок, это внеший вид по дефолту. Эта картинка - постер, которая берется по src в html.
По нажатию кнопки в верхнем правом углу, панель с рейтингом съезжает и начинается воспроизведение видео. Так вот, после того, как нажата кнопка, класс иконочного шрифта меняется и вместо Play картинки появляется крестик. Нужно чтобы по нажатию на крестик, видео не останавливалось, а возвращало себе состояние по умолчанию, как на 1 картинке. Если по нажатию на крестик добавить в свойства видео video.currentTime = video.paused ? 0 : video.currentTime; то это не то что нужно. Да, видео возвращается в начало, но постер как по дефолту не появляется.(рисунок 2)

Я попробовал по нажатию на крестик сделать $('#video').replaceWith(на то же самое видео), чтобы добиться этого эффекта, постер появляется, воспроизведение обнуляется, но если нажать на Play иконку опять(она появилась после нажатия на крестик), то воспроизводится на фоне звук от видео, которое было удалено из DOM и замещено на новое видео. И вот играет старое видео на фоне, а с новым ничего не происходит. В чем проблема?(( Подскажи пожалуйста, я возможно ее сам даже решу, просто нужно знать, почему элемент не удаляется из DOM(хотя внешне в коде он удаляется...)

Answer 1

[Bowen]

$(function(){
	var video = $('#video')[0];
    $('.input-play').on('click', function(){
       $('i', this).toggleClass('icon-play-circled2 icon-cancel');
       video[video.paused ? 'play' : 'load']();
    });
});

Comments

[Worddoc]

Спасибо большое!

[Worddoc]

Скажи пожалуйста, почему [0]?

[Worddoc]

И есть ли функция, которая прекращает показ видео и возвращает его в состояние по умолчанию?

[Bowen]

Скажи пожалуйста, почему [0]? - это вроде тоже самое что и $('#video').get(0) (прогуглите это)
И есть ли функция, которая прекращает показ видео и возвращает его в состояние по умолчанию? - не совсем понял

[Worddoc]

Bowen: когда говорил про функцию, имел в виду не остановка видео на паузу, а завершение просмотра как кнопка квадратик на пульте от телевизора. Т.е. чтобы ползунок прогресса вернулся в начало и снова показался постер, как будто мы и не начинали просмотр видео

[Bowen]

Попробуйте добавить после:
video[video.paused ? 'play' : 'pause']();
Это

video.currentTime = video.paused ? 0 : video.currentTime;

[Worddoc]

Bowen: Спасибо, попробую

[Worddoc]

Слушай, я написал так video[video.paused ? 'play' : $(this).replaceWith('')]; Цель моя обнулить видео и вернуть постер, который стоит до проигрывания видео. Так вот, всё заменяется, но когда опять жму на кнопку, продолжает играть старое видео, которое было удалено из DOM. Но какого-то черта видео всё таки записано, видимо в кеше. Как можно раз и навсегда извлечь видео и вставить аналогичное, но абсолютно новое?

[Bowen]

Честно говоря, я не понимаю что вы пытаетесь сделать.

[Worddoc]

Bowen: в конце вопросе всё сейчас опишу

[Worddoc]

Bowen: Описал