Home › Forums › JavaScript › JS Hide when video is playing
- This topic is empty.
-
AuthorPosts
-
December 4, 2014 at 4:04 pm #189963lschoen114Participant
Hi All!
I’m working on a website (www.doorwaymortgage.com) where I’m using JSvideo to accomplish full screen video on play.
I would like to be able to hide the quick contact form and possibly the navigation when the video is playing, with it coming back after it is finished, or if the video is paused.
Does anyone know if/how this is possibly, given that the form is not located within the video?
I tried this, with no success:
example_video_1.on("play", function () { $('.video-form').css('display', 'none'); }); $(this).load();
December 4, 2014 at 7:33 pm #189971ShikkedielParticipantexample_video_1 .on("play", function () {$('.video-form').hide()}) .on("pause ended", function() {$('.video-form').show()}) .on("playing", function () {$('.video-form').hide()});
Something like this maybe?
Not sure what the $(this).load() would be for…December 5, 2014 at 12:11 am #189976ShikkedielParticipantI’ve used something similar for playing audio so I know it should work but it does raise a few questions that I can’t really find an answer too.
So if it’s not considered a topic hijack, I’d like to pose a few to the jQuery wizzes out there myself.
Is it so that the second .on is conditional to the third? It’s been added to hide the form again after being paused (and started again) – or is there no difference at all if this is used :
example_video_1 .on("play playing", function () {$('.video-form').hide()}) .on("pause ended", function() {$('.video-form').show()});
Also, should any handlers maybe be unbinded? I noticed with my audio some of the events fire quite a lot, creating multiple handlers I suspect.
example_video_1 .on("play playing", function () {$('.video-form').hide()}) .on("pause", function() {$('.video-form').show()}) .one("ended", function() {$('.video-form').show(); $(this).off("play playing")});
Lastly – is this approach of chaining .on good practice at all?
Thanks in advance for any expert insight. If I’m intruding, I hope a separate topic can be created.
December 5, 2014 at 11:59 am #190023lschoen114ParticipantThanks Shikkediel!
I got it to work with the following
$( "video" ) .on("play", function () {$('.video-form').hide()}) .on("pause ended", function() {$('.video-form').show()}) .on("playing", function () {$('.video-form').hide()});
And since it’s the only video on the page, it works well.
Thanks!
December 5, 2014 at 3:48 pm #190039ShikkedielParticipantGlad I could help – and thanks for the insight. Made a small pen that proves the point (that chaining order is irrelevant) :
http://codepen.io/Shikkediel/pen/EaPyae
The code could probably be simplified to this then :
$( "video" ) .on("playing", function () {$('.video-form').hide()}) .on("pause ended", function() {$('.video-form').show()});
But as long as it works…
Not how ‘play’ fires twice every time by the way.
December 5, 2014 at 6:27 pm #190043ShikkedielParticipantWanted to add that the above seems obvious but I learned that this :
$( "audio" ) .trigger('play') .on("playing", function () {// do something}) .on("pause ended", function() {// do something});
does not go well with IE, while this :
$( "audio" ) .on("playing", function () {// do something}) .on("pause ended", function() {// do something}) .trigger('play');
seemed to work fine. Hence my curiosity…
Although most likely less related to chaining methods in general.Finally, I don’t think unbinding the events handlers is an issue, they do not continue to fire like a mousemove would for example.
April 3, 2015 at 6:26 am #199653ShikkedielParticipantThe pen two posts back went underground…
Edit – that pen’s acting very weird on Opera but I’ll leave it there…
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.