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/
Related
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.
<video id="videoSL" muted autoplay loop="" class="video" controls>
<source src="/Development2.0/media.io_Fergus BluePrint Loyalty Program Video.webm"
type="video/webm"/>
</video>
When I viewed the webpage using http://localhost:12000/home, the video does not show up, I can only see a video controls.
But when I use open with liver server in vs code, I can see the video playing.
However, if I use open in default browser, I can only see a video controls again
The video control
Your problem might be that this file (/Development2.0/media.io_Fergus BluePrint Loyalty Program Video.webm) is not stored on the local host and the link is defaulting to localhost:12000/Development2.0/media.io_Fergus BluePrint Loyalty Program Video.webm, where it is not stored.
Try moving your file into your localhost and see if that works. You can test if it is on the localhost by going to localhost:12000/Development2.0/media.io_Fergus BluePrint Loyalty Program Video.webm.
If that doesn't work, try replacing the spaces with %20s. Edit: Do this in the <source> tag.
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 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>