Been working with HTML5 video for a bit now - I found that in order to cover all my bases for browsers, I need 3 formats for my html5 video player: .mp4, .ogv, and .webm (with a flash player fallback of course). Been converting using a combination of wondershare and firefogg, and I've had great success with it.
However, I recently discovered that Chrome/PC is playing the audio from the video, but the video itself isn't rendering - for all 3 formats. It's fine on Safari/Mac, FF/Mac, Chrome/Mac, FF/PC, and IE/PC - but not Chrome/PC. I've determined that this isn't an issue with my html5 player, but with the videos themselves - accessing the files directly yields the same results, audio with no video. Has anyone else encountered this? Is there a special trick to web-encoding the videos for Chrome 11, or do I need a 4th format?
it'll be a codec problem.
try this when encoding for mp4 format.
video codec : MPEG-4 AVC/H-264
audio codec : Advanced Audio Codec(AAC)
Related
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.
I'm trying to embed video playback on a website, using HTML5 video tags.
For some example mp4 files I found, the video plays well on both IE9 & Chrome,
but when I use mp4 files converted from avi/mkv files I have - The video plays only on Chrome, while IE9 refuses to play it.
I've tried several video conversion tools:
HandBrake, Miro Video Converter, Freemake Video Converter.
All produced mp4 containing H. 264 video & AAC audio - And all works well on Chrone.
I also tried playing around with IE9 multimedia/security options - but nothing has changed.
Well, I read about IE9 having a bad support for video playback and html5 in general, but still - it's clearly stated that mp4 is supported for all h264 profiles.
As you can understand - I have a priority for this website to work well on IE9 - So I'd appreciate any tips here.
I have the same issue and found out that it's the combination of Miro Video Converter, videojs and IE9:
When I convert with EasyHTML5video and standard settings (you cannot change any setting) everything ik OK and plays is IE9 with videojs.
When I convert with Miro Video Converter and standard settings (you cannot change any setting) IE9 doesn't play and has a VIDEO OBJECT error.
I've compared the 2 outputs and I think it's only the audio that is different. Miro is 2 channel 48Khz and EasyHTML5 1 channel with 16Khz.
I hope to find the right conversion tool, Miro is better quality than EasyHTML5video, but maybe there is the problem.
My suggestion would be using a plugin which utilizes feature detection such as VideoJS
It will provide the necessary fallback to flash if the video will not display correctly on the browser
Follow the instructions on http://videojs.com/ should be straightforward
I am planning on video upload capability on a public website.
I am not going with Flash instead going with HTML5 using MediaElement.js
My goal is to make sure that processed videos play on browser and all smart devices
I used to convert uploaded videos to flv file to play using flash.
I will use FFMPEG to convert uploaded videos to the target format.
My question is how many different format do I need to process\convert the uploaded files?
You will need at least 2 for the HTML5 video element. You need to supply a H264 and either Ogg or WebM. See Wikipedia for the supported codexs.
I have never used MediaElement.js but it look like they can work with either of the two formats in browsers that don't support the element.
if you want to play everything via HTML5 then YES, you do need 2 video-files for each video, as explained by Maurice.
BUT: You could use the Flash-fallback and only use mp4 videos (MEJS will take care of Flash). That way it plays on iOS, many Android devices and chrome, safari and IE9 via HTML5 - Firefox and Opera users will see the Flash-player.
I am embedding a video feature on my website, and I am planning to use HTML5 player to play those videos.
2 questions:
1. Which formats should I encode the uploaded videos to (I need mobile support + PC + mac).
2. How can I prevent people from downloading the movie (HTML5 plays directly from my CDN, hence the link can be fetched easily)
Can CDN protect the content by issuing an access token that will expire in X time?
Thanks all!
1)
If you need to support also Firefox 3.6 you will need to ensure at least 3 formats: mp4, webm and ogv. Otherwise mp4 and webm are enough. mp4 is loaded by the apple mobile devices (ipad, iphone), Safari and it can be loaded by a flash player (supposing you have installed flash player plugin 9r3 as a minimum version). webm is supported by firefox and chrome
http://diveintohtml5.info/video.html#what-works
2)
take a look at How to prevent downloading HTML5 videos
First, Zencoder has a fantastic page on HTML5 video encoding recommendations:
The minimum for HTML5 video is MP4 + WebM or Ogg (or both), using the MP4 version for Flash fallback.
For mobile support, one H.264/MP4 output can take you a long way. 2-3 enables better quality and wider compatibility.
Second, at the moment, your videos will be downloadable with minimal effort (e.g., View Source). See the related question, "Is there a way to use DRM on HTML5 video?"
The HTML5 specification allows for any video format.It is the browser implementation that determines what formats are actually supported.
MP4 container with H.264 Video and AAC Audio
MP4/H.264 is supported by Safari and IE9+. You may find support in some versions of Chrome.
WebM container with VP8 Video and Vorbis Audio
WebM/VP8 is supported by Firefox, Chrome and Opera.
Ogg container with Theora Video and Vorbis Audio
Ogg/Theora is supported by Firefox, Chrome and Opera.
Bottom-Line
Use more than one format to be assured your client doesn't see blank frame.
As far as the Content Protection, I am bit short on that knowledge and also suppose that it doesn't make sense to go after this issue when your user might be running a slow connection
For content protection. seems like, today there is no straight forward way to do this. However, there is an active interest inside HTML5 camp where some form of DRM can be applied for this.
See this: http://gigaom.com/video/mdialog-tackles-html5-video-security/
I have encoded a video with H.264 using handbrake all the standard settings for "iPhone & iPod Touch" and enabling Optimize for Web as I have been told this adds metadata so the video can be streamed. This does seem to work, but I am getting no video, just audio.
Here is the mp4 file in question.
http://c1592452.cdn.cloudfiles.rackspacecloud.com/videos/36/original/deloitte.mp4
When played in quicktime it works fine, but flowplayer seems to have an issue with it. Am I encoding the video wrong?
When using RTMP you dont need to include the file name but you need to append mp4 to the start, so it'll look like
clip: 'mp4:/videos/36/original/deloitte'