Remove hype video controls manually

Using JavaScript with Hype Function Library
1

Hey all,

Normally I implement video's in HTML in a Hype rectangle and set the video attributes in there.
However, for a project I've dragged the video this time directly in Hype, and toggled on Autoplay, Inline and Muted. and toggled off Loop and Controls.

The issue is that Autoplay video doesn't work on IOS on Battery mode since a couple of months. The problem is that eventhough Controls are toggled off the Play button still appears. (which I don't want, since I want to build in a custom fallback)

And since I can only replicate this when its on IOS in battery mode, I can't use devtools too find the ID or class so I can disable it.

So my question is, does anyone know what the video controls ID's or classes are of the video play button so that I can disable it entirely?

Schermafbeelding 2023-11-08 om 10.35.22
Schermafbeelding 2023-11-08 om 10.35.22854×624 54.9 KB

(this is an example of the button that I mean)

2

You shold be able to give the video element a class name and then query it children for a video.

Also you should be anle to access the device via devtools.

Not at my Mac at mo but when I am I will have a look

3

Have linked my phone to the computer and found it were these classes:

		.media-controls-container{
			display:none !important;
			-webkit-appearance: none !important;
		}
		.play-pause{
			display: none !important;
			-webkit-appearance: none !important;
		}
		.media-controls{
			display: none !important;
			-webkit-appearance: none !important;
		}

However it didn't work so far (also turned off the "Protect from external styles")

4

I am not seeing this on my iOS.

Things work as expected. I do not get the controls when they are turned off in Hype.
Tested with Mobile Safari and Chrome.

I am on the latest version of iOS , are you ?

5

Did you also put your Iphone in battery mode? I tested it on multiple Iphones and on Browserstack and there I saw the play button appear.

6

Wha do you mean Battery mode?

Ah.. you mean Low Battery mode..

7

Battery save mode, sorry I didn't mention it correct in my initial post

8

It looks like the problem is the controls are lumped in the Agent Shadow Dom.
Which so far seems you cannot access..

9

Is this a hype specific thing? Since when I do these video's manually within a Hype rectangle I don't get these issues. (The problem now is that unfortunately I'm too far with the projects to transform everything back to a different video method).

I'm thinking of just overwriting the Shadow Dom. But not sure if thats the correct approach.

10

It shouldn't be a Hype-only thing and I'd expect the behavior to be the same with a Hype video element or if you made a <video> tag yourself. But I wouldn't rule out there might be some random CSS or way we define the element that could be different in regards to how low power mode videos present. If you have an example document that has this, can you send it over (to save me time to recreate), and I'll take a look?

11

Can you do that?

12

Thanks @jonathan

I've got a test here, with the standard Hype video method it indeed shows the play button on the IOS battery save mode: Test link.
And in this Manual project added within a Hype rectangle it doesn't show it: Test link.

Here I also got the
Projectfiles.zip (104.7 KB)

13

I briefly looked into it, it seems a selected few browsers (Chromium) seem to have limited capacity for it. So not very bulletproof

14

Side Note for the test examples above:

They have odd null layouts in them, it took me a minute to figure out why the video in the default one was not showing. removing the layout fixed that.

1 Like
15

Thanks for sending the files!

Hype always touches the controls attribute, and it looks like if it is ever set even to false, then the play control will appear in low power mode. This seems more like an iOS Safari bug, but I've also fixed it in Hype.

I don't know of any workarounds to preserve usage of Hype video elements and get rid of the play control. (Stuff like removeAttribute in On Prepare for Display does not fix the issue). Messing with the shadow dom may work, but is clearly fragile/not desirable/not cross browser.

The better workaround for now would be to change your video elements to use rectangles with inner html. Note that you should be able to do a <video src="${resourcesFolderName}/testVideo.mp4"></video> and don't need all the dynamic code.

If this is for a lot of documents though, I can send you a custom build of Hype with the fix? (I wasn't planning a bugfix soon since we just did one for Sonoma).

2 Likes
16

Thanks Jonathan!

In the future I'll keep doing it in the rectangle indeed, for now I've build in another fallback, I've implemented a function to check if the video is playing when it should, and if not to just remove the video element from the DOM and load the fallback image.

I reckon within the inventory the IOS devices with battery save mode on should be minimal anyways, so this approach should suffice for now.

3 Likes
17

Cool, glad you got something. Thanks for helping investigate this - definitely a weird video edge case I don't think the Safari team anticipated.