I want to make an on the go web server with a bunch of videos. I am using the Raspberry Pi to code this. I will download youtube videos and put them in a folder. How do you put a folder of videos into an html website?
You need to put them into a folder located on your web server. If its locally hosted, i.e, your html files are on the same system as your videos, you should have your file structure looking something like this:
--[FOLDER] - Videos
| -- [FILE] - yourvideo.mp4
-[FILE] - index.html
So your video will be located in /videos/yourvideo.mp4.
You can then call your video in the index.html file. If using HTML5, you can use <video></video>:
<video width="320" height="240" controls>
<source src="/videos/yourvideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
https://www.w3schools.com/html/html5_video.asp
Name the .html INDEX.html and make a folder called INDEX.html_files
that should work put the videos in the folder then type /INDEX.html_files/videoname.mp4 as the file name
Related
<video width="500" height="500" controls="contrlos">
<source src="hope.mp4" type="video/mp4">
</video>
this is the code I tried on vscode, the video file is stored in my drive c, but I don't know why when I run it, it doesn't work, and I cannot play the video. by the way I open it in Chrome. and when I google a video and copy the link address in src="" the same problem repeat. does the audio and video files we want to put in html need to be stored in a special place in my computer?? plz help me! I'm beginner.
There are 2 solutions of this problem:
Keep the video file in same folder where you have stored your html file or
Wrrite the full path of the video file where you have stored.
I am adding basic video .mp4 from my Windows 10 laptop in HTML but it doesn't pick up the video at all. I tried to open in any browser it doesn't open.
I am reproducing the relevant parts of your code here for explanation purposes.
This is the correct HTML markup to include videos:
<video controls>
<source src="/video/example.mp4" type="video/mp4"> // on your server, is your file 'example.mp4' located at /video/example.mp4 ?
<source src="/video/example.webm" type="video/webm"> // on your server, is your file 'example.webm' located at /video/example.webm?
</video>
I suspect that you are possibly not using the correct filepath for your video files.
As a test, try replacing the content in the src attribute with a video from an online source.
So your code will look like this now
<video controls>
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
</video>
The example video should be displayed on your page now.
So double check the path to the video files and make sure it is correct, because other than that the code is OK. (added / to the beginning of the filepath to refer to your root directory.) If your video files are located in the root directory, then use src="example.mp4
You can find more info on the video tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Super green on some of this stuff so I apologize in advance.
I want host video files on my website and have them play in the browser. Currently, when going to the hosted file it just downloads the .mp4. Is there a way to set up a folder of videos to play the video in the browser automatically instead of downloading? I'm trying to avoid having to maintain html and embedding videos. I'd rather just send a url to the specific video and the end user only play that video in the browser.
I have the files hosted on Domain.com. Ideally, I would send a subscriber a link like "www.website.com/videofolder/video_name.mp4" and that video would just play in the browser. Is there a way to do this without making separate html files for each video?
You will have to send an html wrap with the link, this:
<video width="320" height="240" controls>
<source src="url/to/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Otherwise you'll just be sending a file stream, hence the download you're seeing.
I will also recommend you to explain:
How you're providing the file to the browser (Hosting),
Are you using NodeJS, Flask, Django, NGINX, AWS S3, etc.
So other contributors have more idea of how to help you out.
I'm trying to create a movie player on my localhost but I have an issue, when I try to play a movie (.mp4) file it seems like my video is not loaded (movie size is 2.4gb) but when I try with another .mp4 file with less size (60mb) works perfectly! I'm using video html tag and I tried with videojs but I have the same issue.
This is a short example of what I'm using:
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="Images/Image1.jpg" data-setup="{}">
<source src="RootFolder/Pelicula2.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
What could be the problem and what can I do to solve it? Maybe its a problem with my source src? Should I try it with another format?
UPDATE:
I change my Files folder to my desktop and now this is my code:
<video controls>
<source src="C:\Users\franc\Desktop\Movies\Pelicula2.mp4" />
</video>
With this I get the following error message Not allowed to load local resource: file:///C:/Users/franc/Desktop/Movies/Pelicula2.mp4 but when I click on that hyperlink it opens another window and the video is displayed properly.
using
C:\Users\franc\Desktop\Movies\Pelicula2.mp4
is allowing the browser to access content from the user local system which is not allowed to do directly in the browser you can host your video on any blob like amazon s3 or Microsoft azure or if you have to put that folder in your c:\ directory you will need to create a simple server that serves this file to the client maybe you can look into Node.js it will be your easiest solution specially if you have experience working with JavaScript
Edit :
After doing some research i found that you can disable this security feature in your browser manually just type the following in the Terminal
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
Make sure you replace PathTo with the current path of chrome on your system
source : http://www.chrome-allow-file-access-from-file.com/
I'm trying to play a MP4 video using video tag, but nothing is displayed. When I have my video in the same project directory the video plays, but I need to have the video in another directory. This is my code:
<div id= "show">
<video width="320" height="240" src="file:///F:/test.mp4" type="video/mp4" controls>
</video>
</div>
The problem is the path, so, what is the correct way to declare file's path?
Go to the mp4 when it's in the other directory and right click on the properties. copy the file path and then paste it in (and precede it by file://). make sure you turn the slashes to turn forward in the file path.
it should look something like this
file:///F:/Users/yourname/folder/subfolder/test.mp4