Bitmovin Issues: Autohide and Fullscreen Troubles in Bubble

msamandadianne · November 23, 2023, 4:35am

Hey community,

I hope you’re all doing well! I’m working on a Bubble project and currently building a Bitmovin plugin for my app. While most things are working smoothly, I’ve hit a roadblock with two specific issues that have me scratching my head.

1. Autohide Issue: I’m facing a problem where the controls aren’t hiding as expected. It seems like the player controls hide inconsistently. I’ve double-checked my Bubble setup and the Bitmovin documentation, but I’m unable to pinpoint the cause.

2. Fullscreen Quirks: The second challenge I’m grappling with is related to fullscreen toggling. When I enter fullscreen, it appears that the original video keeps playing, and a new video is layered on top, ready to play from the beginning. The same happens when toggling out of fullscreen – a new video is created and set to play from the start. I’m not sure why this behavior is occurring, and it’s impacting the user experience.

To provide a clearer picture, I’ve recorded some videos demonstrating these issues. Additionally, I’ve included the relevant code snippets from my Bubble project.

Autohide issue Dropbox - Autohide Issue.mov - Simplify your life

Fullscreen issue Dropbox - Fullscreen.mov - Simplify your life

Here is my plug in code. I’m not really a coder but was able to put something together by looking at other open source video plugins.

The Bitmovin documentation is pretty extensive but I’ll put a few links that I was referencing.

github.com

bitmovin/bitmovin-player-ui/blob/d4dd00e11e69c7d105bc8e2b7710f5ec9286e828/src/ts/uiconfig.ts#L46


      
             * and ad break markers).
             * The CSS classes are also propagated to a connected {@link SeekBarLabel}.
             *
             * Multiple classes can be added to allow grouping of markers into types (e.g. chapter markers,
             * ad break markers) by a shared class and still identify and style each marker with distinct
             * classes (e.g. `['marker-type-chapter', 'chapter-number-1']`).
             */
            cssClasses?: string[];
          }
          
          export interface UIConfig {
            /**
             * Specifies the container in the DOM into which the UI will be added. Can be a CSS selector string or a
             * HTMLElement object. By default, the player container will be used ({@link PlayerAPI#getContainer}).
             */
            container?: string | HTMLElement;
            metadata?: {
              title?: string;
              description?: string;
              markers?: TimelineMarker[];
            };

I would greatly appreciate any insights or suggestions from the community. If you’ve encountered similar challenges or have expertise in Bitmovin integration, your guidance would be invaluable.

Thanks in advance for your help!

Amanda

jared.gibb · November 26, 2023, 3:58am

Knowledge drop:

Your update function will execute multiple times. Is there a chance this is why you see multiple instantiations of your video?

msamandadianne · November 26, 2023, 4:17am

Hi,

Thanks for your prompt reply. I was indeed thinking along those lines. Unfortunately, my current knowledge doesn’t allow me to pinpoint where the error might be occurring.

I’ve recently added a poster, and the behavior is a bit off. As you can see in the video I’ve attached, the poster image isn’t filling the screen entirely (although I suspect I can tweak that with some properties). On the positive side, the auto hide feature is working as intended. However, when it comes to fullscreen, it seems to be creating a new instance, which wasn’t expected. Please take a look at the video.

Edit – Link

Any insights or suggestions you have would be greatly appreciated. I’m eager to get this sorted out.

Thanks again!

msamandadianne · November 26, 2023, 6:00am

const player = new bitmovin.player.Player(container, playerConfig);
I think this is creating two instances. I commented everything else out one by one and I still see that two instances are being loaded. I don’t really understand how though.

EDIT: So, like you said, the update function is running multiple times - when a field is updated, in this case the image and video links. Ok, so maybe I should put the constructor in the initialize function? But then how do I put the playerConfig settings when I need to use them as fields in the update function?

gaimed · November 26, 2023, 2:59pm

Just add a if statement if the var is set inside context.data

msamandadianne · November 26, 2023, 10:28pm

Thanks for your reply! Could you elaborate on what you mean? I’m a novice coder.

Would I put the if statement in the initialize or update function?

gaimed · November 27, 2023, 12:58pm

in the update

So you can do something like

if(!instance.data.player) instance.data.player = new …

That way you only initialize it once

msamandadianne · November 27, 2023, 4:10pm

Thanks so much. I knew there was a simple fix.

msamandadianne · November 28, 2023, 6:10am

I can’t figure out the code to get the image to go full screen.

I need to background size to be auto. How do I change that? I’ve been trying all sorts of things but nothing is working.

I’ll post screen shots of what i need to change and what I have.

Topic		Replies	Views
Seeking Guidance for Bitmovin Plugin Development Plugins	5	470	November 3, 2023
Full-Screen Video Not Working in Bubble Bugs	7	1556	April 30, 2020
Video player plugin must be changed Bugs	2	661	July 10, 2017
Distracting .svg file and video not autoplaying on new app created by new bubbler Need help	3	291	July 25, 2023
FINALLY! Bubble + external fullscreen video Tips	8	1934	June 29, 2021

Bitmovin Issues: Autohide and Fullscreen Troubles in Bubble

Related topics