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/
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.
Problem
I have multiple IP cameras from multiple manufactures. The cameras provide the following live feeds:
Manufacturer_1 Feed_1: MJPEG via http
Manufacturer_1 Feed_2: h264 via rtsp
Manufacturer_2 Feed_1: h264 via http
What Works
For Chrome and Firefox MJPEG:
http live feeds work like a charm using the img tag and setting the
source to the live feed URL.
Playback of recorded MJPEG video or H264 works on all three browsers using VideoJS
What I need
Play live feeds of H264 on all three browsers. Play MJPEG feeds on IE.
What I'm trying to avoid
Using FFMPEG or VLC to transcode and stream H264 to MJPEG, which would still only work for Chrome and Firefox.
Notes
Chrome does not accept plugins. Meaning Flash or other plugin based solutions will not work.
ActiveX video controls on IE are rarely stable. Manufacturer specific controls are sub-par at best.
I know that the HTML5 video tag is implemented independently by the browsers and each browser decides what video formats to support.
This link is a quick overview of the severe browser video limitations and the burden that falls on all of us as developers who are cough in the middle of this modern browser war.
Chrome and Firefox both accept live video streams in the fragmented MP4 and WebM (which is irrelevant in this case) video containers. So you will have to do remuxing (which is still much faster than transcoding). I am also working with IP cameras and so far I haven't seen any that are capable of outputting the formats supported by the browser. So the free option is to setup FFmpeg to transcode rtsp to fragmented MP4 or if you are looking for a commercial product our company has just released an video surveillance product that can offer HTML5 compatible live streaming from RTSP cameras. If you have any interest in the commercial product leave a comment.
I am doing some help videos, they are required to work on all browsers and devices - ipod/pad/phone android etc.
My understanding was you can do this with HTML5 and have fallbacks for each device/browser?
However i have had to add javascript to detect the browser then go off accordingly to different html pages where the video will play on that browser or device.
Surely there must be a simpler way to do this in ONE html page? What formats are used for each browser?
I am using ChromeFrame to get around the IE issues too.
Thanks
I recommend looking into video.js which takes care of browser support detection.
For video formats you can use mp4 and WebM together with video.js it should cover all browsers.
From the videoJS website...
Web Browsers
Whether a user has the latest version of a browser, or something
ancient like Internet Explorer 6, they'll get a similar experience
with Video.js which uses a super-lightweight Flash player for browsers
that don't support HTML5 video.
Video Formats
Web video formats can get complicated. Video.js can make it easier by using a single MP4 file for all users, or additional
formats like WebM, Ogg, and even HTTP Live Streaming for greater HTML5
compatibility.
PS. Be aware that there will be visual differences between browsers (mostly older IE browsers), especially when the Flash fallback kicks in. The fullscreen option is the most notable difference.
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
What user agents support the HTML5 video tag, using mp4 as the container and H.264 as the codec? Has anyone come up with a regex for this?
UPDATE:
Thanks for the comments, everyone. I forgot to mention, I preferably want to do this on the back-end, which means something like modernizer wouldn't work.
Desktop:
IE6-8: None
IE9-10: H.264
Chrome: WebM and H.264
Firefox 3.6: Ogg Theora
Firefox 4+: WebM
Opera: WebM
Safari: H.264
Mobile:
iOS: H.264
Chrome Android: H.264 and WebM
Firefox Android: H.264 and WebM
IE for Windows Phone 7.5 - 8: H.264
Opera 12: H.264
See HTML5 Test for more information. Notes: the default browser for Android (called "Browser") doesn't list support for any codec, but I think it's up to the phone vendors to decide this, I'm pretty sure you can guarantee H.264 as hardware acceleration for that codec tends to be built into mobile processors. Also regarding Firefox for Desktop, it's getting H.264 support later this year.
Edit: above support matrix was updated on 2013/03/22
So the two video formats you'd need to support are WebM and H.264. But seems that H.264 is increasingly becoming the de-facto standard for video on the web.
DON'T use user agent sniffing, it's notoriously unreliable and error prone. There are simply better ways of detecting <video> tag support.
For instance, have a look at Modernizer which lets you write:
if (!Modernizr.video)
{
// Implement some Flash fallback
}
or, if you're explicitly detecting a particular codec...
if (!Modernizr.video || (Modernizr.video && !Modernizr.video.h264))
{
// Flash fallback here
}
Not sure about a regex, although I don’t think you need user agent sniffing — the <video> element is designed to contain references to the video in several formats in such a way that user agents will play the one they support. See Dive into HTML5’s video chapter for a great example.
Dive into HTML5 also has a good list of browser support of HTML5 video.