Ziggeo iphone playsinline

Questions
1

Unless I’m missing something obvious (having checked the forum) when playing video Ziggeo in my case can these be restricted from going full screen “playsinline” either using the element/component or html. I can embed using both the plugin and html …if i enabled iframe i can add <iframe webkit-playsinline but just checking if there is a more elegant way @philip have you had much luck…im aiming to get a notification when the video has finished playing application.embed_event.on(“ended”, function () {
fire an event and pick it up with Bubble to JS
});

2

I’ve been trying to get Ziggeo more streamlined with my Bubble apps but haven’t had a ton of luck. Ideally it would be straightforward to get notified when different actions or events occur in the player, you’re right. I haven’t found a more elegant solution for what you’re trying to do. I do know that since iOS 10, if you want playsinline to work well you should add it as an attribute on a video element <video src="video.mp4" playsinline> – in order to do this you need to be able to grab the video location, which you can do using the JavaScript API tree https://ziggeo.com/docs/sdks/javascript/api

I also have had success in embedding Ziggeo videos within a custom JWPlayer. With this method I was able to get event notifications using JWPlayer’s JavaScript API, but the drawbacks are that you’re then tied to the JWPLayer licenses. I ended up dumping that integration and going back to the default player :worried: Now I run custom workflows when the player is visible in a popup and count seconds of playtime to get a rough idea of % video completed, but that will not work for your use case if you need to be notified immediately upon video ending.

3

Thanks for the quick reply and reveal…interesting i didn’t realize you could get the actual video… just a quick question from the wise…if im making a get using the api

am i correct h ttps://ziggeo.com/v1/applications/my-app-token/video-id/secret_key

bit confused…tried different options and no access…

4

Hi Bubbleboy,

I am Bane from Ziggeo support. If I understood your last question right, you would like to get the direct link to the video. If that is the case your link would look like this:

For US based accounts:
https://embed-cdn.ziggeo.com/v1/applications/{APP_TOKEN}/videos/{VIDEO_TOKEN}video.mp4

For EU based accounts:
https://embed-eu-west-1.ziggeo.com/v1/applications/{APP_TOKEN}/videos/{VIDEO_TOKEN}/video.mp4

  • This would give you the direct link to the video. Alternatively if you were calling ZiggeoApi.Videos.source(token_or_key); you would get the same.

In regards to JWPlayer. The v2 version of our player for example does not use JWPlayer, so feel free to see if that works for you.

I will however check with everyone about the playsinline attribute, as we are subscribed to all the right places to know when cool new features are planned to get out and once they do to test them out and go further :slight_smile: so I know that right people are familiar with it, it is just needed to see the thoughts about its usage/availability. In general our goal is to make the workflow as similar as possible across various devices, systems and browsers, so some feature just released on browser might be part of our newer revisions and also most likely for v2 only or at first, or might not be included in order to have a more uniform approach.

As this feature is new to iOS I’ll check what our plans are with it and update this post once I know more.

In the mean time I would be happy to assist with any questions that might arise in custom development.

@Bubbleboy just to check, and on a different note - if I understood you correctly you were able to use our events and from them fire Bubble api - allowing other things in Bubble to work based on our events? I ask since I had tried before however was not able to do that in Bubble.

Regards,
Bane

5

Bane,

i’ve sorted the playsinline …this is only doable using the embed…that’s sorted

Actually i don’t need the mp4 but thanks for explaining…what i need is the video length…so i should be able to call this using your api …which i can kinda do…make a GET …so if i login to ziggeo account and put this h ttps://ziggeo.com/v1/applications/my-app-token/video-id/secret_key
in the URL i get the json with all the info…making this same call as an api fails…whats your authentication…so i need to add my clent secret or login…can you clariy

hereyougo.jpg886×825 123 KB

regarding events…if you lot cant do it… then i’m on a plan to fail…I’ll leave that one…

6

Hi @Bubbleboy

I was so happy to realize just now that I was using my ziggeo email so I could reset my password :slight_smile:

  • I am currently traveling so not with the standard setup and seems I did not have my Bubble pass on this laptop, having that said, lets jump to what you mentioned.

In regards to auth, it should be just basic auth that you can use, however depending on which servers you are using you will need a bit different link

So if you are using US servers (ziggeo.com) then you would use this:
https://embed.ziggeo.com/v1/applications/APP_TOKEN/videos/VIDEO_TOKEN

If your account is in EU, you would then use this:
https://embed-eu-west-1.ziggeo.com/v1/applications/APP_TOKEN/videos/VIDEO_TOKEN

Now for actual authentication, I presume that you are using API connector plugin? In it you would just select Basic Auth and for your username use APP_TOKEN and for the password use your PRIVATE_TOKEN and that should work.

PS: In terms of events, I am not that familiar with Bubble system, so if you have an idea that might work, please do try it out :slight_smile:

Hope this helps.

Regards,
Bane

7

Sweet! all working, thanks

For anyone else finding themselves here…use your Private Key…in regard to the direction given re PRIVATE_TOKEN…just saying

1 Like
8

@bane I could do with a bit more coaching … All the above is working just perfectly. I can use the https://embed.ziggeo.com/v1/applications/APP_TOKEN/videos/VIDEO_TOKEN to get all the necessary information. How would I go about deleting or destroying a video using this method.

I’m using the API as you outlined in this works just fine for a GET but when I try to make DELETE call I get a “forbidden”

Thanks in advance

9

Hi @Bubbleboy

You could actually use all the calls from our API page here: https://ziggeo.com/docs/sdks/javascript/api

So for delete that would be destroy one. Now it is good to point out that by default this one requires you to pass auth tokens as well so that not just anyone can delete it, so you would check out the green examples, or alternatively (which I do not suggest) turn of the requirement of auth tokens to delete the video.

