Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript JS Hide when video is playing

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #189963
    lschoen114
    Participant

    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();
    
    #189971
    Shikkediel
    Participant
    example_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…

    #189976
    Shikkediel
    Participant

    I’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.

    #190023
    lschoen114
    Participant

    Thanks 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!

    #190039
    Shikkediel
    Participant

    Glad 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.

    #190043
    Shikkediel
    Participant

    Wanted 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.

    #199653
    Shikkediel
    Participant

    The pen two posts back went underground…

    So here’s it’s stunt double.

    Edit – that pen’s acting very weird on Opera but I’ll leave it there…

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.