How would I go about showing a video with anvil?

Hello all,
I just finished the news aggregator tutorial and wanted to expand on it by allowing users to set the article images/thumbnails to videos as an exercise to myself.

I found out pretty quickly that the Image form isn’t able to show video files coming from a data table so I looked around the forum and tried this answer (using an endpoint to request the file url etc…):

I didn’t manage to actually do any of the html though (my knowledge is limited in that area).

If any of you know of a straightforward way of showing a video on page, I would love an explanation !

Thank you very much in advance.

Here is a Video Player Example

https://anvil.works/build#clone:ZJRO34GQF4QDEOBI=BM56FPJ2L46I3BUOUOGKPCFB

Hope this helps

1 Like

Thank you for the PoC @divyeshlakhotia !
Unfortunately I haven’t been able to make it work.
Opening the app I saw a notification saying some features were for payed memberships only…
The app still ran with no errors so I tried implementing it in a similar way but I think I am missing some things.

What are these lines for ?

import anvil.js
from anvil.js.window import document

There weren’t supposed to be any paid features in the app.

And as @owen.campbell mentioned, those lines are used for accessing Javascript.

If you are unfamiliar with Html and Javascript, you can just add the app as a dependency to your existing app and use the Video Player.

@divyeshlakhotia After some fiddling it worked very well so thank you

@owen.campbell Thanks for the link

1 Like

Hello there. I haven’t been able to get this solution to work in my app. I grabbed the code from both the video form and the Form1 form. I set the video form to be a component and used it as a component. The video player frame does not show up on both the video form as well as the Form1 form.

When I run my app, I get the following error:
AttributeError: ‘NoneType’ object has no attribute ‘src’ at [video, line 22](javascript:void(0)) called from [Form1, line 22](javascript:void(0))

Can someone please help me? What is baffling me is I copy-pasted the code verbatim into my new app. So what am I missing?

Aaah…ok , i cracked it. After digging around I realized that I needed to choose ‘Custom HTML’ in the Design tab > Properties. I pasted this code in the custom HTML editor and it worked.

(closed as solved)