Please do try it out and let me know how it goes :slight_smile:

Regards,
Bane

10

Hi thanks, i’d found that api ref but was struggling to put it into practice

so just double checking…for my token ive generated here

is this correct

would i be correct that if i do not generate a token here …passing a token is not required?

so if im making a delete call using the api

setup.jpg776×329 34.8 KB

how would i pass the javascript? would i not pass this in the url?

could you clarify if possible…im possibly missing something very obvious.

11

@bane thnaks for the help. i should just clarify your instruction was correct…in regard to deleting a video without auth token. …thats works just dandy…i’m just trying to workout how i pass the token ?

12

Hi @Bubbleboy

Glad to hear that your tests worked (for the plain call) and for the API connector we would need to change it a bit to work with auth tokens.

So the URL would be as follows:
https://srvapi.ziggeo.com/v1/videos/VIDEO_TOKEN
*Notice how it is srvapi and that we are just mentioning the videos section.
** we will add this info to the API page, it was skipped because it would usually be needed for the server side APIs as you do not want to show the details publicly (in your browser), however the way it is done in Bubble seems that it would require that approach instead.

So details from top to bottom (in API connector):

  1. authentication type - Basic Auth
  2. username - Application token
  3. password - Private key
  4. Method - DELETE
  5. URL - https://srvapi.ziggeo.com/v1/videos/VIDEO_TOKEN
  • Any time you initialize the call the video you mentioned will be deleted, so it is good to test it on a “dummy” video.

2017-07-24-bubble-API.png799×769 36.9 KB

Hope that helps :slight_smile:

Regards,
Bane

2 Likes
13

Just needed to add - seems I did not in my first reply… The auth tokens are not needed in this setup as we are using private key and the URL that understands it. That way we are already confirming that we are the “real deal” so we can delete things without any auth tokens.

I guess that this would make more sense to be present in the Bubble plugin than the JS API approach, however I am not sure if ultimately someone could see the private key in their browser at any point (would only depend on how the API connector works in a real live app).

Regards,
Bane

14

I am pretty sure our private keys are publicly visible when using the JS API method. Should this be a concern?

@Bubbleboy In Ziggeo’s Manage Application settings, I enabled “Allowed Domains” for one of the domains an app resides on. “The following is a list of all domains that are allowed to access this application. You can use the asterisk (*) symbol to match for subdomains, e.g. *.domain.com” By doing this you can prevent unauthorized people or websites from grabbing your videos, I’m not 100% sure about preventing deletion though.

1 Like
15

@philip thanks yep i’d noted the “Allowed Domains” thanks for reaffirming.

@bane thanks for the detailed response and additional insights…all working seamlessly … i will be moving to one of your commercial plans.

Cheers

16

Hi to both,

Nice to hear that it is working :slight_smile:

That would depend on your audience, however in general (as we like to be safe) the answer would be yes, however still there are other methods that you can use next to the one you had mentioned to use as alternative.

For example if you are going to be using auth tokens and you do not want them to be reused by others, you could create your own one time auth tokens (either client side or server side auth tokens, both would work). With this setup you do not really need to care about if someone can see your tokens or not as they can be limited to specific action (removal, creating, etc), timeframe, session, etc. and our servers are completely fine with you having none, 1 or 10k of auth tokens.

You can read more about them here: Authorization Tokens for Securing Video Access - Ziggeo

Now just to mention, the application token is something that you can show in the client side (browser), private key is something that you should not show. If you have the private key shown, it would be best to use the auth tokens approach I explained above instead.

It would not matter if you had limited the usability from your own website or not - it would, however there are still ways to make the calls from the website itself even though you are not the actual owner of the same (to any service) - hence us implementing auth tokens, domain whitelisting,

If you are not sure however have your live app using it, please do let me know - you can send it to us at support@ziggeo.com or to me directly if you prefer - “bane” would be instead of “support” in that case :slight_smile:
I could then check in the console if any calls made to our side are showing the private token or not.

When I checked it seemed to me that Bubble is making calls privately to their own server from where the API connector is activated - I would presume at least that it would do it that way.

Regards,
Bane

17

@bane thank you for the additional insight. I’m just moving onto the ziggeo paid plan and will be launching the application into production in the next week or two. ziggeo will play a central part of the application so prior to go live I will send you “bane”@ziggeo.com the link if you could give it a quick once over and see if I’ve missed anything obvious regarding authentication/tokens etc.

I’m not using the plugin… Everything is native ziggeo api… I’ve also been able to get the events working now I can initiate actions in bubble based on events in the ziggeo player … Interestingly ive got the playsinline working but whereas the device manufacturers… Certainly on iOS restrict autoplay of video with ziggeo the video plays on iphone! Not that that’s an issue I can to set autoplay to false… Even more strange it doesn’t work on iPad… heyho…just saying

19

Hi @Bubbleboy,

Great to hear that and about the events :slight_smile: - I like that it is possible, I just need to look a bit closer into it to see it.

Now in terms of the playsinline, I had actually checked with the rest of the team and this is actually built into our system however this is where it becomes interesting.

  • iOS 10 and above - can have videos played inline, older ones will not allow you to do that.
  • iOS in general dislikes the videos being too small however newer version do like it more than older ones, still keeping your player / recorder as big as possible is the best way to go with on iOS devices.

You can however check out the embeddings using these parameters to see which ones give you closest experience to what you like:

  1. playwhenvisible
  2. microphone-volume (with value of 0)
  3. autoplay
  • Autoplay generally does not work on iOS devices and newer versions do allow the same to work only if video is muted. For example you can see this on Facebook as well - videos starting muted, and then you need to unmute them.

Hope this helps :slight_smile:

Regards,
Bane