简体   繁体   中英

How Can I detect video or image from URL and display it accordingly in a single tag using React and Material UI

Ok Let me explain my situation, I am trying to build a Cover section for a profile page, where users can set either an image or a video as their cover.

I am unsure how to render both a video file and an image file based on the provided file URL.

I tried to find a similar project, but I found none.

Can you guys help me with how to accomplish this?

Yes you can do if just use Vide tag and put the same url in poster and src

 <video width="100px" poster="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" muted autoplay loop ></video> <video width="100px" poster="https://clashdome.io/images/newHome/video_home.mp4" muted autoplay> <source src="https://clashdome.io/images/newHome/video_home.mp4" type="video/mp4"> </video>

so if its a video then it will run as a video if its a image then it will render as image, also idk if its correct according to accessibility but its pretty clean and does the job perfectly

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM