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.
Related
I have a rather peculiar problem.
I made a website, that streams from various sources, all m3u8 links (Apple HLS). I successfully made it using a viewright player but I wanted to support mobile devices so I set it up with videojs - and it works perfectly. With the current setup people have to install a viewright plugin, which is fine, but I want to avoid that by using html5 and make it more userfriendly.
I have tried both using CDN and Self-hosting as described here:
https://github.com/videojs/video.js/blob/v4.3.0/docs/guides/setup.md
My videojs related code is as follows:
head:
<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>
Body:
<div class="row">
<div class="span7">
<video id="vid" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="640"
poster="my_video_poster.png"
data-setup="{}">
</video>
</div>
<script>
var myPlayer = _V_('vid');
function changeChannel(url, chanid)
{
myPlayer.src(url);
myPlayer.play();
}
</script>
In body there is also the list of streams, ofcourse. When you click on a link it changes to that stream.
Example:
StreamName
Again - the code works perfectly on my android phone (chrome) and iphone (safari) so I'm utterly confused by this.
Thanks if you know something!
edit:
In the console, when loading the page it says
ReferenceError: V is not defined
and when I load a stream it says:
TypeError: myPlayer is undefined
I tried replacing V with videojs and VideoJS (as found on other SO post) but it just said that videojs/VideoJS was not defined then.
There are some additions to video.js that will get it to play HLS content on desktop browsers.
Check out the flashls project on github, which for videojs uses a modified swf file available here under the video-js-swf project on github.
Also check out this version which is Javascript based: https://github.com/videojs/videojs-contrib-hls
First off, Apple HLS is not supported by the major desktop browsers, namely Chrome, Firefox and IE (I dont know about Opera but I doubt it). Safari on OSX supports it, Safari on Windows does not :)
Chromium and Firefox teams both have open tickets on implementing support for HLS through the HTML5 video tag, but I don't think this is going to happen soonish (Firefox has this ticket open since 3 years now ;) ). Remember that Apple HLS is in no way directly part of the HTML5 standard. The only widely supported formats are WebM / MKV / Ogg, using VP8 / Theora codec (since they are supported by both FF and Chrome).
Mobile devices running iOS with Safari therefore support HLS, and so does Chrome on iOS, since it is actually using a Safari WebKit pane to render the HTML. Also, the browser that comes with Android supports HLS (and so does the Android media framework natively), as Android developers were obviously concerned about matching compatibility with iOS enabled mobile sites.
However, Chrome (and IE) support also the MPEG-4 / H.264 codec.
IE support ONLY MP4.
Videojs has a fallback solution in Flash that is replacing the video tag when you want to player MPEG-4 on Firefox. So that is taken care off, at least.
Welcome to video streaming standards madness.
That said, you will probably have to review your video delivery strategy if you want to deliver to other desktop browser than only Safari on OSX ;) If you are using Videojs anyway , I would recommend you MPEG-4, as then you will have full browser compatibility.
However, knowing Videojs, I would say that it should throw an appropriate error when it encounters a format that is not supported on the platform.
Therefore, I think your problem is (not only) format related? Try to load any other WebM example file into your Videojs setup on Chrome or FF desktop browsers to see if that works. If it does, then obviously M3U8 / HLS format is messing up Videojs on desktop, and that would be a Videojs ticket. But, anyway, HLS wont work on desktop any way, for now.
I need to make a basic audio control: one audio file, play and pause buttons, no more.
I cannot use Flash at all - this website will only be used if the client does not have flash enabled.
HTML5 does not seem to be a good solution because my target clients (who do not enable Flash) most likely won't have modern browsers. Even worse, Safari does not seem to play the best solution available (jPlayer).
The lastest versions of all the main browsers (IE, Chrome, FF, Safari, Mobile Safari, Android) can play audio natively using the HTML5 audio element (so long as the media is encoded in a supported format).
IE6,7 and 8 can only play audio directly in the browser with the help of plugs-ins (e.g. Quicktime, Flash etc.).
So, if you have IE8 or less i'm afraid you cannot play audio directly in the browser without Flash or another plug-in.
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 am developing an HTML5 player on Windows, but I have some real difficulties to make a real cross-browser and platform HTML5 video player:
It seems that Firefox and safari have different format support on their video tag, .ogg for Firefox, mp4 based for Safari.
Meanwhile Firefox supports the .ogg format without further plugins, Apple Safari needs the Quicktime plug-in for playing mp4 video in the tag video. This doesn't sound good.
Apple hates Flash for its CPU consumption and extra plug-in, but for itself requires a Quicktime plug-in for playing video on HTML5. Why don't these browsers use a standard?
Quite simple.
Video is historically a minefield with regards to patents. People from the opensource world do not have the money to pay MPEG-LA consortium which controls H264. On the other hand, the codec proposed by Google and implemented by Firefox and Opera is felt as risky by company such as Apple, Nokia, or Microsoft. The issue is still not yet solved, but there is progress on discussions.
There was a very good summarizing post about it. I will try to find it again.
A good article on how to use the video element in your document
An excellent summary article about the issues
Actually, the HTML5 standards body was going to standardize on OGG (with the ability to use other codecs, as previous HTML versions would have said).
Most of the major players who already had a license with MPEG-4 said "screw you guys, we've already paid for a site license (and are part of the MPEG-4 consortium) so we're going to screw over the standards body".
We have a need to support rendering of the following type of videos using a common code, based on the URL of the video. We need to support IE 6, IE 8 and Firefox 3.0.4 browsers for following file types (videos).
Can you suggest if we can provide a common HTML tags or set of common HTML tags for supporting all these video types based on the URL? Are all these file extensions supported in Firefox and IE?
asx, asf, ram, mpeg, mpg, mpe, qt, mov, avi, movie, wmv, smil, mp4, mxf, gxf, flv, 3gp, f4v, mj2, omf, dv, vob
Thanks.
Not all of those video formats will be supported on all platforms - it depends on what browser is being used, and which codecs have been installed.
An ideal solution would be Video for Everybody. It is a simple fallback technique that uses Flash where browsers don't support HTML5 video (thus, IE6/7/8). It still won't support every format in your list (You may need server-side transcoding for that), but will cover all the browsers you require.