865848 - Only load Popcorn Maker after thumbnail has been clicked

Status: RESOLVED FIXED

(Webmaker Graveyard :: Popcorn Maker, defect)

Description

[Brett Gaylor [:brett]]

Multiple popcorn videos embedding on pages causes huge resource constraints - see:

What I'd like to see us do is have an iframe that only loads a thumbnail, and once that is clicked, then load the embedded iframe.

Scott, I know you have something like this in the works but can't find the bug.

This would also solve bug 865765 regarding animated gifs only being activated on click.

Comment 1

[Brett Gaylor [:brett]]

page with multiple embeds:
http://www.buzzfeed.com/kevintang/10-perfectly-paired-songs-gifs

Comment 2

[Scott [:thecount] Downe]

bug 862811

This has been bugging me for some time.

Comment 3

[Brett Gaylor [:brett]]

awesome.  This'll become a bit of a tracking bug, then, and i'll list that as a dependency.

Comment 4

[Matthew Schranz [:mjschranz]]

My discussions from the call today with Brett led me to believe I would be doing this as well this week.

Let me know otherwise Scott if I'm taking this ticket incorrectly.

Comment 5

[Matthew Schranz [:mjschranz]]

Attachment: https://github.com/mozilla/butter/pull/1679

Quick crack at this for demoing for tomorrow. This seems right so far, but I definitely want you to look at this Scott as your head as been in this code along with the problems behind all of this a lot.

Comment 6

[Matthew Schranz [:mjschranz]]

Comment on attachment 747751 [details] [review]
https://github.com/mozilla/butter/pull/1679

Also going to get Kate to glance over this from a UI stand point.

Comment 7

[Matthew Schranz [:mjschranz]]

Attachment: https://github.com/mozilla/popcorn.webmaker.org/pull/2

New repo is up and running. Use this pull request/branch now.

Comment 8

[Scott [:thecount] Downe]

Two things in the pull request, but I am finding higher level issues.

1. There is no feedback when a thumbnail has been loaded in, that it was actually loaded in.

Two reasons why this is not obvious.

A. It auto saves the project. If my project was already in a clean state, it set it to dirty, saves, then it is clean. So it looks like nothing changed. Took me some time to try the actual embed, and I was surprised to see it updated.

B. There is no preview in the editor of the image anywhere.

So, it should probably not save the project, and instead mark it as dirty and let me save. From here, show a preview of the thumbnail somewhere. Preferably over the canvas if it has yet to be played and inside the little thumbnail box. New reloads of the page would have the thumbnail in the preview work just like the exported project. How much of this we can do, and can do later is up to you, but let me know.

2. Finding the new functionality of the embed to not be obvious.

A. I don't like the autoplay on click. This ticket called for "do not load the video", not autoplay. Did the direction change and not get into this ticket?

B. I am not sure, but the initial comment in this ticket called for not loading the embed until the thumbnail is clicked. Did this mean not show any UI until click? if so, that might solve some of my other issues. (the autoplay one and the preview on the cavnas itself might not be needed if that is the idea, so consider adding the preview just to the location you drag it into)

3. I kinda think this should continue to be something we turn on via an embed query string option. Just use the preload option. Example of how this would look.

A. If I have preload on, display the thumbnail as a poster, and load any UI, much like how you do things now but no autplay. Let the UI do what it does. So a click on play plays, a click on the timeline scrubs but does not play.

B. If I have preload off. Make it so nothing is displayed but the thumbnail. So no UI, no big play button, no scrubber, controls, and it waits for a click then loads everything, but does not play. We can consider, at this point, doing what we do in A. example: still displaying the thumbnail as a poster.

I am cool with breaking it up into as many tickets as makes sense. Also willing to help out with soe of those tickets.

I think issue 1 is good for another ticket.

This ticket's description sounds like it should solve what I listed in 2 and 3B.

You solved 3A, minus the autplay, which I don't agree with. You can move that into a new ticket if you like. I am running for lunch, and I'll think on what I just said.

Comment 9

[Scott [:thecount] Downe]

Comment on attachment 748857 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/2

The tldr.

1. Remove the autoplay on click.
2. Make sure we are still using preload=none to do this.

Everything else I said can be a new ticket.

Comment 10

[Matthew Schranz [:mjschranz]]

