So I am trying to load a video from my files and play it on my html window.
But when I load the site, the video does not play and the console tells me that I am not allowed to load a local resource. Here is my current html code to play the video:
<video controls>
<source src="C:/users/zacle/Documents/VideoPlayer/uploads/SpideyZac.mp4">
</video>
Can anyone help me get rid of this error and actually play my video.
Running you project from http means having a http server and running your project via http://localhost.
Related
I'm trying to embed a local video file that I have stored on my raspberry pi onto a locally hosted apache webserver that I also have on my raspberry pi.
I've tried multiple solutions, including the ones here and here, but none of them have worked; there isn't even an error message, there's just nothing where the video is supposed to be, unless I have the 'controls' parameter enabled in which case there's just a black box with the video controls on it. Something of note is that videos do show up when I use youtube's embedding code.
Here's my current code:
<video width="420" height="340" autoplay>
<source src="file:///home/pi/test.webm" type="video/webm">
</video>
What exactly am I doing wrong here?
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 have a video uploaded to an Amazon S3 server and I am using Amazon cloudfront to host it at http://d1cjzj1b4csf2b.cloudfront.net/test.mp4. I want to play the video using the HTML5 tags and the video player. When I host the test.mp4 file locally and use the HTML code below, it works in my browser. However, it doesn't work when I use Amazon Cloudfront. I tried using Cloudfront with both HLS and RTMP streaming (and JWPlayer), and neither of those worked either because Amazon's documentation was pretty poor. Any suggestions for how to host my video and embed it in a page? I would prefer something simple, but I can obviously try to use a player like JWPlayer. Thanks in advance.
<video controls>
<source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The code provided works in Chrome Win10. Your MP4 is downloading if the url is added to browser's address bar so most likely the file's content-type is either not in the header or it has the default value of application/octet.
Download a free copy of CloudBerry Explorer Amazon S3 or use the console
After installation or sign on, locate your MP4 and check the content-type and make sure it's video/mp4.
Look for an option that allows you to edit HTTP Headers with CloudBerry.
Look for Metadata options in S3 console.
Both can be accessed by right-clicking the file and opening preferences.
If you setup your CF Distribution to use HTTPS protocol, then add the s to your url's http
<video controls>
<source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I setup a server hosting a video as a static file
Then I use html 5 to load and play the video file.
<div id="video wrapper" >
<video id="video" width="500" height="300" controls>
<source src="/videos/test.mp4" type="video/mp4" >
Your browser does not support the video type
</video>
</div>
According to this discussion, How to stream videos through HTML5?
ideally the video will be loaded progressively(steamming). But in my case, the video loading seems to block entire page loading and it took several mins before the page finish of page loading and the video starting to play.
the server side has an output like this:
127.0.0.1 - - [29/Jul/2013 18:00:23] "GET /videos/test.mp4 HTTP/1.1" 206 955542769 102.4900
I interpret it as: 102 secs to transfer size 9555mb video file "test.mp4".
the test is done with local server(localhost), so I guess it is not network issue. I have no idea how to debug this. Do I need to write a dedicated streaming server instead of hosting a static file?
Any tips for troubleshooting will be appreciated.
In mp4,you need to check moov atom.
An atom is a self-contained data unit that contains information about the video file.
just open your mp4 file and check if there is "moov" string in the starting your mp4 file.
For progressive download,the moov atom should be at the beginning of the file.
If the moov atom is at the end of the file,it means progressive download is disabled for the mp4 file.
just run the following linux command.
head -c 50 video.mp4
output should look like this:
ftypisomisomJ??moovlmvhd?%?:?%?:XP?