Why does not the jquery video stop?

Hello. Start video playback works fine, but the video does not want to stop on click, what could be wrong?
<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!

21a94ddb64af41d2a35c9a6fda8da670.PNG

The first picture is the external view by default. This picture is the poster, which is taken by src in html.
By pressing the button in the upper right corner of the panel with the rating moves down and starts playing the video. So, after the button is pressed, the class of the icon font changes and instead Play symbols, the cross appears. You need to by clicking on the cross icon, the video is not stopped, and returned his default state as 1 picture. If the button to add the video properties video.currentTime = video.paused ? 0 : video.currentTime; it is not what you need. Yes, the video returns to the beginning, but the poster as default does not appear.(figure 2)e66e23dd3dc84308b71dce14667bd1aa.PNG

I tried clicking on the cross make $('#video').replaceWith(on same video) to achieve this effect, the poster appears, the playback is zeroed, but if you click on the Play icon again(it appeared after clicking on the cross), then is reproduced on the background sound from the video that was removed from the DOM and replaced by a new video. And here's an old video playing in the background, and with the new, nothing happens. What's the problem?(( Please tell me, I might have it myself even decide, you just have to know why the item is not removed from the DOM(although apparently in the code it is removed...)
July 9th 19 at 14:04
1 answer
July 9th 19 at 14:06
Solution
$(function(){
 var video = $('#video')[0];
 $('.input-play').on('click', function(){
 $('i', this).toggleClass('icon-play-circled2 icon-cancel');
 video[video.paused ? 'play' : 'load']();
});
});
Thank you very much! - Shaniya commented on July 9th 19 at 14:09
Please tell me why [0]? - Shaniya commented on July 9th 19 at 14:12
And is there any function that stops the video and returns it to the default state? - Shaniya commented on July 9th 19 at 14:15
Please tell me why [0]? - it's kind of the same as $('#video').get(0) (googled it)
And is there any function that stops the video and returns it to the default state? - I do not quite understand - isom_Stark commented on July 9th 19 at 14:18
when talking about the function mean does not stop the video on pause, and view completion as a button box on the TV remote control. The progress slider back to the beginning again and seemed to be a poster like we haven't started watching videos - Shaniya commented on July 9th 19 at 14:21
Try to add after:
video[video.paused ? 'play' : 'pause']();
It
video.currentTime = video.paused ? 0 : video.currentTime;
- isom_Stark commented on July 9th 19 at 14:24
: Thanks, I'll try - Shaniya commented on July 9th 19 at 14:27
Look, I wrote this video[video.paused ? 'play' : $(this).replaceWith(")]; my Goal is to reset the video and to return the poster, which is to play videos. So, all is replaced, but when again click on button continues to play the old video that was removed from the DOM. But what the hell the video is still recorded, apparently in the cache. How you can once and for all removing the video and paste the same, but brand new? - Shaniya commented on July 9th 19 at 14:30
Honestly, I don't understand what you're trying to do. - isom_Stark commented on July 9th 19 at 14:33
in the end the question everyone will now describe - Shaniya commented on July 9th 19 at 14:36
: Described - Shaniya commented on July 9th 19 at 14:39

Find more questions by tags Web DevelopmentjQueryJavaScript