(In reply to Scott [:thecount] Downe from comment #9)
> Comment on attachment 748857 [details] [review]
> https://github.com/mozilla/popcorn.webmaker.org/pull/2
> 
> The tldr.
> 
> 1. Remove the autoplay on click.

I strongly disagree on the auto play being triggered by the play button. Think about how YouTube react's here with embeded videos. With YouTube as soon as you press that play button the video automatically starts playing once sufficient data has been buffered. I'm assuming you spent time with Kate going over this, but really at this point I think forcing the user to hit play twice in some fashion is the wrong choice.

> 2. Make sure we are still using preload=none to do this.

Can you expand on this? Right now preload=none is still forcing the wait for popcorn data to be loaded. The thumbnail doesn't prevent any of this. The only thing is I forced my patch to always add the preload=none rather than manual entry. The thumbnail image is always there regardless is simply removed on the big play button hit. As of writing this, the controls in the timeline might not trigger it.

Comment 11

[Scott [:thecount] Downe]

1. Yes, clicking play should play. That's not autoplay. With your patch though, if I seek, it starts playing. This is autoplay.

2. Right now, by default we preload. If someone sets preload=none, it waits for user interaction before doing anything. We already do this, and ends up being 90% of what's being requested in this ticket. Just make it so in this path, we also display a thumbnail. We can iterate on the click to load, to also dispatch what the click is, so if it is a play, we preload then play, if it is a seek, we preload then seek, and same with volume. This would solve the pain in 1. This might be the heart of the issues in this ticket.

Comment 12

[Scott [:thecount] Downe]

Looping Brett into this for clarification on.

"What I'd like to see us do is have an iframe that only loads a thumbnail, and once that is clicked, then load the embedded iframe."

Does this mean display no UI, no controls, nothing but a thumbnail until a user clicks?

Comment 13

[Brett Gaylor [:brett]]

I would be fine with displaying UI if it didn't actually load content. Part of the struggle right now is when you have many popcorn embeds on a page - the resource loading drags the page to a crawl.

I'm not sure of the current state of Matt's patch, but I think we want something like:

-We can see UI, but nothing loads
-Once a user clicks the thumbnail/play, we start loading and flash the throbber
-When enough is loaded, we play.

Comment 14

[David Humphrey (:humph)]

I'd suggest you consider having the image load with a big "Play" triangle overlay, but not the full controls; this is what YouTube does.  So we'd basically just have a bare bones doc with 2 images (poster + play triangle), some css to do the positioning, and some JS to trigger the proper load on click.  Then we can wait on the click, and replace the entire contents of the iframe with the controls + video + popcorn.js stuff.

Comment 15

[Matthew Schranz [:mjschranz]]

I was talking to Scott and Kate about that sort of idea last night. As it stands right now anytime preload=none is used we have controls displayed that have no information available to them and as noted by Scott, one can still interact with parts of them ( or in the case of remix/share etc they do nothing ).

I liked the idea of mimicking how embeded YouTube videos look where it's just their play button and the poster frame. When the big play button is pressed, it removes our thumbnail/poster frame and slides up our controls all nice and ready to use. Scott and I discussed just making sure interactions with these parts of the controls worked/didn't work as expected for now but really I like this solution better and frankly it's easier to implement and see what people think.

Comment 16

[Matthew Schranz [:mjschranz]]

Comment on attachment 748857 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/2

I'm really fond of the idea of making it like YouTube's embeds. The only issue at this point is that I'm thinking the attribution information should still be clickable before the video has started playing which would require more code changes at this point so I'm leaving it out for now.

Anyway, thoughts? I tried having a transition to slide the controls up on play but that actually seemed pretty confusion and wrong to be, so it's just a quick transition on opacity for now.

Comment 17

[Matthew Schranz [:mjschranz]]

Comment on attachment 748857 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/2

Adding Chris as a review to help land this.

Comment 18

[Scott [:thecount] Downe]

Comment on attachment 748857 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/2

I took a look at it, and found a line that curious.

I wonder if you can explain it? Other than that, I think this is sorted out.

I did find a bug that looked like it was caused by it, but it was unrelated and I filed and am fixing it. I am still curious why the line is needed though.

Comment 19

[Scott [:thecount] Downe]

that is curious*

Comment 20

[Matthew Schranz [:mjschranz]]

I found that because of the display/hide loading triggers in sequencer which would access the bigplay button element it would stick around after the first click if preload=none.

Not going to land this for now until we loop back on that, but I've updated and rebased the PR.

Comment 21

[Scott [:thecount] Downe]

Comment on attachment 748857 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/2

So, I think land it. I looked at it, and once understood, it's not too bad.

It was just a red flag when I saw sequencer being touched, and needed to stop and really look at what was happening. Took a lot longer to review because of that one line. Sorry about that.

I filed bug 873478 which I plan on simplifying the way we handle the big play button.

It is kinda gross how everyone has to touch it, and that worries me, so let's iterate and fix it in a new ticket.

Comment 22

[Mike Beltzner [:beltzner, not reading bugmail]]

Please to be landing!

Comment 23

[[github robot]]

Commit pushed to master at https://github.com/mozilla/popcorn.webmaker.org

https://github.com/mozilla/popcorn.webmaker.org/commit/f52b95ae1938e25cb3a038d224e7ce0ab958bd73
Fix Bug 865848 - Use project specified thumbnail as a preview/overlay of video area.