I’m trying to create a website where users can upload / watch videos, and leave comments on videos. So basically YouTube. I would prefer a method that let me scale my website, if it ever comes to that.
So far I have figured out how to display videos. But how can I let users upload videos?
UPDATE:
I am not a very skilled programmer and have no in-depth knowledge about anything, so maybe I should rephrase the question. What do you recommend me using for this. I am open to 3rd party tech and everything else?
For now im only focusing on the uploading aspect. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
// Display video
<video controls width="640" height="480" autoplay >
<source src="videoFile.mp4" type="video/mp4" >
<!-- fallback for browsers that don't support mp4 -->
<source src="videoFile.webm" type="video/webm">
<!-- specifying subtitle files -->
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English" />
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian" />
<!-- fallback for browsers that don't support video tag -->
<a href="videoFile.mp4">download video</a>
</video>
<script src="main.js"></script>
</body>
</html>
main.js
const myVideo = document.createElement("video");
if (myVideo.canPlayType("video/mp4")) {
myVideo.setAttribute("src", "videoFile.mp4");
console.log("first if");
} else if (myVideo.canPlayType("video/webm")) {
myVideo.setAttribute("src", "videoFile.webm");
console.log("second if");
}
myVideo.width = 480;
myVideo.height = 320;
CodePudding user response：
I would suggest doing a few tutorials on setting up basic CRUD applications first. Choose a js framework (or a couple) like react or vue, and follow along with some tutorials for setting up client & server side layouts in some basic react or vue stacks, like MERN stack for example.
https://aviyel.com/post/1278/crafting-a-stunning-crud-application-with-mern-stack
Once you have the hang of running a client side app and a server (like a node server that you had mentioned), and sending & receiving info between the two, then you work on having your server store that info in a database and respond with proper status codes & info back to the client side.
Once you can do that with simple things like getting & posting messages or images, then you can start researching sending files through those same methods.
CodePudding user response：
First you'll need a form containing an input with type="file" attribute , then, on form submit, you need to handle uploaded files on backend (e.g. PHP, Node.js or anything you like to use).
Then, in the backend, you have to implement your own logic, then just save the video to your storage and save name of the video or path to the video in your database, so you know which file you will need to serve to user on frontend.
Be aware that this is really advanced thing to do (you have to deal with bandwidth, security and so on), so if you really want to do it still, the best solution for you is to use some third party service for the backend part.
Recommendation
You mentioned that you are not so skilled yet, so I would recommend you service like Cloudinary, which can offer an API for uploading (so you will probably still need to create some backend part), or you can use their widgets right on the frontend, so all you have to do is just create a frontend and implement their widget for upload and they will take care of everything.
Hope this helps you, good luck!