What is the best way to accept and host user uploaded video on my web app?
Hey folks,
The current iteration of my web app allows users to submit videos, but just has them submit a YouTube link that I parse and embed on our site. The problem I am running into is that when a user removes a video from their channel, it breaks the UI on my site.
So I either need to run a job that removes videos from my site when they are removed from YouTube, or just allow users to upload directly to my site.
Can anyone recommend the simplest solution to accept and host user submitted videos?
Greg
Cloudinary
Yeah I think that's going to be my next step - thanks!
Here is a thought. Someone can remove a YouTube video at any time. So even if you create a job that removes dead link YouTube videos on your site, there is still X amount of time between the user deleting the video and your job removing it.
Also, I am not sure if YouTube has rate limiting or not checking the status of videos.
Would it be easier to fix the UI of your web app and handle the situation where a video is deleted from YouTube?
How exactly do you envision that working? My app essentially stores the YouTube url, parses out the video ID, and uses that to grab the thumbnail to display on the site.
Example here: http://tinypic.com/r/imjio8/9
Hmmmm.....there may be multiple ways for you to do that.
The steps that I am initially thinking you would take would be:
I mention the arbitrary 300x300px just to say that the placeholder image would be the same size as the video thumbnail that you show so that your UI should not "be broken". I am assuming in your original post where you said "your UI is broken" you mean that the UI looks off. It breaks the look of the site because it's not consistent.
I can't really do that in my pug template... I could loop over the videos in my controller and do a get request for each URL before rendering the template, but that seems wasteful.
It's fairly rare, so I think a daily job that cleans out removed videos is going to be my best bet for now.
EDIT: Actually I should be able to just add an event listener on the template and remove videos whose thumbnail request returns a 404
EDIT 2: Apparently I cannot listen for 404 errors. 🤷♂️
Right. It depends on how you are requesting and displaying the thumbnails. I am not sure how you have built your web app so I have been trying to give some ideas without knowing your tech.
Can this not be fixed with CSS? Have a placeholder of the same size of the loaded thumbnail so if the thumbnail fails to load it still has a placeholder showing that is the same size as the thumbnail which keeps the webpage from "breaking"?
Possibly... For now I've just added a 'published' property to booleans and unpublished the broken videos.
Thanks for all the suggestions - I'm just getting back to building this after a couple months off so it throwing ideas around has helped shake off the rust! :)
No problem.
I found a HTML solution that may be able to fix the issue for you: https://stackoverflow.com/a/7995298/1486374
It uses the
onerrorattribute of the<img />element. I didn't even know this existed!So, if the image fails to load, it will show an image that you set. An image that would be made as the same size as the thumbnails are set to show as. The image could be created to say something like "Video has been deleted" or something inside of it.
That's a cool solution, unfortunately it doesn't work for YouTube thumbnail images because YouTube sends back a 404 along with a placeholder error image.
https://stackoverflow.com/questions/42516198/on-error-not-firing-for-youtube-images
Oh, geez. What a pain.
There is a way to do this, but you may need to do some javascript work to make it work. Something a little more complex like performing AJAX calls or something similar.
I was going to make a call on the server side to see if the video was there before rendering the page, but I didn't want to double the requests I'm making. I just made it possible to unpublish videos, which solves my problem for now.
Once I am storing the videos myself this won't matter.
This is a good middle of the road solution. Have you seen this used anywhere?
Sounds like your cheapest solution would be your first suggestion and schedule a job that checks for dead youtube links on your site. For hosting, you can directly host on AWS S3, however, the costs can accumulate after time. The latter is probably the cleaner, albeit, the more expensive solution.
I think that's going to be the solution for now while I dig deeper... Eventually I'd like to be in control of my user videos though.