Are you in need of embedding videos in your app? Receiving an error? Give the following a try:
What is video embedding?
Video embedding allows you to take a link from an external source, such as youtube, and embed it into your data to view on your app. This is different from sites like youtube and Vimeo that allow you to upload your video content directly to their server. Currently, AppSheet only supports the embedding of videos.
Where do I set up video embedding?
The ability to embed your videos in your app is done by ensuring your data is correctly set up to accommodate and display videos with the right column types. Weโll walk you through the process of how to do this below.
Important notes
Happy app building!
Two thoughts:
I did that by using the Column Type โFileโ. You can upload mp4 files and watch them.
But you are right, there are some difficulties.
Like this one:
Interesting. I hadnโt thought of trying to use the FILE type. Iโll try to experiment with it later.
Is there any way to save the video somewhere else besides YouTube, to get an embed code?
Iโve experimented with mp4 files hosted on a independent server, but I found that the videos were not resized properly. Iโm not sure if that situation has changed recently.
By the way, if you are referring to capturing and saving a video, in the same way that pictures can by taken and then brought into an app, that is not yet possible, as far as I know.
This doesnโt really advise how to embed mp4 files from Google Drive or another source other than YouTube. YouTube has been working but because of the autoplay option I need another solution. I would like to embed the mp4 file directly from Google Drive. I can hyperlink to it but canโt get the embed to work. The iframe displays but nothing else.
As I recall, I got an mp4 file to play in the app by making it tiny, but thatโs problematic and too much trouble. After that I gave up.
Thanks Kirk.
I did figure out you can add ?rel=0 to the end of the youtube embed link to stop random recommended videos - but I still donโt like it.
My only other option is to give the hyperlink to the mp4 on google drive.
I hope the ability to handle web or Google drive hosted mp4s comes to AppSheet eventually. Actually, Iโm waiting for a similar capability for mp3 audio files as well.
@Kirk_Masden and @tcanelli have you both had a chance to posted these requests in the Feature Request category?
I think I posted something about these topics (mp3 and mp4 support) in the past but it may be time to post again. Thanks!
Those of us interested in adding moving images to our apps should also be aware of the usage of gifs that @tsuji_koichi has been exploring:
Iโm loving the Youtube links and could be very useful.
Just one thing, the format of the link has to be changed from its normal structure:
https:// youtu.be/p3UONyvFCjE
to
https:// youtube.com/embed/p3UONyvFCjE
(spaces added so just text shows)
Which can be quite difficult if capturing a link from a mobile device, could there be an expression to extract any string past the last / and concatenate it with โembedโ
?
Cheers
I posted earlier about @tsuji_koichiโs use of animated gifs in AppSheet:
Unfortunately, I havenโt been able to figure out how to emulate what heโs done yet. I wonder if anyone has made a sample app to illustrate how to take advantage of gif animation in AppSheet.
It seems to me that animated gifโs have several advantages for the AppSheet platform and so may deserve more official AppSheet support. One advantage is that a short video illustration in the form of a gif doesnโt require any controls (no need for a progress bar, start, stop, etc.). Another is that, if animated gifs could work in the โImageโ file type, one could merely upload a gif and then it would work โ just as gifs work automatically in most browsers.
I assume that using animated gifs in AppSheet isnโt that simple yet but please correct me if Iโm wrong.
I know this is not perfectly fancy way to show gif file on Appsheet app, but there is a way to achieve this. Again, I know this is not ideal way for you as it takes several steps and process to follow to save gif file and show the same on the Appsheet app. Other community member may have far better way to achieve the same, but please see the quick short movie here.
In a nutshell, i did like this.
Now we will see the gif file which is actually animated rather than static shot.
Try it out.
I reckon there are other better way, but this should be one of the option to get the Gif file to show correctly as originally designed.
When we create the image type column file, we still can save gif file, but it only display thumbnail and static image based on the current default set of the appsheet. I m not sure about the technical reason about it, but to get the gif file which is saved in Google drive, then we need to get to access with the particular URL, with parameter of โ/ucโ
You see the full path generator, I would say, in the virtual column is ended with /uc?id="&[Google Drive Gif file ID]
I invite some thought from Appsheet team if it is possible to introduce the URL where gif works as animated rather than simple.
In the appsheet or any other app building platform, it is not a native feature to convert movie file to gif. We need to rely on any other solution like Giphy. This step is bit time consuming but we are not able to avoid this step. However, once gif is generated, then we still have a path to get them working on Appsheet app, this is one of the possible example, Krik.
@Fabian is one of the specialist about this topic, so let me add him on.
Actually, I learn trick to add /uc as a part of parameter to URL from him and his previous post.
I finally got it to work. I wanted to put the gif on my own server but, for some reason, I couldnโt get that to work. However, when I uploaded a gif I had made to my Google drive account and then made it public, I got the following shareable URL:
https://drive.google.com/file/d/1Zm67g8yUdgP4szOjou_psXXAIxNQYlVf/view?usp=sharing
That wouldnโt work in a virtual image column . . . nor would
https://drive.google.com/file/d/1Zm67g8yUdgP4szOjou_psXXAIxNQYlVf/
However, when I substituted โuc?id=โ for โfile/d/โ as follows, it worked:
https://drive.google.com/uc?id=1Zm67g8yUdgP4szOjou_psXXAIxNQYlVf
My virtual โimageโ column moved in a manner befitting a Hogwarts moving portrait.
Why THIS works and other things I tried didnโt, I donโt understand. As Alice once said, โCuriouser and curiouser!โ
Additional notes.
When we save MP4, MP3 file to Google drive and get the ID for the file, actually it is going to work. Movie is shown with Appsheet view, and audio is the same.
Past the IDs to the physical column, then set the virtual column type to MOVIE with same app formula.
Without opening external browser tab, it will display saved mp4, mp3 files.
Try when you have a chance.
โ
If you want to let your app user to save those mp3, mp4 and gif files as they wish. This may not be an option with you, as they need to visit Google Drive, save files, get the url, and get ID, Then return to Appsheet past ID. Probably this is too much for app end users. But if you are fine with Appsheet app creator like you are able to save those file within a app, I think this is one of the workable option until Appsheet natively adopt new feature to save mp3, mp4 etc.
Hope this might be of your interest.
In my case, I want to use animated gifs, etc. as a creator and my users donโt need to do this. So, this technique is VERY valuable to me. I hope, though, that AppSheet will improve the support for animate gifs so that they can be store in other ways.
Back to gif file, just for your guidance, it should work if you set the data type to thumbnail instead of image.
My understanding is the problem is here.
When we save the file through appsheet app, then I will be saved to the cloud service, most of the case, user are using Google, so it is going to be saved to Google Drive at the end. After the file is saved, we access to those files through Appsheet server, rather than we (client side, browser) directly access to the files. Hence, we are not able to view the movie, mp3, gif as it is filtered by the appsheet server.
So we probably need to ask Appsheet team to get some mechanism to generate the less restricted file URLs through the Appsheet expression. But again, this sounds a bit tricky as well, as user is not necessarily using Google drive to store the object. Maybe One Drive, Dropbox etc. Each cloud storage service should have different set and requirement. For instance, I m not sure how to construct the URLs like this case of Google Drive. I quickly tested. Saved gif and mp4 to One Drive and Dropbox, and get the default URLs which each service generate. And past to appsheet app. Both did not work.
Even though we are able to get the access full path URLs out of the app, still it is going to be difficultโฆ from my prospective, so we need to think about a bit hacky way to achieve.
Alternative Options.
Use the bucket services, like Amazon S3, Firebase/Firestore. I actually posted feature request to integrate Firebase/Firestore, as it is super easy to handle. Did the same test. Saved mp3, mp4, git to both bucket service manually and the get the sharable URL. Paste to Appsheet . Amazon S3. Did not work, but files is not accessible from Appsheet by the URL.Probably we need to set the authentication etv, but i m not sure and do not have time to investigate.
Secondly, Firebase/Firestore. Get the URLs and paste to Appsheet. Actually it works perfectly. Movies are displayed and gif, mp3 as well.
So for me, Integration with Firebase/Firestore is ton the top side of my wish list to have as new feature. Additionally, we could capture the URL when we set the Firestore as data store, it is just perfect. Actually we can save any type of files in a large scale, and most importantly Firebase is basically free.
I talked too much, haha. Anyway, I m happy to hear you find this trick useful. Keep in touch. (^.^)/
I welcome comment from Appsheet team, if they see this thread.
I couldnโt get the thumbnail column type to show a gif on my server correctly. So far, Iโve only gotten the gif to move with the kind of โhttps://drive.google.com/uc?id=โ address that you recommended.
@JCadence, I know that @praveen and others at AppSheet are already aware of @tsuji_koichiโs interesting and important comments. I really hope that someone at AppSheet will have the time to follow up on this. Thanks in advance!
Thank you Kirk, and interesting to hear how the different device and OS works. Thats why story is NOT simple! all the time.
Have you ever used Google Firebase before?
If not, please try it out.
It is free. I remember you can access to your Firebase account with your Google Account.
Then follow the guide, generate test project. Then under the test project, use Firestore.
From browser, you can upload file. Test and upload all the different type you have interest. Then get the download URL, and paste to your Appsheet App and see how it will work.
My devices are all Appleโฆ At least, it works, but curious to see how Android will behave on this set up.
Iโve confirmed that the animated gif works perfectly on both Android and iOS devices. In regard to mp3s, it works very well, with a little mp3 player on my browser and on my Android phone but didnโt work the same way on an iOS phone. Instead, the mp3 played in Safari, which is the same thing that happens when I have the mp3 on my own server.
I am trying to embed a video similar to above
Had the original video as
https://drive.google.com/file/d/1Xbco-k_er52SQbxv54ACf1fxhL0QNSq/view?usp=sharing
I tried to keep just the fileid 1Xbco-k_er52SQbxv54ACf1fxhL0QNSq
then i tried to keep the https://drive.google.com/uc?id=1Xbco-k_er52SQbxv54ACf1fxhL0QNSq
I set the Column type as Video in appsheet.
but yet it does not work in appsheet, has a video icon but nothing plays.
I see your comment it works please let me know. I dont have the actual mp4 link or cannot get.
note: Sorry the link may not work as its not shared public,
At least, the files need to be published among others.
If you dont want to publish your mp4 file then try following step.
This could be best and easiest approach to achieve your goal.
Thanks @tsuji_koichi!
By the way, @JCadence, I tried using the video column type to play a little mp4 from my server and, as before, it didnโt work too well. On an iOS device it played but the initial image did not fit on the screen. On an Android device of mine, it didnโt play at all. So, support for mp4 files is still an issue. I did post about wanting mp3 support, but I havenโt reposted about mp4 support yet:
Thanks for your feedback @Kirk_Masden. Weโll take it into consideration for future work.
Out of curiosity, I quickly tested a few different storage services (generally all free), including bucket service.
AWS S3 is one of popular one. Appsheet is actually integrating this, but Appsheet creator needs to have Business Subscription to use this functionality. To be honest with you, I was not feeling much of benefit from this integration with S3.
One reason is little tricky and complicated to set up S3, compare with Firebase/Firestore.
Secondly, the URL AWS S3 returns once the files are saved to the storage is restricted. It should be good from security prospective, but meaning, we need to work around bunch of stuffs to clear the firewall etc.
All in all, S3 and bucket is great services, but not actually and practically using on my app before, probably will not be for the future as well.
To the contrast, Firebase/Firestore is easy to handle to setup with far better UI/UX on the base platform. So I really want to have integration into Firebase/Firestore as bucket service. They are so called NOSQL, so not suitable as data source to the AppSheet App, but for storage service, like storing file and image, it should bring more benefit. Especially loading image and reading files are far more faster rather than storing in Google Drive or other storage services. If the app heavily save the images, it will reduce users frustration to wait for sync to upload bunch of images.
Anyway, what I quickly tested it
Save the files manually to several cloud warehouse, then get the sharing, public url.
And paste url as text/string to AppSheet app column whose data type is simple text. Then generate this column in App formula in Virtual column then see if AppSheet view display images and files.
Saved the gif, mp3, mp4 files manually to see the difference of file type will act
The cloud service I tested are
Google Firebase/Firestore
AWS S3
4)One Drive
5)Dropbox
To make long story short, only Firebase/Firestore returned all the different files correctly without twisting the strings adding parameter or change parameter, but URL as it is did work.
I hope this factual result may bring some support for AppSheet dev team investigation and consideration.
FYG, the device I tested is IOS and MaC, not testing ms and android .
Embedding Youtube Videos works fine, but adding a Vimeo Url does not work. Is there a special way of formatting the link. like in youtube using the link for embedding, and not just the url of the video? like down below?
https://www.youtube.com/embed/โฆ
How must the link for a Vimeo video look like?
Embedding Youtube Videos works fine, but adding a Vimeo Url does not work. Is there a special way of formatting the link. like in youtube using the link for embedding, and not just the url of the video? like down below?
https://www.youtube.com/embed/โฆ
How must the link for a Vimeo video look like?
were you able to embed Vimeo videos?
Hi @Constanze_Kobing! Welcome to the community.
I hope someone will prove me wrong, but I suspect that AppSheet doesnโt work with Vimeo yet.
Hi. I have the same question. I can not find a way to embed Vimeo (or any other mp4). Only Youtube seems to work.
Hi, I found a way to play vimeo videos in my app. It worked for me the following way.
I have a PRO Subscription for Vimeo and use a feature that is not available with the FREE version.
Go to the Video you want to embed.
Go to โDistributionโ Section (not to the โembedโ section)
Scroll down until you find โVideo File Linksโ
It offers you links for different video resolutions
Copy the link (Button available)
Paste into spreadsheet
I refreshed my app and it showed up and plays the video.
Most exciting about the option for me is that the Player looks better than Youtube.
I tried youtube but was not satisfied. Youtube looked smaller and didnโt fill up my phone screen from side to side, but Vimeo does.
Happy app building
Awesome. Can you share screenshots or gif of the result? Interesting to see how it looks when you open the record and maximize the video size.
I donโt know what prevents the embed Youtube video to have the full screen option available on Appsheet.
I tried this today and it does work, but it doesnโt solve the issue of restricting video sharing as it gives you a download option on the video. it uses the video html tag to play it.
Looks nice though, here is a detailed view with a vimeo video on top and a youtube on the bottom.
The picture in picture feature is pretty good too, if you were embedding an instructional video in a long form or something like that.
Awesome, I wish it was the same layout for YouTube.
Hi! Quick question โฆ does the video play automatically without having to press the play button?