Closed Bug 796049 Opened 12 years ago Closed 11 years ago

Add video functionality to mozilla.org slideshow

Categories

(www.mozilla.org :: Bedrock, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Future

People

(Reporter: tleingruber, Assigned: sgarrity)

References

Details

(Whiteboard: u=user c=ux p=2)

Attachments

(6 files)

We would like to have a video-functionality implemented into the slide-show on https://www.mozilla.org, similar to the video-snippets. 

Thoughts: I imagine the video to unfold downwards after it's clicked and the video to start playing. Along the lines of the video-player work that is currently done here: https://bugzilla.mozilla.org/show_bug.cgi?id=770225

Preferred deadline is end of October.
Assignee: hhabstritt → nobody
Component: Webdev → Information Architecture & UX
Product: mozilla.org → www.mozilla.org
Assignee: nobody → hhabstritt.bugzilla
Whiteboard: u=user c=ux p=2
Target Milestone: --- → Future
Wireframes are subject to change once developer and visual designer have had a chance to review.
Just a reminder that this has the same due date as the Firefox Snippets bug https://bugzilla.mozilla.org/show_bug.cgi?id=770225
Is the video player portion of this, including the share buttons, being built out for the Firefox Snippets already in a way that could be re-used here? The obvious difference is that the snippets are Firefox-only, and this needs to work in other browsers.
(In reply to Steven Garrity from comment #3)
> Is the video player portion of this, including the share buttons, being
> built out for the Firefox Snippets already in a way that could be re-used
> here? The obvious difference is that the snippets are Firefox-only, and this
> needs to work in other browsers.

Yes, we decided that the UX, designs and functionality would mirror the video snippets as much as possible and we're hoping to reuse a lot of the code.
(In reply to Mike Alexis [:malexis] from comment #4)
> Yes, we decided that the UX, designs and functionality would mirror the
> video snippets as much as possible and we're hoping to reuse a lot of the
> code.

Is there a developer working on the snippets implementation yet? Would probably make sense for one person/team to handle both.
I'm working on the snippet implementation, and doing my best to make a cross-browser library that will do what we want. I probably won't be able to make this particular change for a while though, given the Flicks changes and other work in the queue for me. 

How hard of a date is the end of October? The snippets won't be linking to these promos at all, so I don't see why this has to launch at the same time.
Assignee: hhabstritt.bugzilla → nobody
Component: Information Architecture & UX → Bedrock
Depends on: 797380
Mkelly, I just added Tobias.

Tobias, can you answer Mkelly's question?
Mkelly - Right, this is not related to the snippet-traffic. Please propose a new deadline that you think is doable!

We would still like it to be online soonish because currently we have a simple banner on display and we're not so happy with it.
Blocks: 810830
The code used in the video snippet is located at https://github.com/mozilla/snippets/tree/master/video-snippets/flicks-2012-video. Whoever ends up working on this can extract and fix it up. It's been code reviewed but could use another review, and QA has tested it on release Firefox.

Notably, it uses -moz CSS to pull in the close button, so there is definitely some work in making it cross-browser.
Hi all - The code for the video-snippet is done (and live on "about:home" right now) as mkelly just mentioned.

WebProd - I just submitted the webprod request-form for this.

ckoehler - Not sure if you have already transitioned to your new role, but lessons learned + I'd like to have a webprod to oversee things and to help us with a timeline on it's implementation. Once it's ready I need to run it by a bunge of people again for last reviews and QA, of course. Please me know on how-to proceed from here.

I would like to do things in 2 seperate bugs. The one you're reading is for the technology and this one for the assets we need specifically for the (first) Flicks-banner: https://bugzilla.mozilla.org/show_bug.cgi?id=810830
FYI I'm still trying to get a webprod (+dev) assigned to this so we can get started.
(In reply to Tobias Leingruber (@tbx) from comment #11)
> FYI I'm still trying to get a webprod (+dev) assigned to this so we can get
> started.

Is there a specific promotion or event that you are trying to hit with the www.mozilla.org slideshow video?

We have been consumed with the Sociail API, State of Mozilla, and other projects over this past sprint. 

We will get it added to our sprint backlog and see if we can get it done this next sprint that starts next week.
Chris - Thanks for the update, sounds good!

We are targeting to go live with the Flicks website (or parts of it) and promotions around it on or after January 22nd. We would like to make use of all available channels then, also this video-banner.
Blocks: 815529
Tobi: I created a Firefox Flicks 2013 tracking bug and made this bug block that.
Tobias, FYI on developers and dates.

I spoke with sgarrity in IRC, we think we can have this complete by the 21. Stephen will be the developer with assistance from Michael as needed.

I will track this date on the flicks calendar.
Assignee: nobody → steven
Sounds good, thanks for the update Ben!
A few questions: Will this video (and future videos on home page promos) be hosted in Vidly, like the other Firefox Flicks videos, or will it be a collection of .mp4/webm/ogv files on video.mozilla.org with us providing our own HTML5/flash player, as we do on other mozilla.org videos.
Steven - I think mkelly can answer this one correctly. I don't think this has anything to do with vid.ly though. The video should be hosted on our own servers, similar to the video-snippet files.
These will be hosted on video.mozilla.org. 

sgarrity: Do you have any requirements for videos, i.e. size, format, resolution, etc?
(In reply to Michael Kelly [:mkelly] from comment #19)
> These will be hosted on video.mozilla.org. 
> sgarrity: Do you have any requirements for videos, i.e. size, format,
> resolution, etc?

The standard set of Flash-friendly MP4 and WebM (and maybe OGV?) encodings should be fine. We're looking at using the JWplayer - is there another HTML5/Flash video player that is preferred for mozilla projects?
(In reply to Steven Garrity from comment #20)
> The standard set of Flash-friendly MP4 and WebM (and maybe OGV?) encodings
> should be fine. We're looking at using the JWplayer - is there another
> HTML5/Flash video player that is preferred for mozilla projects?

Not that I know of. Adding Rik, pmac, and craigcook in case they do.
Have we looked at http://flowplayer.org/ ? Seems good.
Blocks: 816565
Steven:

Checking in, can you let me know if this is still tracking for completion friday 12/21?
Flags: needinfo?(steven)
(In reply to Ben (:bensternthal) from comment #23)
> Checking in, can you let me know if this is still tracking for completion
> friday 12/21?

Yes, we'll have it ready for Friday. Ready for testing before then too. Will post an update as soon as it's ready for review.
Flags: needinfo?(steven)
Tobias - do you have real content for this we can use, I know we want this for flicks in jan but given the age of the bug I thought you might have content from when you originally filed. 

Maybe the fundraising promo this bug blocks?
Flags: needinfo?(tleingruber)
Thanks for asking - Copy and video both don't excist yet.
I haven't heard about the fundraising prome bug.

Info about content: 
- We'll use the upcoming teaser-video with this, but that is blocked by the video-bumper which is blocked by the final creative. I hope to have a video-file for you in the second week of January
- For copy, video and localisation of this I created this "assets" bug: https://bugzilla.mozilla.org/show_bug.cgi?id=810830
- I will let Matej know about this so he can create a new copy matching the teaser.

Now to answer your question, for testing purpose, please use the following:
Copy: "Watch one of last year’s winning entries to get inspired for this year’s contest."
Video: https://dl.dropbox.com/u/12343904/flicks-snippet-videos/Snippet%20Squares%20%281%2C5mb%29.webm

Question: I assume we will be able to localize this video-slide, is that true?
Flags: needinfo?(tleingruber)
No longer blocks: 816565
Cool, is there a way I can see a preview of it?
Steven, just checking in on this. Are you waiting for someone to review the PR?
(In reply to Tobias Leingruber (@tbx) from comment #28)
> Cool, is there a way I can see a preview of it?

You sure can! https://www-demo1.allizom.org/en-US/

(In reply to Ben (:bensternthal) from comment #29)
> Steven, just checking in on this. Are you waiting for someone to review the
> PR?

Yeah, I'm waiting on review of the PR. I've pinged pmac to look at it.
Looks really great! 

Quick question: I had initially kept in the interaction on-hover for sharing like our Flicks snippet player had. 

In my opinion, any point to allow a user to share something like this is nice to include. Will this be included? First, from a marketing stand-point we should ask if this is needed.
Thanks Steven, I like it. Will gather feedback on this and get back to you in a few.

Holly - I liked the sharing-options. Will ask around and send an update on that decission as well.

FYI the promo video itself is still in the making. Will post once it's done.
What's the timeline for this promo being used in production?
Steven - Please take the copy from this bug. It's approved, latest post: https://bugzilla.mozilla.org/show_bug.cgi?id=810830

Timeline: We intend this to go live on January 22nd along most other Flicks promotions. Would that mean that adding social capabilities is too late now?
Suggest we close this one out and add a new bug to implement the social sharing.

Thoughts?
Ben, pls hold on with this for a "moment". I asked the Flicks team if social sharing is totally necessary still. We might be able to save some bandwith here. brb :D
Ben - Yes, please do as suggested. Given the traffic that moz.org gets we'd really like to have social sharing capabilites implemented in this video-banner.

Please ask if you need any addtional infos (I can imagine some missing copy-strings)

Thanks!!
(In reply to Ben (:bensternthal) from comment #35)
> Suggest we close this one out and add a new bug to implement the social
> sharing.
> 
> Thoughts?

The sharing links links are implemented, but they only appear when the video is done playing. We need to add a way to access them before the video is done playing.
Ah, thanks for the update Steven. Sounds like we're close already.
I thought we were going to be able to take the player we created for the Flicks video snippet and reuse for this, but we must have had to create something custom. Was that the case? 

I mentioned the additional sharing interaction because in the video snippet work, we didn't want to wait until the user watched the entire video to give them the ability to share. I would recommend the same for this as well, but if it is out of scope, I understand if we have to limit it to the end frame.
(In reply to Holly Habstritt [:Habber] from comment #40)
> I thought we were going to be able to take the player we created for the
> Flicks video snippet and reuse for this, but we must have had to create
> something custom. Was that the case? 

Yes, it turned out that the player for the snipped only ended up being built for Firefox, since that's the only browser that sees the about:home page. Building out support for other browsers (including a Flash player fallback) was significant enough that we had to mostly start from scratch.

> I mentioned the additional sharing interaction because in the video snippet
> work, we didn't want to wait until the user watched the entire video to give
> them the ability to share. I would recommend the same for this as well, but
> if it is out of scope, I understand if we have to limit it to the end frame.

We'll still see if we can get the sharing controls added during playback.
FYI: Here's the final video file, good to go!

Full size 1280x720 download:
http://www.fixedearthfilms.com/mozilla/FireFoxFlicks_2013_V9.mov

Alternative link (might be faster actually):
https://dl.dropbox.com/u/12343904/FireFoxFlicks_2013_V9.mov

Cheers!
Hi again Steven. Would be great to have the share-options show-up during pause as well, just as Holly noted. Are you going to make that happen or what is the situation now? Thanks!
CC'ing QA folk. Can we get this looked at on demo1? Some changes are still pending.
Keywords: qawanted
(re-post from teaser-video bug)


Hi again. Apologies for making you go through the process of adding this video twice, but as mentioned in the meeting earlier, we've had to make another edit to this teaser video (font-color is now white/blue)

Here is the "new final" download-link: http://www.fixedearthfilms.com/mozilla/FireFoxFlicks_2013_V11.mov

Thanks a lot.
Hi Steven, a couple of things.

- Could you give me an overview of what needs to be done now to complete this technology / the Flicks promotion? 
- Could you please follow-up with QA? (I'll do Rainer)
- Who is managing the actual time slots?

I see two little "bugs": 
- Replay button is a play button, shouldn't that be a round arrow?
- The "Watch the video" link should disappear when video is playing. It loses it's meaning in that mode.

Timing: Our global PR/ social media efforts are set to go live on January 29th (Next Tuesday) and we want this to be part of it. Please do anything possible so we can hit that deadline. Thanks for all your work so far Steven.

Thanks!
(In reply to Tobias Leingruber (@tbx) from comment #46)
> - Could you give me an overview of what needs to be done now to complete
> this technology / the Flicks promotion?
We just need review from QA, then we can merge to master and push to production on the launch day.

> - Could you please follow-up with QA? (I'll do Rainer)
> - Who is managing the actual time slots?
That I'm not sure of. Perhaps malexis can advise.

> I see two little "bugs": 
> - Replay button is a play button, shouldn't that be a round arrow?
I suppose so - that is what YouTube does. I thought the play button was reasonably meaningful in the case as well.

> - The "Watch the video" link should disappear when video is playing. It
> loses it's meaning in that mode.
I had the same concern and checked in with matej on IRC. He advised changing this text to "Learn more", which works in both cases. This is done and will show up on the demo server soon.

I've also got the real video URLs in place and they will also show up on the demo server soon.
Sorry for the delay!

Video won't play in:
* IE 8 with Flash (latest) on Windows XP
* IE 7 with Flash (latest) on Windows XP
* IE 6 with Flash (latest) on Windows XP
* Firefox nightly/Aurora/ with JavaScript disabled (no errors in the JS Error Console)

Video plays in:
* IE 10 with Flash (latest) on Windows 8
* IE 9 with Flash (latest) on Windows 7
* Firefox nightly/Aurora/Beta/18.01 on all Windows versions
* Latest Chrome on Mac OS X 10.7.5
* Latest Chrome on Windows 7, Windows XP, Vista
* Latest Safari (6.0.2, 7536.26.17) on OS X 10.7.5
* Latest Safari (5.17, 7534.57.2) on Windows 7
Thanks Stephen!

Steven - Please let me know if this means we're in trouble or if you can fix it soon. The Flicks campaign is set to launch on the 29th.
ll see if I can track down the issues where the video isn't playing.

Other outstanding issues are:

1. Show sharing overlay during normal pause
2. Continue and Replay button can't be activated with enter or spacebar key. See: https://gist.github.com/3235454
3. Bug 833327 -  slideshow continues to rotate when video thumbnail has focus
4. Bug 833534 - [video slideshow] "X" in close button is inaccessible
5. Delay loading of as much CSS/JS as possible until the thumbnail is clicked

I don't think any of those should block our launch though. Let me know if you feel differently.

Obviously, any video playback issues will need to be cleared up though.
OK. It's supposed to go live on Tuesday, so I hope you can have everything set-up by Monday, so the admin only has to "push the button". (Who's doing that again?)

Of course, I hope you can fix the most important bugs...
I have a new request and I hope it'll be something easy to add: We'd like to define the preview image.


- Maybe this can be done by "just" adding the HTML5 video "poster" tag
- Image will be delivered by me (Hopefully later today). Can you upload it to wherever it needs to go then?
Fixed the IE playback issues. StephenD, can you re-test? https://www-demo1.allizom.org/en-US/
(In reply to Steven Garrity from comment #53)
> Fixed the IE playback issues. StephenD, can you re-test?
> https://www-demo1.allizom.org/en-US/

Playback is working now in all versions from 6 - 10; I've also re-tested in all the browsers from comment 38.

Not sure if it matters, but JavaScript-disabled isn't launching/playing the video, still, either.

Per the notes in comment 50, here's a screenshot of the overlay in IE7.
Don't think this should block ship, though.
Hi, we've got 2 urgent things to fix today before you can put it live:

1) Thumbnail
I posted the new video-thumbnail we'd like to have. Should be the correct size already. It's missing the player-graphic though, so I exported it with low compression. Can you add the player graphic and implement this?

2) Social Share Copy is wrong
Somehow this almost slipped through. I just clicked the Facebook and Twitter share buttons, actually beeing logged-in to the networks and the copy needs to be replaced.

The following copy wasn't specifically written for this purpose, but while we are waiting for new copy, please implement this:

Twitter:
***
#FirefoxFlicks, a global video contest about the power of mobile http://firefoxflicks.mozilla.org via @mozilla
***

Facebook:
***
Firefox Flicks, a global video contest about the power of mobile http://firefoxflicks.mozilla.org via Mozilla
***

Matej - Sorry for this last-minute request. I totally forgot the sharing-copy for this video-banner which is set to go live today. Would you please form something out of the things we already got and post it here? I don't think it'll be super high trafficed, but of course, we should make it right.
That poster image looks good, but is a tricky one to overlay a Play button on due to the face in the middle.

I've attached an example showing the problem, and a possible alternate position for the Play button. Feedback is welcome.
Attached image Poster Image V2
Thanks Steven.

Poster image: True, the button is right in his face hehe. My manager was fine with that though (I made a preview like that in Photoshop), so I left it.

I think re-positioning the button would "break" the standard video-player layout. I have another idea. From a high-res screenshot I changed the cut-out, now his face is more on the right. Not perfectly from the video now, but better I think. I'm good to go with that.
Do we need social sharing text here? We're already asking people to do two things in this promo (watch a video and visit a site) and I worry that introducing a third CTA will reduce visits to the site, which we ultimately want people to do. I would recommend leaving it off.

If it's absolutely essential to include sharing functionality, the following fits if we use the mzl.la URL shortener (which I think we should):

You’re the director. Mobile is the star. Enter #FirefoxFlicks, a global contest about the power of mobile.

Also, I'm wondering why you have "via @mozilla" at the end. That should be either "Via @Firefox" or "Via @FirefoxFlicks"
Thanks Matej.

To your comment: The social sharing part has been part of this idea since the beginning, so while I think your comment makes sense, we'll leave it in for now. I'll discuss this with Kristin, maybe we'll remove it on the next update in a few days.

I think we can use the forwarder domain http://firefoxflicks.org

Hi Carmen, are you ok with us using this string for share-copy, going to Twitter and FB? It's from the Flicks teaser video that we'll play on mozilla.org. Maybe we'll just make it an "@" instead of a "#"?

****
You’re the director. Mobile is the star. Enter #FirefoxFlicks, a global contest about the power of mobile. http://firefoxflicks.org
****
From a social media standpoint, I think leaving that in will benefit you in the long run. It's a secondary (or tertiary) CTA, that people would click after watching the video. It's so expected now, I don't think it would hurt. 

For share copy, I would suggest that it be more action-oriented.

Matej can massage this, but I would suggest:
1) I just decided to enter the #FirefoxFlicks contest. I'm going to win (think you can make a better video than me?" <link>
2) I just watched this awesome video about the new #FirefoxFlicks contest. You can join, too!

Otherwise, it's just a marketing tagline, which isn't terribly shareable, and that's the whole point, right? Word of mouth?
If this promotion is going into production today, we need final text immediately.
(In reply to Carmen from comment #62)
> 
> Otherwise, it's just a marketing tagline, which isn't terribly shareable,
> and that's the whole point, right? Word of mouth?

Thanks, Carmen. That's partly what I was trying to figure out, which is why I asked Tobi to ping you.

Of your options, I prefer the second. How about this:

I just watched this great video about the new #FirefoxFlicks contest. See for yourself and enter to win!
> Of your options, I prefer the second. How about this:
> 
> I just watched this great video about the new #FirefoxFlicks contest. See
> for yourself and enter to win!

Works for me. :) Done!
Thanks Matej & Carmen. 
Stephen - I think we're good to go!
Thanks - I've got the twitter text updated locally, but it looks like the Facebook sharing widget may be managed from within Facebook.

For example, the Flicks facebook sharing link on the about:home page uses this URL:
https://facebook.com/sharer.php?u=http%3A%2F%2Fmzl.la%2FJSGZHP&sample_rate=0.1&snippet_name=3021

As you can see, the text/link isn't included in this URL.

Who manages the Firefox Flicks facebook page?
I do Steven. Chelsea as well. Connect on IRC? #firefoxflicks ?
Seems like the Facebook issue is fixed and the thumbnail has been replaced. Good to go live.

Steven, as via IRC: Here's another bug, but it shouldn't block our launch. I hope you can fix it soon though: When using the time-bar the video keeps playing but the share-screen stays on top of it.
(In reply to Tobias Leingruber (@tbx) from comment #69)
> Steven, as via IRC: Here's another bug, but it shouldn't block our launch. I
> hope you can fix it soon though: When using the time-bar the video keeps
> playing but the share-screen stays on top of it.

It turns out this is a bug in the video-js player. For the time-being, we've had to turn off showing the sharing content when the video is paused. It still shows up when you reach the end of the video, or at any point when you click the Share button.

sdonner, this is in master now - are we ok to push into production?
(In reply to Steven Garrity from comment #70)
> (In reply to Tobias Leingruber (@tbx) from comment #69)
> > Steven, as via IRC: Here's another bug, but it shouldn't block our launch. I
> > hope you can fix it soon though: When using the time-bar the video keeps
> > playing but the share-screen stays on top of it.
> 
> It turns out this is a bug in the video-js player. For the time-being, we've
> had to turn off showing the sharing content when the video is paused. It
> still shows up when you reach the end of the video, or at any point when you
> click the Share button.

http://screencast.com/t/YDgbF6txP7b -- still shows up for me when paused.  Not sure this should block launch, though?
 
> sdonner, this is in master now - are we ok to push into production?

I'm not sure the criteria for ship, but the above bug doesn't seem worthy to block a ship to production to meet deadlines.

Also, I'm still not seeing any thumbnail image when I share to Facebook -- is that a blocker?
Thumbnail: 
No, the missing thumbnail on Facebook is not a blocker. Actually I think it's something specific to our website. Facebook generally doesn't detect a preview image there. I just mentioned this in a separate discussion. It's the same thing when posting the URL directly to Facebook. Maybe some HTML img attribute will to the trick, but nothing we can do about it here I think.

Good to ship V1 from my side! Go go :)
(In reply to Tobias Leingruber (@tbx) from comment #73)
> Thumbnail: 
> No, the missing thumbnail on Facebook is not a blocker. Actually I think
> it's something specific to our website. Facebook generally doesn't detect a
> preview image there. I just mentioned this in a separate discussion. It's
> the same thing when posting the URL directly to Facebook. Maybe some HTML
> img attribute will to the trick, but nothing we can do about it here I think.

Yeah, we need to update the og:image header on the Flicks site. I've made the fix and it'll go to prod in the next push once we have the problems with chief sorted out. Definitely not a blocker for the mozorg promo.
Thanks Craig.

OK - Can we flip the switch now? All good to go from my side.
We're live! http://www.mozilla.org/
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Hooray! Great work Steven, I like it!

Steven - Would you please post a summary of non-blocking bugs that need to be fixed still? Just so we have an overview and that we can plan on releasing V2.

I just noticed that a part of the Twitter-share-copy got lost on the way. 

It says: 
"I just watched this great video about the new / http://firefoxflicks.org"

but it should say:
"I just watched this great video about the new #FirefoxFlicks contest. See for yourself and enter to win! http://firefoxflicks.org"
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/dd1bf62e6881a6c8237cbdc0af519fd879c730f0
Fix urlencoding in share links (Bug 796049)

https://github.com/mozilla/bedrock/commit/eea93bfe0c81e117b72b16cb1768c62577eaf5e5
Merge pull request #613 from sgarrity/bug-796049-video-slideshow

Fix urlencoding in share links (Bug 796049)
(In reply to Tobias Leingruber (@tbx) from comment #77)
> Steven - Would you please post a summary of non-blocking bugs that need to
> be fixed still? Just so we have an overview and that we can plan on
> releasing V2.

Remaining issues include:
[Bug 833327] slideshow continues to rotate when video thumbnail has focus
[Bug 833534] "X" in close button is inaccessible
[Bug 828836] video functionality on mozilla.org slideshow adds ~110KB css and js


> I just noticed that a part of the Twitter-share-copy got lost on the way. 
This is fixed in master and should get into production today.
Video playback is not working in IE7 on production. Reopening bug
Status: RESOLVED → REOPENED
Keywords: qawanted
Resolution: FIXED → ---
(In reply to raymond [:retornam] from comment #80)
> Video playback is not working in IE7 on production. Reopening bug

Can you also test Firefox OS?
fixed in IE. https://www.allizom.org/en-US/
Status: REOPENED → RESOLVED
Closed: 11 years ago11 years ago
Resolution: --- → FIXED
Blocks: 842314
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: