FR: V2 Embed – Video Custom controls (#4 of 4)

[cogniSyb]

From vg-macktrucks-com created by mollyaljenkins: hlxsites/vg-macktrucks-com#650

Must be completed after https://github.com/hlxsites/vg-macktrucks-com/issues/589

Description As a content editor I want to be able to display custom controls for configuration of video.

User AC:

• As a user I can unmute autoplay videos using a mute/unmute button within the media
• As a user I can pause autoplay videos using a play/pause button within the media
• Buttons will be positioned beside each other

Editor AC:

• As an editor I can use this functionality on both article and hero blocks
  • This is already possible using the functionality that exists for VT
  • This will be a local video only

Functionalities

• use custom controls: play/pause
• use custom controls: mute/unmute
• On main pages the video will be automatically muted and contain an mute/unmute functionality
• On article pages the video will not autoplay

Note The same solution of uploading a less than 2 min video for Volvo sites is to be reused here

Play/pause button refer to:

• Pause button for autoplay videos · Issue #156 · Netcentric/vg-volvotrucks-us-rd · GitHub

Audio controls refer to:

• FR - Add audio control on video module · Issue #317 · Netcentric/vg-volvotrucks-us-rd · GitHub

This work is also needed for Volvo Trucks videos.

Out of Scope AEM Assets does not need to be a requirement for this ticket as per @WendyKruger

Figma:

Article Page:

[BeckyMedlin]

@mollyaljenkins @verareljic Please add this to the next refinement as it is also needed for Volvo Trucks. Thanks!

[BeckyMedlin]

@cogniSyb Per discussion with @WendyKruger would like the functionality in the regular hero as well, not just the magazine.

[cogniSyb]

@BeckyMedlin that’s alright. The functionality we’ll copy from Volvo Trucks will support usage in several blocks.

[mollyaljenkins]

In issue: https://github.com/hlxsites/vg-macktrucks-com/issues/589 we take up this functionality @WendyKruger @BeckyMedlin

[mollyaljenkins]

Further discussion needed for AEM Assets

[BeckyMedlin]

Per discussion with @WendyKruger and @ZoeBeykirch, AEM Assets doesn't need to be a requirement for this ticket @mollyaljenkins.

[amglebihan]

I'm pasting a Slack conversation about this between Syb, Riya Midha and Harsh Shiki from Adobe. It looks like we'll have to look into option 2 mentioned by Harsh:

Riya Midha: Hey, we looked at the sample videos you shared. Currently the customisation required looks very specific to your website CSS and can be achieved by building a player wrapper on the opensource video js player. Like Ankush shared, this player should be easy to implement at you end and you can use the DM open API manifest URLs to play videos adaptively to avoid issues with progressive playback. Currently updating the player capabilities is not in our short term roadmap. Have you evaluated this approach at your end? I see on our side that video deliveries are happening for your account, is that via this approach or something else?

Sybren Wartna: I haven’t seen a message by Ankush. Could you please explain what is meant by DM open API manifest URLs? Just the URLs that are visible in the iframe?

Harsh Chiki: For video delivery there are 2 kinds of deliveries supported:

• player: which intelligently determines the video manifest to be requested for playback (documented here - https://adobe-aem-assets-delivery-experimental.redoc.ly/#operation/videoPlayerDelivery)
• video manifests - documentation can be found here - https://adobe-aem-assets-delivery-experimental.redoc.ly/#operation/videoManifestDelivery

With (2), you can have your own player, and plug the manifest URLs, for playback based on your requirements

[BeckyMedlin]

@mollyaljenkins @ZoeBeykirch Let's work with @amglebihan to determine if option 2 will meet the end user's needs and, if so, create some user stories.

[BeckyMedlin]

@ZoeBeykirch to schedule time with @amglebihan to determine requirements for this option.