#399 ✓ staged
dseif

Pausing the video when a link is clicked should be a plugin

Reported by dseif | March 11th, 2011 @ 06:00 PM | in 0.6

After talking a bit with Rick, as well as having a discussion in my class about #339, I think that pausing the video when a link is clicked should be handled as a plugin, and by default the video should continue playing as thats what the rest of the web does.

Comments and changes to this ticket

  • Scott Downe

    Scott Downe March 11th, 2011 @ 06:43 PM

    As a library, our job is to not decide how things should be, but one of many ways they could be, by providing a way for developers using our library to easily define what they want through various options.

    You have to make this feature optional, and not obstructive to others who do not wish to use this feature. Example, if I want this feature, I can specify it, but if I do not want it, I should not need to deselect it, or even know it exists.

    I should also be able to have it in one spot on the page, and not on another.

  • dseif

    dseif March 11th, 2011 @ 08:03 PM

    So having it as a plugin should acomplish all of that, right? Or am I wrong in assuming it should be a plugin?

  • Scott Downe

    Scott Downe March 14th, 2011 @ 11:28 AM

    • Milestone set to 0.5
    • Milestone order changed from “47” to “0”

    Been thinking about this, and I think this is something some, but not all plugins could benefit from.

    The library is popcorn, and thus must be abstract to how things should be, plugins, though can make assumptions on how things should be, although sparingly.

    This is the reason we created the plugin architecture in the first place, so if someone else wanted it to be done a different way, they can add that case to the plugins.

    So, what you should do is find all current plugins that create links, and pause the video when those links are clicked.

    To clarify, this is not a standard feature in popcorn, and this is not a simple plugin or effect. This is a modification to existing plugins, imo.

  • dseif

    dseif March 14th, 2011 @ 12:54 PM

    Alright cool, makes sense. So, by default the functionality is going to be off correct? And if the user wants to be able to do this for any particular plugin with links, Im assuming I should add another parameter to options, something like onClickPause, which would either be true or false (false by default). Is this sort of what you were thinking?

    Also, sorry if I shouldn't have created another ticket for this. I created it because it seemed to deviate from the original plan of the initial ticket, so I created a new ticket. Lemmie know if I shouldn't have done this.

  • edsfault

    edsfault March 16th, 2011 @ 04:31 PM

    • Assigned user set to “edsfault”
  • edsfault

    edsfault March 16th, 2011 @ 04:36 PM

    Ok, so my understanding is, We will have something that looks like this:

    var p = Popcorn('idOfVideoElement')
    //      .footnote({
    //         .......
    //         .......
    //      })
    //      .code({
    //         .......
    //         .......
    //      })
            .pauseOnLinkClicked( true ) ;
    

    This should stop the video when any link on the page is clicked.

  • dseif

    dseif March 16th, 2011 @ 04:52 PM

    I don't know if you'd even have to specify true or false, as by default it will be off, and using the plugin should turn it on, so I don't think it should have to take any arguments. That's just my guess, I may be wrong.

  • edsfault

    edsfault March 21st, 2011 @ 10:30 AM

    I don't think it's too hard to get all of the links of the page, and make sure they all pause the video. The problem I am having is "What happens when new links are created programmatically? by javascript/ajax?" I was thinking of perhaps overloading the anchor element all together. Any suggestions are dearly appreciated

  • Rick

    Rick March 21st, 2011 @ 11:28 AM

    I'd suggest event delegation. Add your click handler to the document (instead of every anchor element), when a click occurs, check the type of element that was clicked, if it matches, then do logic, if not, ignore.

    
    
    document.addEventListener("click", function( event ) {
        
      if ( event.target.tagName === "A" || event.target.parentNode.tagName === "A" ) {
    
        Popcorn.instances.forEach( function( video ) {
    
          video.pause();
    
        });
    
      }
    }, false);
    
  • David Humphrey

    David Humphrey April 1st, 2011 @ 11:15 AM

    Ed, where are we at with this? Seems stalled. Can we get this done for 0.5?

  • edsfault

    edsfault April 1st, 2011 @ 01:33 PM

    I believe so, Sir. I am currently having a bit of a problem with adding the listener to the document (rick's post). Would this work if the settings of cancelable and bubblable are changed?

  • Steven W

    Steven W April 19th, 2011 @ 11:26 AM

    • Milestone changed from 0.5 to 0.6
    • Milestone order changed from “24” to “0”
  • edsfault

    edsfault April 30th, 2011 @ 02:44 PM

    Hello, I am currently working on this plugin.Any idea what tests for this plugin would look like or work like?

  • Rick

    Rick April 30th, 2011 @ 03:05 PM

    programmatically trigger a click on a link, then check the state of the media, paused or not

  • edsfault
  • David Seifried

    David Seifried May 17th, 2011 @ 10:56 AM

    • Milestone changed from 0.6 to 0.7
    • Milestone order changed from “1” to “0”
  • Rick

    Rick May 18th, 2011 @ 09:43 AM

    • State changed from “peer-review-requested” to “super-review-requested”
    • Milestone changed from 0.7 to 0.6
    • Assigned user changed from “edsfault” to “annasob”
    • Milestone order changed from “2” to “0”

    Retargeting to 0.6 (No reason to push to 0.7)

    Tested: paused test suite;

    Passing in:

    • FF 3.6, 4.x, 6.x

    • Chrome 11, 12, 13

    Failing in:

    *

  • Scott Downe

    Scott Downe May 18th, 2011 @ 11:04 AM

    • Milestone order changed from “1” to “0”

    I still think "this is not a standard feature in popcorn, and this is not a simple plugin or effect. This is a modification to existing plugins, imo."

    So I still feel this should of been a case by case basis. I may change my mind, but this seems like a hack.

    Also to quote myself again :P "The library is popcorn, and thus must be abstract to how things should be, plugins, though can make assumptions on how things should be, although sparingly."

    I am fine with plugins doing this as a not optional thing, if on a case by case basis. Example using image plugin:

            options.link = document.createElement( 'a' );
            options.link.addEventListener( "click", function() {
    
              self.media.pause();
            });
            options.link.style.position = "relative";
            options.link.style.textDecoration = "none";
    
  • Rick

    Rick May 18th, 2011 @ 11:42 AM

    @Scott,

    It's pretty optional being that it's a plugin (that I'm not required to use), and still then requires a special option flag to be passed to the constructor when the instance is created (that I'm not required to actually do)

    /end 2 cents.

  • Scott Downe

    Scott Downe May 18th, 2011 @ 12:04 PM

    I'm really not THAT concerned, but I felt I had to vote my 2 cents as well :)

    I would like to see what Anna has to say on this. If the both of you are fine with it, I'll get on that ship :)

  • annasob

    annasob May 18th, 2011 @ 02:27 PM

    • State changed from “super-review-requested” to “review-looks-good”

    Ok so i like it! If you make two instances of popcorn and specify that one should not pause it wont.

    • lint passes
    • unit test and demo work in fedora: Chrome, firefox 3.6 and 4.0

    SR+

  • annasob

    annasob May 18th, 2011 @ 02:37 PM

    • State changed from “review-looks-good” to “staged”

    Staged in annasob/popcorn-js commit

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Referenced by

Pages