Feature: Video Embedding

[jcadence]

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.

1. To find the portion of your data where you’ll need to make adjustments for video editing, open your app editor by selecting the app you’d like to work on.
2. The navigation bar on the left side displays a tab titled “Data." Click this tab.
3. Once you’re in the data tab you’ll find a navigation bar along the top of your editor. The second tab is the “Columns” section. Click this tab.
4. Once you’re in this tab you’ll see a list of tables. Select the table you would like to have associated with video embedding.
5. From here, select the data column that you would like to contain the embedded video links and confirm that the column type is set to videos.

Important notes

• To see video embedding in action, here’s a sample app to review.
• Here’s a quick additional read if you’d like a bit more info.
• If you don’t already have a column reserved for your video in your original data source, you’ll need to add a new column first and then adjust its column type to the correct field in your app editor. Adding a new column may ask you to also regenerate your data (learn more about regenerating data which is absolutely ok.
• Setting up the ability to embed videos is similar to working with photos in your data. You can learn a bit more about the structuring your data for the photo feature here.

Try adding this feature to your app now and let us know how video embedding works for you.

Happy app building!

[Kirk_Masden]

Two thoughts:

1. First and foremost, the screaming goats video is hilarious!
2. But seriously, this works very well with YouTube. I remember having a lot more difficultly getting mp4 videos that are not on YouTube (e.g. hosted on my own server) to play properly. Has anything changed in that regard? If there’s an example app that plays mp4 files hosted on the web, and if the app responds dynamically to the size of each individual video (as is the case with YouTube), I’d like to see it. If not, it would be great if that capability could be added some day.

[Fabian_Weller]

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:

[New Bug Encountered: Uploading mp4 file](https://community.appsheet.com/t/new-bug-encountered-uploading-mp4-file/12660) Questions

With the column Type FILE, we can upload any kind of file. But some become useless. If I upload the file *.mp4 it will get changed to *.jpg. → The Video will not open. If I manually change it back to *.mp4, it will work. Same thing to *.csv → Will be changed to *.xls

[Kirk_Masden]

Interesting. I hadn’t thought of trying to use the FILE type. I’ll try to experiment with it later.

[anonymous]

Is there any way to save the video somewhere else besides YouTube, to get an embed code?

[Kirk_Masden]

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.

[Kirk_Masden]

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.

[anonymous]

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.

[Kirk_Masden]

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.

[anonymous]

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.

[Kirk_Masden]

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.

[jcadence]

@Kirk_Masden and @tcanelli have you both had a chance to posted these requests in the Feature Request category?

[Kirk_Masden]

I think I posted something about these topics (mp3 and mp4 support) in the past but it may be time to post again. Thanks!

[Kirk_Masden]

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:

[Create Custom Home View or Landing Page](https://community.appsheet.com/t/create-custom-home-view-or-landing-page/16664) Tips & Tricks ?

Appsheet “About” page and view is currently not really “customisable” for the moment, but some may want to generate landing page with more unique ways, and I was one of them. This would improve the appearance and users experience with app I believe. This is just a simple trick in terms of how to create such by using Appsheet generic features alone. I suspect some app creator has been doing the same or similar and putting view in place to their app, but I will place this post for reference by u…

[anonymous]

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

[Kirk_Masden]

I posted earlier about @tsuji_koichi’s use of animated gifs in AppSheet:

[Feature: Video Embedding](https://community.appsheet.com/t/feature-video-embedding/15436/14) Tips & Tricks ?

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:

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.

[Koichi_Tsuji]

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.

1. Create physical column to store text for Google Drive file IDs. Column name here in this sample case is named as [Google Drive Gif file ID]
2. Create the VC using formula like “https://drive.google.com/uc?id=”&[Google Drive Gif file ID]
3. Get the gif file whatever you want. Giphy is good and easy web app to generate gif out of your movie file or down load the work they made. For this demo, I download one gif.file from this site and saved temporarily on my drive.
4. For demonstration purpose, I selected Google Drive as storage for gif file as other appsheet creator should use the same for the main storage.
5. once the gif is saved, then get the sharable link where we can find ID for the file. Get the id from the url.
6. Go back to appsheet app and paste the ID to physical column

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.

[Kirk_Masden]

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!”

[Koichi_Tsuji]

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.

[Kirk_Masden]

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.