I have some trouble getting my .mp4-videofiles working. I have edited my .htaccess with the necesserary addTypes, right html5-video-tags ect, but still some of them WON'T show!
I have now tried converting them from .mp4 to .mp4 wich made some of them work live on web.
But heres the real issue that i really can't figure out why it is so:
All my videoes works very well in both MediaPlayer and VLC, BUT, when i lay them on my website, the videoes won't work. I have tried access them via a direct link and the "corrupted" ones won't work while the working ones works.
What it tells me is that i have the wrong MIME-types (No video source found with the supporting MIME-type) - correct translated? ;)
All videos have the same video-html-settings:
<video width="300px" height="168px" preload controls>
<source src="path-to-video/video.mp4" type="video/mp4">
</video>
What is wrong?! :S I'm have no experience at all in videoes and Google comes up with nothing, than i can use some weird looking "ConvertThisToMP4" or "LetMeFixYourMP4"-programs...
Hope you guys will help me or lead me on the right way :)
Sorry for my bad english...
mp4 for web and mp4 for playback in VLC are different things. You'll get different mp4 video support depending on your web browser, though most modern browsers will handle mp4 in some way.
mp4 is a 'container' format, and as such can contain video compressed with many different video and audio codecs. For an mp4 video file to work in a web browser it needs to be encoded with the h264 video codec and AAC audio codec. Some browsers are even more specific and require videos to be encoded with 'baseline' h264 which uses a simple/fast to decompress version of h264 (this is generally for mobile browsers).
You should have a look at your video files using a media inspector to check what the codecs are for the videos. in VLC you can do this from tools->media information then choosing the 'codec' tab.
You can use handbrake ( http://handbrake.fr ) or mpegstreamclip ( http://www.squared5.com ) to recompress the videos to h264/aac/
As an aside, In your HTML you don't need the px values in the width and height tags, inside HTML all size values are assumed to be px, it's only in CSS you need to define the unit.
Related
Because I dislike Youtube and Vimeo is too expensive, I chose to upload my videos directly to the server at my web host and embed the videos on my site using the HTML5 tag (see photos for the code). The videos play fine on all browsers except for Firefox and I can't figure out why. https://memoriaelinguagrumentina.org/english/saponareseCuisine.html
I've seen several other posts on here asking about very similar problems; however, nearly all are at least 8 years old. I've gone through them as part of my troubleshooting process, but without any luck.
I've seen it recommended here to use multiple video formats (.mp4 AND .ogv) because there is no universal format supported by all browsers. Firefox did not always support mp4, but I believe it does now. So I don't believe this is the root of the problem.
I checked with my web host to see if they have the correct MIME types (see photo).
I cleared the cache on my browser, set the privacy settings to normal, and checked hardware acceleration.
What am I missing?
*note: To save disk space, I'd like to not have to upload duplicate videos in different video formats to the server, ideally. Since Firefox now claims to support mp4, I was hoping to get away with using only mp4.
Firefox doesn't support all video files. They generally support MP3, WebM, Ogg, and Wave containers, and if you are using an MP4 container then it usually depends on the platform decoders for AAC and H.264 audio and video streams. The video encoder format that you are using isn't supported by firefox. You should use supported encoders for your video.
You can find more information here:
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Your MP4 videos are using H.265 video codec.
You need to have them encoded as H.264 to work in most browsers.
Solution: This means you must re-save your videos as a new format.
The problem is not just Firefox, even Windows Chrome does not play H.265 encoded video.
Things to fix:
Re-encode as H.264 (use High or Main profile for better compression-vs-quality output).
Re-size your videos (when doing re-encode). 720p should be okay for demos/intros. You don't need a large 3840 x 2160 pixels video showing inside a small 672 x 398 pixels box.
Your file size is not good. 286 mb is too much data loading for just a mere 6 minute video.
I need to play MPEG-1 files dynamically from a browser. Uploading them to YouTube or converting the videos is not an option.
How can I do this?
I've seen this, but the answers do not apply to MPEG-1. Is there a way to play mpeg videos in HTML5?
The video tag is not working for the file with Chrome:
<video class="fullscreen" autoplay>
<source src="video/test2.mpeg">
</video>
It just displays a black box and stuttering noise/sound. I can verify that the video is not corrupt because I can play it with VLC. I only need this to work on one specific browser (it does not have to be cross-compatible). Plugins are OK too, as long as I do not have to convert the video. Though I'd rather avoid them.
Some browsers don't support older formats in <video> on purpose, to limit number of crappy, legacy, and potentially insecurely implemented video formats on the web.
The only combination that has a decent chance of working is H.264 (MP4) and WebM (or Ogg Theora), so you must convert the video and for good browser support you will have to generate at least these two formats.
The good news is that modern codecs are much more efficient than MPEG-1, so you'll get much smaller files.
Other options may be:
Give users a direct link to the video so they can download it and play in an external player like VLC.
Embed video using oldschool <object> element, and hope some browsers still have legacy plugins that can play videos (but e.g. Chrome has recently removed support for all plugins except a couple written specifically for Chrome's own API).
Use Emscripten (asm.js) to compile an MPEG-1 decoder to JavaScript and decode the video yourself to <canvas>. JS these days is fast enough to pull that off (although it will quickly drain battery of mobile devices, and a poor video codec combined with an extra download of a JS decoder will be a massive waste of bandwidth).
You can play MPEG-1 videos using JSMPEG: https://jsmpeg.com/
Sample code here: https://github.com/phoboslab/jsmpeg/blob/master/view-stream.html
It seems that i cannot add .wmv-videos to my site, though some ppl (in Google search) says it can an anothers say it cannot...
But i only have these videoes in .wmv-format and therefore have to put them on page in this format.
I have tried many things as:
<video id="sampleMovie" width="300px" height="168px" preload controls>
<source src="video.wmv" type="video/x-ms-wmv" />
</video>
And also have i rendered my .htaccess
AddType video/x-ms-wmv .wmv
And also without the dot.
But what it tells me when i try to load the page with the video is:
"No video found with the supporting MIME-type"
(It says that on another language than english, so it might not be 100% correct, but the point should be there)
How can i make this work?
You have three options.
One:
WMV files can play in IE with the Windows Media Player object. See this.
Two:
There is no way. No browser (excpet IE with above solution) supports playing WMV files. You will have to convert it into a format that browsers know how to play. A free online converter to MP4 is
here
and a standalone one is here.
I am making a kind of a social network. I am now in this part where I allow users to upload their videos and allow others to watch them. I have been researching on the HTML 5 video tag. People say that it would be better to give multiple sources for a video with three different formats namely ogg, mp4 and webm for different browser compability. But the user may upload any kind of video. It may be an avi or an flv or whatever. I am sure that there is a possible work-around. I know that facebook and youtube use flash. But I have exactly no idea on how to get started with flash on HTML. Is there any way around or any guide for flash ? Please Help me out.
I know that facebook and youtube use flash.
They do, but not as a work around for limited browser support for arbitrary uploaded videos.
They transcode the videos (you could do this with ffmpeg) on a server into all the formats that they support.
I'd suggest using an existing Flash video player, such as JWPlayer or FlowPlayer.
Their integration is very easy, as you'll just have to include some JavaScript and CSS files in your HTML page header. Then for every video you want to display you're putting a small HTML snippet at the position where you want to show the player.
This is the default snippet for FlowPlayer:
<div class="flowplayer">
<video>
<source type="video/mp4" src="/path/to/intro.mp4">
</video>
</div>
I'm trying to include a HTML5 video player on a site.
I've got the following code:
<video id="player" controls="controls" width="100%">
<source src="http://trailers.apple.com/movies/paramount/captainamerica/captainamerica-tlr1_h.480.mov">
</video>
This works in Safari, but not in Chrome and Firefox, is the .mov encoded in a weird way that doesn't allow them to be used like this? trailers.apple.com which uses the same URLs work fine in their player.
The probability that on apple's site they have multiple links to different encoded movie files. They do this because there is no current movie format that works across all major browsers.
Also just because the URL is the same doesn't mean that the same video is being served up on apples website... They could be doing some URL mapping magic to get a correct video format.
look at this link for a good current table of support per codec
http://diveintohtml5.info/video.html#what-works
Apple only serves up their videos in the MOV format. This means that only Safari can watch the videos since it is the only browser that uses Quicktime in its HTML5 video implementation. If you try opening the file directly in Chrome you should either see it download or the Quicktime plugin kick off.
I personally don't have Quicktime so when I go to the Apple trailers site, I get a link to download Quicktime and can't proceed any further without doing so.
captainamerica-tlr1_h.480.mov is just a .mov file that redirects to captainamerica-tlr1_h480.mov But it still won't work in browsers that doesn't use Quicktime for <video>. You have to set User-Agent to "Quicktime" for trailers.apple.com.
other browsers doesn't understand .mov, quicktime does. you need to serve up separate files for safari. you can generate needed files with nero or in-browse via media.io.