[wp-trac] [WordPress Trac] #38172: Enable Video Headers in Custom Headers

[WordPress Trac]

#38172: Enable Video Headers in Custom Headers
----------------------------+--------------------
 Reporter:  davidakennedy   |       Owner:
     Type:  task (blessed)  |      Status:  new
 Priority:  normal          |   Milestone:  4.7
Component:  Themes          |     Version:  trunk
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:
----------------------------+--------------------

Comment (by celloexpressions):

 [attachment:38172.7.diff] merges [attachment:38172.4.diff] and
 [attachment:38172.6.diff] to provide a proof of concept for external
 support. It's a separate option but the UI feels okay if not phenomenal.
 More importantly, it's stored as a separate option to avoid making
 significant changes to WP_Customize_Media_Control and to keep things as
 flexible as possible for forward compatibility.

 I the JS-based initialization broke selective refresh - can you fix that
 @bradyvercher? I'm not sure what the best approach would be there, or
 whether we could do it directly with JS via `postMessage` now. Self-hosted
 video also would not loop anymore with this approach, even though the
 video element has an (empty) `loop` attribute.

 See my experience using this below, along with the forthcoming screencast
 of it. The quality of the actual graphics used in that is of course low
 since I did the screencast as a gif. Sometimes the YouTube option would
 show the loading indicator for a while, then start playing, then randomly
 switch to the image later. That part could use work. I think I'd still
 prefer self-hosted-only and using a direct video tag, but if the kinks can
 be worked out I'm open to the more complex approach.

 ----

 For a more real-world test, I took a video with my phone today to use as a
 header video. It was about 11 sections long, but I knew I only needed part
 of that since it would loop. My phone has an option to trim the video,
 then I emailed it to myself after trimming it to 5 seconds. It was about
 10 MB (incidentally, most of the photos I take are 5-8 MB already, and I'm
 able to upload those to WP with no issues thanks to size generation). I
 know that my phone takes very high resolution video and I know how to
 reduce it, and I also wanted to remove the audio and try to stabilize the
 motion. I have Premiere, so I was able to edit it, and then export it
 using settings that got the size down to under the 4MB limit. I also
 decided to slow it down, as the movement was too distracting. It took a
 couple of tries and adjusting different settings and further trimming the
 video to get something I was satified with that would loop nicely. Once I
 had gone trough that process, the final version was still about 5 seconds
 but with a lower frame rate and getting it under 4MB was no problem.

 I also tried adding a YouTube video instead, with the concept of using a
 longer, more dramatic (higher-motion) video instead. On my extremely slow
 connection, the experience of the YouTube video loading was pretty awful
 (note that I was testing on a local site here, so the hosted video didn't
 have that problem, but would have still worked better). Themes also have
 less control over how it displays - it could very well be quite grainy and
 will usually have black bars to account for an incorrect aspect ratio. It
 works, but the experience is much better with self-hosted video, where the
 theme has more control over the positioning and we may be able to make a
 more informed decision about if and when to show the video. With all of
 that being said, the best thing for core to do is probably to provide both
 options and leave the decision up to users. Those that are able to get it
 working with self-hosted can do so, and those that feel the YouTube option
 works better than an image for their needs can do that. This is not a
 feature that every user will be able to use right out of the box - even
 preparing a video that looks good in this content and loops well requires
 enough knowledge that dealing with the complexities of meeting a file size
 limit or opting to host externally instead is a reasonable expectation.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38172#comment:50>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform