On my local server, the html5-video is reproduced in all browsers, but on the web server it refuses to be reproduced.
Here's the code:
<video controls width="640" height="360" autoplay="true">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
</video>
Use a HTTP monitor, such as the one built into Firebug (on the ‘Net’ tab) to see what the response to the HTTP request for the video file is.
Possibly the production web server is returning the wrong Content-Type for .ogv and/or .mp4 files. (It should be video/ogg and video/mp4, respectively.) If so, you would need to configure it to add the new MIME media types; how you do this depends on what server software you are using.
Related
I'm trying to play a video in a tag on a plain html page. I have a video in Premiere which i have tried to export both as webm and mp4 (h264) which is located in the same directory on the FTP server as the html file. No matter which codec i render in, the player stays blank (white) and GET errors appear in the output console:
GET Errors
As you can see the video files are clearly in the same directory on the FTP server:
Files on FTP server
The GET error has been replaced with a 404 error sometimes when using different presets with both webm and h264. As far as i know webm and h264 are especially suited for html5 web-players, adobe has tons of different presets, so I really don't get why this has to be such a tricky problem to solve. It is impossible to find someone else with the same problem and this irritates me even more.
We use Azure as web hosting, so if there are any default setting prohibiting video display or similar, tell me!
[EDIT]: Here's the html code for video_presentation.html:
<video width="100%" height="100%" controls>
<source src="course_introduction.webm" type="video/webm">
<source src="course_introduction.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
PLEASE HELP!
And thanks in advance.
Try This
For multiple video clips as you have mentioned above, for maximum HTML5 video browser compatibility you need to make 3 different versions of your video. You can embed multiple HTML5 videos into web pages in a HTML5 video element, below is the HTML5 Video markup example for multiple videos:
<video width="640" height="360" controls>
<source src="ftp or http://path/course_introduction.mp4" type="video/mp4" />
<source src="ftp or http://path/course_introduction.webm" type="video/webm" />
<source src="ftp or http://path/course_introduction.ogv" type="video/ogg" />
</video>
enjoy!!!
You might need to add the mime types to the sites .htaccess file:
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
I'm looking for a little more direction, I've researched other similar issues here, but can't make it work for my isssue.
The following code works in Chrome, but not Firefox. Both browsers are updated to their current versions.
<video width="576" height="432" autoplay muted="muted">
<source src="http://files.enjin.com/632721/Video/My_Movie.ogv" type="video/ogv">
<source src="http://files.enjin.com/632721/Video/My_Movie.webm" type="video/webm">
<source src="http://files.enjin.com/632721/Video/My Movie.mp4" type="video/mp4">
</video>
I'm not sure what I may be missing to make it work in Firefox. I've given up on Internet Expoder (and don't care about IE anyways)
The source page is www.reallybadplayers.com If you want to see how it's implemented in each browser.
Future thanks to any help I receive.
The mime type of http://files.enjin.com/632721/Video/My_Movie.ogv is binary/octet-stream
The mime type of http://files.enjin.com/632721/Video/My_Movie.webm is also binary/octet-stream
You need to serve the files with the appropriate mime type for them to work. For ogv that's video/ogg, or webm it's video/webm and for mp4 it's video/mp4
How you set the mime type depends on the server you're using to serve the files. You'll need to read the documentation for that server.
<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
in video tag src we are trying to give src as a ftp resource its not picking it up. Can somebody give some direction on that.
<video src='ftp://server/pqr.mp4' />
I suspect that's because to allow efficient usage, the browser makes HTTP range requests, which are part of HTTP, not FTP. FTP is a pretty old protocol, and isn't really appropriate here for lots of reasons (no range requests, basic/no caching info, etc).
something like this
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
<source src="http://movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The issue here is :
Loading an FTP sub-resource through an HTTP / S page is not allowed
This is for security issues, see https://bugzilla.mozilla.org/show_bug.cgi?id=1361848
Use this code:
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
[See the updates! - Works on Android/IOS browsers but no where else. FireFox, Chrome, Opera, Safari all fail. Even though they are definitely HTML5 video tag ready]
Simply trying to stream a video using html5 tag. All I get is the video player controls and nothing else. This is so simple I assumed it should just work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
<source src="test.mp4" />
</video>
</body>
So where could I be going wrong? I've tried a lot more than this small snippet. I've tried other peoples example snippets. I've tried many videos, many formats (mp4, flv, ogg). I've tried viewing it in Chrome, Firefox, Android Embedded browser, Opera, IE9.
I can stream the file from the URL in programs like VLC without any issues.
I am beginning to think Apache2 might be the issue here although I figure the fact I can stream the URL from VLC without issue would suggest Apache2 is not the problem.
Any help appreciated. I'm pulling on hair here.
Update:
Whenever I try and access the URL of the video directory from within Chrome it seems to give me this error: Resource interpreted as Other but transferred with MIME type undefined
That error is definitely a server side problem, apache2 must not be configured properly somewhere?
If I access even a FLV file directory from the URL within my Apache2 server it gives this MIME type undefined error. It the video controls. Whenever I click play it spams the MIME type undefined a few times.
Update2:
Verified my .htaccess is being read
Added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
Still not working, still see the MIME TYPE UNDEFINED in Chrome.
Update3:
Firefox and others can view the URL/test.mp4 without issue but NONE can get the video tag to work properly.
Update4:
Android can get the video tag to work now. The .htaccess change seemed to fix that. However not one single desktop browser can for whatever reason.
Firefox and Opera don't support MP4, and Chrome will drop support for it soon. It's a good idea to also add a WebM source.
Try adding the type attribute to the source declaration:
<source src="test.mp4" type="video/mp4">
Here is my html code from my site www.pi-corp.net. This allows for playback on all commercial browsers with fallback to flash.
<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." /> </div> </object></video>