Embedded Ziggeo

@bane - Would you be able to provide a guide on how to embed ziggeo recording and playback inside bubble without using the bubble plugin?

Hi,

Honestly I have not tried doing that so far, so I am interested in trying it out and reporting back here with the results.

I do want to say that many people have tried before and that is the reason why the great people from Bubble created the Ziggeo plugin, which is likely (at least in most cases) the best way to go with.

Now as said, I did not try to create it so far, and will try to do so and report back with the steps.

It is however very likely that this will require some codding and not the point and build which is what Bubble is all about in which case I would still suggest Bubble built plugin.

Regards,
Bane

OK, so I just tried to create my first app and it seems to hold everything I added. First thought was to add the video element, however since it is for YouTube and Vimeo only I had to remove it. Instead I went with the second element that had made sense and it turned out that it is working.

Now to not get ahead of myself and for you to see what is the end result and see if that is what you wanted, go to this link: https://add-ziggeo-directly.bubbleapps.io

  • It is not mobile responsive or at least I did not add anything specific to it regarding the same, so it is just a Proof of Concept if you will.

** APP is public and without any privacy rules. If I understood it correctly, it allows everyone to check it out and see what is happening.

Step 1 - add the header code

For this, we actually need to modify the index’s field by adding the header information.

In my case, I did the following:

  1. I went to Ziggeo.com, and created a new application
  2. once I did that I went to JS SDK Header page in the docs here: https://ziggeo.com/docs/sdks/javascript/browser-integration/header
  3. I selected my Bubble.is application and copied the code from the field bellow under “Code that you can simply copy to your website”
  4. now I opened Bubble and created the new application
  5. under very bottom of the Index page settings panel there is a field “Page HTML Header” this is where I pasted the code that I got from the Header page on Ziggeo docs page

Step 2 - add the recorder element

  1. Under Visual Elements there is HTML field, click on it and draw it on the page where you want the recorder to be shown
  2. in the first field under Appearance tab for the HTML field I added the following code:

<ziggeo ziggeo-perms="allowupload" ziggeo-responsive></ziggeo>

** I like to use this code since it allows me to upload a very short video clip and do quick tests on anything I work on

Step 3 - add the player element

  1. Again under Visual Element there is HTML field and we will use it again - I basically tried to click on the first and do a Copy->Paste and it worked nicely
  2. In the first field of the Appearance tab make sure to change the code to something else. In my case I changed it to the following:

<ziggeo ziggeo-video="871e05b6210918d2cc2eec09bc997416" ziggeo-responsive></ziggeo>

** The token is from a previously uploaded video to the same application, so you would change this to your own video token
Now comes the hardest part - so prepare and then click on Preview to see if you did everything right :slight_smile:

Now this obviously does not have any events added to it, nor is meant to, rather to just be the first step of adding player and recorder to the page.

So let me know how it looks and works and if this is what you had in mind. If so, is there anything that you would like to see added to the same?

Oh and for everyone at Bubble team - nice work on the editor - most advanced builder that I saw so far (and I worked for a company in similar field before) and a big thumbsup for what you had done :slight_smile:

2 Likes

Very nice.

Although it is defaulting to the Flash recorder, rather than WebRTC which is a bit odd.

Originally, I had wanted to try this so that Ziggeo would work properly within a mobile environment, and switching from portrait to landscape without losing the token. I guess we still can’t do that then?

Thank you Nigel :slight_smile:

In regards to the WebRTC, yes it is by default turned off. In the header page however there is a dropdown / select element which is labeled as Use WebRTC? By default it is set to No, however if you set it to “Yes” it would give you additional code segment that you can add to your page, next to the resources and token code and it looks like so:

<script>ZiggeoApi.Config.webrtc = true;</script>

Once that is added to the index page header section it will work without flash :wink:

1 Like

Well I was thinking about that.

There is one way we could do it without the Bubble’s mobile responsive engine breaking the plugin - otherwise this code and plugin work just right (if the responsive engine worked a bit differently).

The only way would be to actually create a JS function that would create a lightbox for us, attached as a child directly to the <body> element of the page.

That way it would be possible to keep it mobile responsive and without the rendering engine breaking the hooks that were created by our code.

Having that said, it means that this would always “stick” the embedding right above everything else, instead of being part of the layout that your app was created with.

If you are interested I would be happy to create a simple demo that shows this?

Yes, please create the demo. If possible provide any links or screenshots for us to follow along. This will be very helpful for other Bubblers too. Thanks, so much!

Will do and of course I will try to include screenshots where I think that they might be needed and as much details as possible.

I do want to say it again this approach would be good only for those that have tried Ziggeo plugin, like it, just need more from it since it requires you to do actual codding and Bubble seems so nice without it :slight_smile:

I will try to find the best way to make it possible to use as many options from Bubble toolset as possible while still making it work regardless of rendering.

2 Likes

@bane Your help is much appreciated! Looking forward to the approach.

Did you happen to make any progress with a better Ziggeo implementation?

One of my problems right now is that I need to be able to read the video duration and I can not figure out a way to get this data from a video using built-in Bubble methods.

FYI: The Advanced Ziggeo plugin by Bubblify supports WebRTC and the latest API version functions