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>
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.
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 yet to find any examples of a MP4 played using the tag for HTML5. All the examples that I have found play using alternative code for Flash or other formats. In case my test video was not suitable I downloaded from a working example online but on my web page it does not play. The code is simple enough:
<video width="640" height="360" controls autoplay>
<source src="test/big_buck_bunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I have tried my test page in the latest Chrome and Firefox web browsers, but each gives the same message... "No video with supported format and MimeType found".
Chrome and Firefox do indeed support HTML5 video and the video object code is correct. So if the test page is not working the next step is to check that the server displaying the test page does indeed support MP4 files.
If you are using Apache put in your Directory directive:
AddType video/mp4 .mp4
If you are using Windows Server, instead of editing the site which can create an unwanted web.config file in your root, add the MimeType to the server. That way MP4 will be applied to all sites on the server:
Go to IIS Manager > Mime Types and add a new entry for
.mp4 video/mpeg
Click to save and then restart the 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/
<video width="320" height="240" controls="controls" preload="none">
<source type="video/mp4" src="myvideo.randomextension" />
</video>
Will this video be played on all mp4 supported browsers? As I changed the video extension from ".mp4" to ".randomextension".?
Yes, it should work, as long as the web server provides the correct Content-Type header. If you're writing the server yourself, in python or node.js or something like that, it's simple enough. If you're using an existing web server, you'll have to do some configuration, because those servers typically use the file extension to know which content type to use.
For example, if your web server is Apache, you might add a line like this to your .htaccess file:
AddType video/mp4 .randomextension