Inline frame and hiding chrome video controls

#1

Dang… I built a demo in Axure that shows videos that autoplay in an inline frame. I don’t want the video controls visible. In Firefox it was easy to hide them by covering the paly control with a simple rectangle to mask them out (and disable them)… but I just found out the demo needs to support Chrome… and CHrome shows a gradient overlay at the bottom of the screen and the controls sit on top of my kludgey mask.

So… has any one found a way around this by injecting CSS/html/JS into an axure page with an iFrame to prevent the browser video player from showing the controls?

THanks!

#2

Take a look at the Video with Dynamic Panel page in this demo:
Video-Examples-2.rp (286.1 KB)

When you load videos in an inline frame, you are more or less at the mercy of the browser–however it handles video is what you get. Blessing and a curse… If you load videos as embedded objects via javascript injection you can get more control, including hiding the default controls, autoplay/not, jumping to a specific frame, creating your own external controls, etc. (for example, i like to build some keyboard shortcuts in the OnPageKeyUp event to play/pause, reload videos etc.)

If you need to keep using your inline frame widgets, then you could create a new page in your prototype and point the inline frame to it. On that page, place a dynamic panel (or any widget, really) and load the video into it. Size the widget based on dimensions you need for your video/iFrame and you should be good to go.

How to add a local video file to Axure
#3

Fantastic! Thanks very much… superb explanation in the .rp file! Just what I was looking for…
Cheers!

#4

It all works… except Google Chrome (v70-76+) recently brought in a new policy that prevents autoplay…
Apparently autoplaying video is annoying to users - and discourages users from viewing ads and staying on sites!
It looks like there are some ways around it but I still haven’t got autoplay to work in Chrome (using onload only). Lot’s of annoyed devs out there who build kiosks which no longer work. thank you Mr. Google!
I was succcessful in Chrome using your onLoad method to hide controls… and trigger the video using an Axure play button.
So I can work around it by clicking a button to show the video on the same page.

#5

Right… Forgot about all that, and didn’t even notice when I just retested it. :roll_eyes:

You can also assign an OnPageKeyUp event to fire the OnClick for a “play” button so that you can start the video via keyboard if needed.

#6

Another Google wrinkle I ran into is they now require an Axure plugin to be installed in order to display local content… in my case , calling up videos from my computer for a demo. Apparently Google has decided that it’s a security risk or something…

#7

One more question… is it possible to use the ‘videoPlayer’ dynamic panel on a single page to play different videos? They would be triggered using individual Play buttons (like on a small navigation panel).

closed #8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.