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.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
I figured out how to stream video from the camera on the Raspberry Pi, and how to receive and view it in the browser with an URL like:
http://picamhq:8080/?action=stream
The type of video is M-JPEG, and info on mjpeg-streamer is here.
Now, as the browser is capable to play this video stream, I expect that should also work inside a HTML web page. The advantage would be that such web page can additionally show some buttons to start and stop the streamer, and to change parameters, such as camera settings.
I looked into several answers of questions like How to embed streaming Video (rtmp) in HTML, but that is not about embedding the video in a html page.
I tried with a video tag like:
<video width="320" height="240" autoplay controls>
<source src="http://picamhq:8080/?action=stream" type="video/mjpeg">
Your browser does not support the video tag.
</video>
Unfortunately, this does not work. The web page shows a dark rectangle where the video should play, and it seems to take forever to load the entire stream, which of course is not productive, as the stream will never end. Besides, I want low latency :-)
Then I looked at info like this SO question on live html streaming which talks about lots of complex stuff. Does that mean that the nice and simple mjpeg-streamer cannot make a stream that is compatible with the html video tag? And that a stream that the browser can play, does not necessarily work inside a html page?
The solution you are using is not actually streaming video it is sending a stream of individual JPEG images.
From the documentation:
This plugin streams JPEG data from input plugins via HTTP
If you look at a demo site for MJPEG_Streamer you can see this also as the output from the stream is displayed in an 'img' tag rather than a 'video' tag:
<p id="streamwrap" class="xform-p">
<img id="streamimage" class="xform" src="/?action=stream">
</p>
(from: http://hashey.dip.jp:8090/stream.html - note the demo does not appear to be sending a stream at the time of writing).
You could convert this stream to video or for your requirements you might just need to add control to start and stop making requests to get the current image from the stream.
I'm not an expert on the start/stop thing (you can control the camera with ajax calls to the raspberry webserver, i assume), but how about using an iframe for display?
<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>
I have a .wav file that is being continuously appended to. Is it possible to play this file using the HTML <audio> element? Here is my current approach:
<audio controls="controls" autoplay="autoplay" preload>
<source src="stream.wav/" type="audio/wav">
</audio>
If I refresh the page, it reflects the new audio available in the file, but it does not render as a streaming player. It seems like it should be playing in "live" mode according to this question.
I would also be open to using some kind of framework or JavaScript to accomplish this if that would be best practice, but I haven't found anything yet.
Files cant end in /
src="stream.wav/"
Should be src="stream.wav"
In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Server-side_Streaming_Technologies
That section of that page lists a few popular options for doing this.
I built a very simple personal website and hosted it through FTP.
In the site, I have 2 videos I would like to play. Using the video control class in HTML, I put the video onto the site. Locally, my video plays fine. However, the moment I upload my website online, the videos stop working. I have double checked that my code is identical and the two videos are in my website.
Here is my code for the video control class.
<div class="musicVidSub" id="musicSub3">
<video controls class="musicVid" id="musicVid5">
<source src="images/flute5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="musicDes" id="musicDesVid">
Description
</div>
</div>
If you want to check out the situation yourself, the site is ericamwang.com
If anyone could help me figure out why, that would be very helpful. Thank you in advance!
The folder on your website is spelled with a capital I. You must use
<source src="Images/flute5.mp4" type="video/mp4">
Windows does not differentiate between lowercase and uppercase letters in the file system, but Unix/Linux does. That's why it works on your local computer, but not on the web server.
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/