Video Element Wont Play Ziggeo Videos

With the ziggeo plugin built by bubble to upload, the ziggeo video will never play in the video element (video player). Is this a bug with the video player?

Looks like this same bug was reported back in 2019. Seems like it was never solved.

Anyone else have success with Ziggeo videos played in the native video player? Is bubble’s ziggeo app still supported?

I get this permanent loading spinner.

Screen Shot 2022-02-14 at 2.12.26 PM

heres the video player.
Screen Shot 2022-02-14 at 2.23.40 PM

Hi Brad,

I see that you have opened a ticket with us about this issue as well.

I will re-post what my colleagues mentioned to help anyone else that comes to this thread, however I would suggest avoiding writing same in both places, so please let us know if you prefer to continue there (the ticket) or here.

1. App token

Ideally you will need to make sure that the AppToken is correctly added: Bubble-Ziggeo integration tutorial on Vimeo (28th second of the video).

2. Video token

Once that is set up you can add the video token into your player. The video has to be under the same app that you have specified.

This is important if you have 2 different applications in your account and you might use one for recording customer feedback and another for showing your own videos or any of the many different use cases requiring multiple applications.

PS: When checking out the link you have sent in a ticket on our system we saw the app token not being set up error. For anyone to see that, you can open the page with your player and then open the console. Within the console you should see this:

No application (token) defined. We need an application (token) to include an embedding.

Thanks @bane ! Do you work for bubble? Your profile is hidden.

I’m happy to continue through the ticket, but I didn’t receiced this response from your collegaues. I’ve only seen an email saying “engineers will get to my ticket soon”.

I posted here because I wasn’t sure if it was a bug or not. I saw someone posted the exact same issue a few years ago and there was no resolution.

Either way, I really appreciate your help! I’ll update this thread when we find the solution - so the next person can benefit (i’m guessing it’s user error with my setup :grimacing:).

  1. I think my app token was correctly addded. I copied the application token from ziggeo and pasted it to both “API token” and “API token - dev.” in the bubble ziggeo plugin.


  2. This was a good tip, I didn’t think of that. I double checked and the video is under the same app that I specified. I can see the 9 videos under the app that I’ve specified. So I think everything checks out here.

  1. Good tip about checking dev tool errors. You are right: It says "no application token defined". Didn’t I correctly define my applicaiton token in step 1 ?

The video input elemenet (ziggeo uploader) uploads videos to ziggeo based on the application token - and this works great. When I use the uplaoder I can see all the videos on ziggeos dashboard…so the application token is working. Right?

Any suggestions to solve this?

Hi Brad,

Oh, sorry for confusion, I am from Ziggeo team :slight_smile: I like to jump in and help on Bubble forum any time I see a thread that is connected to us.

In terms of resolutions I can not remember the outcome of that specific thread however we often have ticket (Ziggeo side) and forum thread (here) and then things get solved through ticket and the story is untold here (hence me trying to reply back as much as possible).

That said, looking at the screenshot it does look like you are adding it properly. It also makes sense that if recorder is using it that player should as well.

However, the issue with your specific page is that you are actually having multiple pages within single page. This is not apparent, and it is quite normal thing to happen. The video player itself is actually added within iframe on the page, and that iframe does not have the application token specified.

That is the reason why it is failing.

Now I know that Bubble is all about no code, however I have to show you some code :slight_smile:

Bellow the v2-stable/ziggeo.js you would need to have the code for the application token (which is not there), so our system can not find the video.

What you can do

You could use one of the other plugins that are using the latest codes from our side. Bubble built in feature is great however it is using older version of our recorder and player.

There are several different plugins that you could use.
The following one is for example created by Ryutaro and offered for free: Ziggeo Recorder and Player Plugin | Bubble

  • Has some limitations his paid for plugin does not

You can find the other ones on our docs here: Bubble Integration - Ziggeo

Please do let me know how it goes :slight_smile:

I love it!

I’m not sure what this means. I’m building per usual bubble ways. Bubble has Resuable Elements, which this particular page is not. So I have no idea what this is.

Seems like it was a bug after all. I’ll add these details to my bug report.

Thanks!

I try and avoid 3rd party plugins but I’ll look into them.

1 Like

Hi @bane. I have an idea and need your input.

The video upload / sotrage to ziggeo was working great. My problem was only with watching the video through bubble’s video element. Would it help if I used a different video player?

I see alot of video player options like video.js etc.

I think I solved this. This topic will close in three days so I’m going to post my solution. However, I haven’t had enough time to completely test and try to break. It’s working now though.

Here’s the solution:

Use the ziggeo plugin as normal. Add the video input element that comes with the plugin (the video uploader) as normal. Use all the same setup steps except for the video player element. Don’t use bubble’s native video player. Just use ziggeos.

Drop an HTML element in your page and add the code ziggeo provides on the quick setup turotial. Or use the exact code from this screen shot.

<ziggeoplayer
  ziggeo-video='video-token-here'
  ziggeo-width=320
  ziggeo-height=240
></ziggeoplayer>

Hi Brad,

Happy to see you have it working now :slight_smile:

In regards to the code, my suggestion would be to modify it slightly (not needed).

I would suggest setting the width to 100% which would make it responsive and in such case you can safely remove the height as it should be set automatically depending on the video size and maintaining the aspect ratio.

Next to this, you can always add one of the themes for a different look and feel of the player and to match that of the recorder.

Recorder Themes: Video Recorder Themes - Ziggeo
Player Themes: https://ziggeo.com/features/video-player-themes

For example to set Modern Theme and set it to 100% width, and let us make it in blue color, you would use this code:

<ziggeoplayer
    ziggeo-video="video-token-here"
    ziggeo-width="100%"
    ziggeo-theme="modern"
    ziggeo-themecolor="blue">
</ziggeoplayer>

You can see all of the different parameters here: Embedding Parameters for JavaScript Video SDK - Ziggeo

@bane is there a setting to only play the video in full screen when clicked?

Hi Brad, for this it might be better reaching out to us directly or opening a different thread. That said, we do have playfullscreenonmobile. This should force video to go to fullscreen on mobile devices, however there is something to say about fullscreen.

Fullscreen is not always available. The FullScreen API is available in browsers in a “when possible” manner. As such we can also only provide fullscreen when that is allowed.

This is not directly mentioned, however present. You can see it here: Fullscreen API - Web APIs | MDN

Now it should be simple enough with some code (I know, saying code on no code forum :slight_smile: ) to add the possibility of detecting a click somewhere on the player (or outside of it) and setting the player into fullscreen.

Happy to assist with the codes, however would need to know more about the click location (hence new thread or ticket). On our forum: https://support.ziggeo.com/hc/en-us/community/topics/360000005388-Bubble-is-plugin-s- we have section for Bubble related plugins where we could talk more about this :slight_smile:

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.