Generating webm, ogg etc for HTML5 video delivery
I'd love to create a Compressor workflow that generates MP4, webm, ogg and potentially other video formats for one-click generation for web sites using the HTML5 <video> tag/player.
I don't see where/how to generate webm or ogg in Compressor 4? Am i missing it, or are their plug-ins that can do it so that I don't have to run a separate encoding app to generate each format?
Thanks,
Karl
Thanks, David ... but that ogg site seems to be just for audio.
I searched this forum before posting using the forum's search ... but a Google search now found a related forum thread on creating OGG (ogv) in which you posted:
https://discussions.apple.com/thread/3642539
I'll try the Ziph Quicktime plugin mentioned by Tony in that thread... since it sounds like you were able to get that to work directly from Compressor, that'll work for generating mp4 and ogv in one batch.
Google (but not the Apple search) found this thread that also asked about ogv and webm:
https://discussions.apple.com/thread/2802246
Sounds like Miro may do the trick - although in a separate, external step:
http://www.mirovideoconverter.com/
Lots of other good tips / workarounds for compressor deficiencies in that thread, including the Firefogg plug-in for Firefox. Sorry for starting this duplicate...
Glad I'm not the only one struggling for a clean batch solution to this though...
Cheers,
Karl
Similar Messages
-
Need help with coding for HTML5 Video with Flash fallback
Hello, need help with my coding in Dreamweaver CS5.5 for HTML5 video with Flash fallback. Not sure if the coding is correct. Do I need anything else Javascipt etc?
The reason you see a blank page is because it's trying to load the file that is pretty humungous and there is no preloader. So, you see a white screen till it complets loading.
Also, the reason why its loading a SWF file and not any of HTML5 type video is because your doctype declaration is XHTML1.0 and not HTML5.
Change the 1st line in your .html file from:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to:
<!DOCTYPE html>
Then see if your HTML5 video types load with <video> tag. -
Dreamweaver Widget Browser for Html5 video player not working
Html5 video player (kalturaPlayer) not working on server. It works fine in Dreamweaver Live View. Need to get this resolved soon for client's web page.
Here is my code:
<figure> <div>
<video width="640" height="360" poster="NewFiles/images.tdrbcf/home/2012/denise4video2.jpg" duration="2:04" preload="auto" >
<source type="video/h264"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.mp4" width="640" height="360" />
<source type="video/webm"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.webm" width="640" height="360" />
<source type="video/ogg" >>
<source src="NewFiles/images.tdrbcf/video/liv-fab-well.ogv" width="640" height="360" />
</video>
</div></figure>
I'm not as familiar with editing the script ... so I left it alone. Could there be an error there, do the video player files need to be in a particular location and are there some servers that do not support the kalturaPlayer?Html5 video player (kalturaPlayer) not working on server. It works fine in Dreamweaver Live View. Need to get this resolved soon for client's web page.
Here is my code:
<figure> <div>
<video width="640" height="360" poster="NewFiles/images.tdrbcf/home/2012/denise4video2.jpg" duration="2:04" preload="auto" >
<source type="video/h264"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.mp4" width="640" height="360" />
<source type="video/webm"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.webm" width="640" height="360" />
<source type="video/ogg" >>
<source src="NewFiles/images.tdrbcf/video/liv-fab-well.ogv" width="640" height="360" />
</video>
</div></figure>
I'm not as familiar with editing the script ... so I left it alone. Could there be an error there, do the video player files need to be in a particular location and are there some servers that do not support the kalturaPlayer? -
Final Cut export for HTML5 Video tag
I need to export a video into OGG, WebM, and MP4 for use in HTML5 video tag. Is this possible in FCP or are there any good plugins/software that can export to those various formats?
FCP can export MPEG4 and its variants such as H.264.
Googling .mov to .ogg and webM brings up several options for other software, none of which are familiar to me.
Here's the top hit: http://www.mirovideoconverter.com/ -
Widget for html5 videos requested
Dear Muse developer team,
It would be incredibly useful to have the possibility to insert html5 video files by help of a widget. (Not talking about links to vimeo- or youtube videos which is already possible.)
Yet we have to do tricks with inserting our own html.
A proper widget with varieties to select, such as autoplay, loop, or any options for skins, would be very helpful.
Best,
bartl
(referring to this discussion: http://forums.adobe.com/message/6067994#6067994)Answered on your another thread Does vimeo have a vimeo gallery widget like youtube gallery widget
-
Using 'setMediaPlaybackRequiresUserAction' for html5 video
Hello,
I am working on a site that will need to work specifically for the iPad. The client has provided me with several mp4 files which will act as short animations that should queue when the page is loaded. I have found some documenation on developer forums and other sites that mention the use of a UIWebView object to use iPad specific attributes like "setMediaPlaybackRequiresUserAction" and "setAllowsInlineMediaPlayBack". From what I have found I need to:
1. Create UIWebView Object
2. Attach Object to Window
3. Send a Request to Load Web Content
I found these directions but every example I have come across seems to be for an iPad application and this is just a site that will use the Safari browser. The markup is in html.
Does anyone have an example using these features on a web page so I can figure out how to implement the code I have found online?
Thanks!
MichaelUIWebView is for native iOS apps and has nothing to do with displaying video in HTML in a website.
Here's Apple official Safari Developer information on using video in websites for iOS devices:
http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/U sing_HTML5_Audio_Video/Introduction/Introduction.html -
Cant find videos etc for ipod video
ive recently gotten an ipod video and noticed that on the canadian version of itunes there isnt any videos or television shows? is it i just didnt find them or does canadian itunes not have anything yet?
and also is there a way for me to upload dvds onto itunes?
? Windows XPRepost in the correct forum.
-
Does somebody know how to make Firefox use Gstreamer for HTML5 video?
... especially for Youtube ?
Thanks.Sorry, I don't get it… does it apply to standard firefox now or why does it say core? If it's still fennec only, I'd love to see one for desktop firefox, too - but I'm not to sure I can open a bug/feature request in an orderly fashion, so maybe someone with smoother "bugtracker skills" might want to.
(Also: vote! ) -
How does the new HTML5 video Support work? and what are the limitations?
So the new Edge has been relased along with many new features including HTML5 video support So along with the new feature here are a few new questions!
How does Edge load the Video? is it fully preloaded before Edge shows the content ? Or is it more of a "youtube" pregressive load while playing?
Or can we choose?
What is the recommended video file size example 4mb ?
How does edge deal with browsers that only support .ogg or .webm instead of mp4?
How is the support on ISO & tablets? load times, "lag" etc?When you import an audio or video file a group is created for you. You can import media with the same name(videosample.ogv; videosample.mp4) to this group for ensuring browser compatibility. The corresponding format will be chosen depending on the browser that loads the composition.
Regarding WebM format - You can also add a webm file in your composition;However since this is a royalty format, Animate will not show a live preview inside the Authoring tool. If you browser supports this then it will definitely play fine on browser preview.
You can take a look at the In-app Video lesson which is available to you in the lesson panel for more details on how this works.
And yes you have pre-load options for HTML5 Video too, however progressive download is not available. You will need to use scripting using JS for getting this functionality.
Hope this helps and do try this out.
-Sujai -
What are people using to encode video for HTML5? The players I have looked at want .mp4, .ogg, and .webm. Media Encoder (At least the CS5 version) doesn't do the last 2. I tried the Miro encoder, but that has no controls, and has quality issues. I'm looking for a professional solution (hopefully not crazy expensive) for OSX.
heres some info re: html5 and video and various mobile devices and also browsers.. there's 2 different pastes ..first is from a doc file I have ..then theres a txt file....the info is about 9 months or a year old ...
plenty of links in articles to follow thru
=====
This is all done without JavaScript and requires only two video encodes, one Ogg file, and one MP4 file. Instructions on how to convert your videos to these formats are provided further down this article.
It’s compatible with HTML 4, HTML5 (valid markup), XHTML 1 and additionally also works when served as application/xhtml+xml.
For a full browser compatibility list, see the Video for Everybody Test Page.
The Code
Here follows the full source code. It’s very large because it’s fully commented.
You can easily compact this down (one such example follows afterwards).
To save time you could use the Video for Everybody generator by Jonathan Neal to generate the code snippet according to your options.
Do not miss the important notes below or you will be kicking yourself after wasting hours trying to get it to work.
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
(If you would like your video to automatically start playing, check out the sample code on the test page.)
Here’s a compacted version as an example:
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
And one that auto plays: (notice the changes “autoplay” and “autostart=true”)
<video width="640" height="360" controls autoplay>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="autostart=true&controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
It’s advised you subscribe to the RSS to be kept informed of new releases in case you get caught out by new bugs introduced by vendors *cough*Apple*cough*. The version isn’t <1 for no reason.
IMPORTANT Notes
Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers
Replace __VIDEO__.MP4 with the path to your video encoded to MP4 (a warning on using H.264) and
replace __VIDEO__.OGV with the path to your video encoded to Ogg.
Optionally you could also include a WebM video.
Replace __POSTER__.JPG with the path to an image you want to act as a title screen to the video, it will be shown before the video plays, and as a representative image when the video is unable to play (Also replace “__TITLE__” for the poster image’s alt text). Not all browsers support the poster attribute, it’s advisable to encode the poster image into the first frame of your video.
2. AddType video/ogg .ogv
3. AddType video/mp4 .mp4
AddType video/webm .webm
DO NOT INCLUDE THE poster ATTRIBUTE (<video poster="…">) FOR iOS 3.x SUPPORT. There is a major bug with iOS 3 that means that playback will not work on any HTML5 video tag that uses both the poster attribute and <source> elements. This was fixed in iOS 4.0, but of course for now there will still be a large number of OS 3 users. This bug does not affect use of the poster image in the flashvars parameter, which you should retain
Replace __FLASH__.SWF with the path to the Flash video player you are using. I use JW Player (download and place ‘player.swf’ in the right place), but this could be any Flash resource including YouTube. Sample code for using YouTube can be seen on the Video for Everybody YouTube Test Page
Safari buffers the video automatically even if autobuffer is absent. This has been fixed in WebKit nightlies with a change to the HTML5 spec; the “preload="none"” attribute on the video element prevents autobuffering. A current bug in WebKit causes Safari to perpetually display “loading” until the play button is clicked
The iPhone will not autoplay. This is done to save bandwidth which may cost some users.
It is not a bug, it’s a feature
HTML5 video on Android is badly broken. Resolution support varies from one handset to the next (often just 480x360), the fallback image usually doesn’t show and the code requires special adjustments. The Android emulator is completely useless as it doesn’t represent any real hardware and does not play HTML5 video. THERE IS NO WAY TO TEST ON ANDROID WITHOUT A PHYSICAL PHONE. BLAME GOOGLE.
Android 2.3 (Gingerbread) now finally supports the controls attribute, so that VfE can work, but this still leaves all previous Android versions in the lurch. Use MediaElement.js or VideoJS for better Android support.
Some web hosts, in trying to save bandwidth, gzip everything by default—including video files! In Firefox and Opera, seeking will not be possible or the video may not play at all if a video file is gzipped. If this is occurring to you please check your server / hosts and disable the gzipping of Ogg and other media files. You can switch off gzipping for video files in your .htaccess file by adding this line:
SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary
With thanks to Bas van Bergen for this tip
There are some instances where people will simply not be able to view the video inside the web-page (e.g. Opera Mobile / Mini). It is absolutely essential that you provide download links outside of the video to ensure your message gets through
A current bug in Firefox means that when JavaScript is disabled (NoScript for example) the video controls do not display. For now, right-click on the video for the controls, use autoplay on your videos or rely on users allowing your site in NoScript
The Eolas ‘Click to Activate’ issue affects Flash in Internet Explorer 6 / 7 as the ActiveX controls are not inserted using JavaScript—however Microsoft removed ‘Click to Activate’ in a later update patch. This issue will not affect users who have run Windows Update.
Please also note that Windows XP originally shipped with Flash v6, and H.264 playback in Flash requires v9 or 10. Depending on what Flash video player you use, this may cause problems if you intend to support users with out of date Flash versions
A parsing bug in Camino 2.0 / Firefox 3.0 means that the image element inside the video element will ‘leak’ outside of the video element. This is not visible however unless some kind of background image or colour is applied to that image element. You can stop this by either wrapping the video element in another element or modifying the code from “<source … />” to “<source …></source>”. This works, but will not validate as HTML5
In IE9 beta, both the HTML5 video and Flash video underneath play at the same time. This does not occur in IE9 Platform Preview 7, which is newer than IE9 beta. It is assumed that an update to IE9 beta will fix this issue
Adding Custom Controls
Since VfE doesn’t come with any JavaScript the HTML5 video will use whatever native interface the browser provides. This is in the best interest of the user because it provides an interface best tailored to that device. For example, the iPhone always plays video fullscreen so that the edges of the video are not cut off in the browser and the user does not have to pan around to get it all in view. The iPad provides finger-friendly sized controls.
Different native video controls in Opera 10.5 and Google Chrome
Designers however don’t like the inconsistency and would like a unified set of controls. Both MediaElement.js and VideoJS use VfE and custom controls you can style how you please with CSS.
Encoding the Videos
Full instructions are beyond the scope of this article, please refer to Mark Pilgrim’s Video on the Web article for an excellent introduction to video formats and encoding instructions.
There is no restriction on the resolution of the Ogg video
The iPhone can play MOV and MPEG4 videos with a maximum size of 640x480 and only allows the Base Profile for H.264 (See Apple’s own instructions for the specifics). If your desired video is bigger than that, please read the instructions below for how to adjust the code to use hi-res videos whilst keeping iPhone compatibility
The iPad can play H.264 up to 720p, 30 FPS
Firefox will only play Ogg (WebM is also supported in Firefox 4), and it will not degrade to Flash if there is no Firefox-compatible video file
For best results I recommend including the poster image as the first frame when you encode the video
Using HD Video
If you would like to use a larger video than 640x480, you can use a QuickTime reference movie to auto-select between an iPhone compatible version and the full-size video. In QuickTime Pro use the ‘File » Export for Web…’ option to output a reference movie (you can also use Apple’s MakeRefMovie tool for finer control). You’ll have three files along these lines: “video.mov”, “video-desktop.mp4” (or m4v) and “video-iphone.mp4”. Now replace the two source elements in the code with these three: (substituting the right file paths)
<source src="video.mov" type="video/mp4"></source>
<source src="video-desktop.mp4" type="video/mp4"></source>
<source src="video.ogv" type="video/ogg"></source>
What happens here is that the browser will play the QuickTime reference movie (Safari / iPhone / iPad) which will auto-select between the desktop and iPhone versions of the video automatically. If the MOV format isn’t supported by the browser (Chrome for example), we point to the same MPEG4 video that the QuickTime reference movie uses.
A Warning About H.264
I made Video for Everybody because since I don’t have Flash installed I wanted to create a way websites could provide me access to their videos (currently needlessly trapped inside Flash) without having to lose viewers from older browsers. VfE is not a tool I would use myself (other videos on this site are HTML5/Ogg only) because of the threat that H.264 represents to freedom on the web. Websites that are already serving H.264 video to users using Flash have already made the conscious decision to buy into H.264. I am not making that decision for you with Video for Everybody.
Just be aware that if you decide to use H.264 video for commercial use then you will need to purchase a licence from the MPEG-LA. Be warned that ‘commercial use’ may also include the scenario where your website has advertisements, even though your use of video is unrelated to those adverts. If you are making any any money in any way from a page that also includes an H.264 video, then you should contact the MPEG-LA for help on licencing.
On the 27th of August 2010, the MPEG-LA announced (arguably in response to growing WebM support) that the terms of “free use” of H.264 Internet broadcast would not change in 2016. This does not change a thing.
This is similar to Nikon announcing that they will not charge you if you put your pictures up on Flickr, or HP promising that they will never charge you additionally if you photocopy something that you printed on a LaserJet.
Mike Shaver
Using WebM Video
On the 19th of May 2010 Google released the VP8 codec as open-source and royalty free with the full intent to drive broad adoption via industry backing and switching YouTube over to the new format in the long term. “WebM” is a rebranded Matroska container utilising VP8 video and Vorbis audio.
This represents major competition to H.264—Mozilla, Google and Opera have already added support into special builds of their browsers and even Microsoft have about-faced on their H.264-only policy and said that IE9 will support WebM—but only if the codec has been installed by the user. Obviously absent from any support is Apple, and this means that unfortunately codec-fragmentation will continue into the foreseeable future so that you will still need to provide more than one video encode.
Adding a WebM video to Video for Everybody is easy, just add it to the source list! It has to go below the MP4 video due to an iPad bug that ignores anything but the first source element, and ideally above the Ogg source so that browsers that play both Ogg and WebM choose the WebM video first. Here is an example source stack:
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Note the new mime type, which you will have to add to your server.
At this extremely early stage for WebM I will not provide any help via e-mail on how to encode or use WebM video. If you don’t know how to use it already, it’s not for you—wait until support is added to your favourite tools and more information is readily available. I will update this article as the situation with WebM progresses.
================
mobile device video info
The options actually match those of the most recent iPod Video, which uses H.264 video, up to 1.5Mbps, 640 x 480 pixels, and 30 frames per second with low-complexity AAC audio up to 160 Kbps, 48kHz stereo audio. On the lower end, bandwidths up to 768Kbps, 320 x 240 pixels, and 30 frames per second are also used, known as Baseline Profile up to Level 1.3. Both options can be output with .m4v, .mp4, or .mov extensions.
iTunes. The simplest way is to use iTunes built-in converter. Apple makes it fairly simple to convert videos to play on the Apple TV or iPod, which are also conversions that can be used on the iPhone. Any video that can play in iTunes, then, can be converted to play on the iPhone, and local files can also be synced directly to the iPhone via iTunes sync conduit, making for a fairly easy process. Two downsides: first, iTunes uses a "lowest common denominator" approach, meaning that there are no customized options for encoding into H.264. Also, some users have reported a bug in the most recent version of iTunes that creates video files with no audio, so don’t toss your original video clips until you’ve had a chance to test out the new H.264-compressed video clips.
Handbrake. Handbrake is the next most-popular encoding tool for both Windows and Macintosh platforms, and it’s available in a command-line version for Linux. Handbrake does a lot more than just H.264 conversions, but for purposes of this article, Handbrake would be used to transcode an MPEG-2 transport stream or other non-H.264 formats and codecs into H.264 video files. Speed on the product is quite good, and it has the option of a single-profile conversion (like iTunes) or the ability to customize encoding or profiles and then save the tweaks for future encodings. Handbrake has made a name for itself in DVD-to-iPod conversion, so the extension of Handbrake to the iPhone is one that many users trust.
On any of the last three products, the H.264 files output from these products can be added to the iTunes library for uploading to the iPhone. For those choosing to put their iPhone-compliant videos on the web, it’s also helpful to choose hinted streaming to allow the videos to begin playing immediately rather than waiting for the entire cache to fill.
http://www.webmonkey.com/2010/05/embed-videos-in-your-web-pages-using-html5/
So, you want in on the fun? Do you want to use some HTML5 video tags on your site right now? No problem. Fasten your seat belts, as we’re about to take a tour of the wonderful world of HTML5 video.
Browser Support for HTML5
First, let’s deal with some very basic stuff, like where this will work and where it won’t. As you can see in the table below, only the latest versions of most browsers support native video playback using HTML5’s <video> tag.
HTML5 <video> support by browser: Fx 3.0 Fx 3.5 IE7 IE8 IE9 Safari 3 Safari 4 Chrome 3+ Opera 10.5
Since Firefox 3.0 and IE 7 & 8 lack any support for HTML5 video, you’ll have to come up with a fallback plan for serving video to those users. Depending on what you want to do you, could fallback first to Quicktime and then, failing that, to Flash. That’s the strategy used in Video for Everyone (note that as of v0.4, Video for everyone no longer falls back to QuickTime).
To keep things simple we’re just going to fall straight from HTML5 to Flash.
Formats, Codecs and Technicalities
The next thing you need to understand is what is actually happening when you load and play a video file in your web browser. You’re probably used to thinking of video as .mp4 or .mov files, but unfortunately it’s not that simple. The actual file formats are just containers. Think of them as a bit like a .zip file — they hold other stuff inside.
Each container holds at minimum one video track and, most likely, one audio track. When you watch a movie online, your video player (most likely Flash) decodes both the audio and video and sends the information to your screen and speakers.
Why does this matter? Well, because the process of decoding what’s inside the video container file varies. To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know which codec the movie was encoded with.
When it comes to web video there are two codecs to worry about: H.264 and Theora.
There’s a huge debate right now among web developers, browser makers and just about everyone else as to which codec is right for the web. We believe that a free, open codec without patent and licensing restrictions is the best solution for the web. Sadly, neither codec exactly fulfills that dream, so for now, let’s just skip the whole argument and be practical — we’re going to use both codecs.
Why? Well, have a look at the table below, which shows which codecs work where and you’ll quickly see that there is no one-size-fits-all-browsers solution. Only Google Chrome can play both H.264 and Theora.
Codec support by browser/platform: Firefox Opera Chrome Safari IE 9 iPhone Android
Ogg Theora
H.264
So, you may be thinking … if HTML5 video doesn’t work in IE7 or IE8 and it means I’m going to have to encode my videos twice, then why bother at all? Well, the best answer is simple: mobile users. If you want iPhone and Android users to be able to see your video, HTML5 is the only way to do it — Flash support is coming to Android sooner or later but for now HTML5 is the only option, and we all know Flash doesn’t run on the iPhone or the iPad.
The HTML5 Code
Here’s how to actually embed your videos. First, we encode video in both .ogv and .mp4 containers. Encoding video is beyond the scope of this article, so instead we suggest you check out Mark Pilgrim’s online book Dive Into HTML5, which has a whole chapter devoted to understanding video encoding. Pilgrim’s encoding suggestions use free software to get the job done, and in the end you’ll have two files — one .mp4 and one .ogv.
Now it’s time to unleash those movies in pure HTML glory. Here’s the code:
view source
print?
1 <video width="560" height="340" controls>
2 <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
3 <source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
4 </video>
Yes, that’s it. What we’ve done here is use the <video> tag to specify the dimensions of our video, and to denote that we want to use the browser’s default controls. Then, within the video tag, we’ve added two <source> elements which link to our video files.
The “type” attribute of the <source> tag helps the browser understand which file it should load. It’s a bit of an ugly chunk of code that needs to specify the container format, the video codec and the audio codec.
In this case we’ve assumed standard .ogv and baseline encoded H.264 video as per Pilgrim’s tutorial. See the WHATWG wiki for more information on which video types you can specify.
And there you have it — native web video, no plugins required.
Dealing With Everyone Else
What about IE7, IE8 and older versions of just about any other browser? Well, for those users, we’ll fall back on Flash. To do that, we just use an <embed> tag within our video tag:
view source
print?
1 <video width="560" height="340" controls>
2 <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
3 <source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
4 <object width="640" height="384" type="application/x-shockwave-flash"
5 data="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4">
6 <param name="movie" value="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4" />
7 </object>
8 </video>
Now any browser that doesn’t understand the HTML5 video tag will just continue on its way until it hits the object tag, which it should understand (note that the order, mp4 before ogv, is important for iPad support — Apple requires that mp4 be the first video file).
Of course for this to work you need a Flash video container. JW Player is one popular example, or you can roll your own using Adobe’s tools. Also remember that we still haven’t handled the case of an older version of Firefox with no Flash plugin installed (maybe your users are surfing your tubes with an outdated Linux machine). You can always add good old text-based links to the video files as a catch-all fix for anyone who can’t, for whatever reason, see either the HTML5 or Flash versions.
Conclusion
Embedding HTML5 video isn’t significantly more difficult than using Flash, especially if you’ve been using H.264 video files in your Flash player — which is exactly what YouTube has done with its HTML5 beta.
While we’re concerned about the licensing and patent requirements of H.264, it isn’t hard to notice that if you skip Theora and make all non-H.264 fall back to Flash, you’ve still saved yourself a considerable encoding headache. In fact, that’s probably the best practical argument against Mozilla and Opera’s refusal to support H.264.
If you’d like to use some of the more advanced aspects of HTML5 video, be sure to check the SublimeVideo player, which offers very nice JavaScript-powered set of custom controls. Also be sure to have a look at Video for Everybody, which makes for more complex code but handles just about every use case you could imagine. And there’s a handy Video for Everybody WordPress plugin as well.
http://camendesign.com/code/video_for_everybody
good luck -
I have cs6. My insert panel doesnt have an option under media for html5 video. Ran all updates, still nothing. Any suggestions?
The Cloud version of CS6 is different from the disk version. Copy & paste the following code into a new document. Replace YourVideo.mp4, .ogv and .webm with your actual video files.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Video</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
video {max-width:100%;}
</style>
</head>
<body>
<!--begin video-->
<video controls>
<source src="YourVideo.mp4" type='video/mp4' />
<source src="YourVideo.webm" type='video/webm' />
<source src="YourVideo.ogv" type='video/ogg' />
</video>
<!--end video-->
</body>
</html>
Nancy O. -
Does Dreamweaver CS6 Retail Boxed Support HTML5 video Tag?
Hello:
Does the retail boxed Dreamweaver 6 (Not CC) support the insertion of video into pages using the HTML5 <video> tag? My client can't use Flash. I found conflicting reports on the Web.
Thanks,
Rich LocusThe perpetual license version of CS6 doesn't have the <video> tag built into the insert menu and it can't be added via updates. CS6 Cloud is the first version where <video> appears in the menu. Either way, you can just add it to the Snippets folder of CS6 perpetual, if you plan to use a lot of video.
Here is the base code I use for html5 video in the older versions of DW (with Flash fallback)...
<video width="320" height="240">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
<object width="320" height="240">
<param name="movie" value="myvideo.swf" />
<embed src="myvideo.swf" width="320" height="240"></embed>
</object>
</video>
Paste that code into your source view and highlight it, then click the + button on the bottom of your Snippets window and give it a name. From there on out, you just double click that snippet to add video. Make sure you have at least two video source extensions to cover all browsers and you're good to go.
HTML video Tag -
Html5 video: http range request spec??
i am implementing a java servlet, serving html5 videos.
implementing the range protocol for safari is very difficult.
1) missing tool support
safaris built in tools (resource view) shows all http requests (request and response headers) for all kind of files like images etc, but not for html5 video!! this is very bad. on firefox there is firebug which shows all requests/responses and allowed me to find the correct protocol and implement it.
2) missing specification
searching the web for the required http range protocol did not lead to an answer.
the first request of the video element has following properties:
range: bytes=0-1
connection: close
user-agent: Apple Mac OS X v10.6.5 CoreMedia v1.0.0.10H574
accept: /
accept-encoding: identity
why close and not keep alive? i correctly serve what is requested - 1 byte (tried all means).
but there never comes a second request...
hope anyone has an answer.
thanks!
regards khtThank you for replay.But I find a more horrible result.The MP4 file which I am watching is just 4MB.But totally my iPad requests about 20MB when using range request.
-
Firefox 15, Flash 11.4, Windows 7 - html5 videos/swf do not play
Help me please! I see that many people have similar issues, but no 2 are exactly alike, but I have tried every suggested solution and nothing seems to work. Everything was fine until about 2 weeks ago and then nothing worked - no youtube, no flash apps, no swf. I only use Firefox, but I tried it on IE and Chrome - nothing. I really just want a solution with Firefox, because it has worked. In my Add-ons Manager, it shows Shockwave Flash 11.4...and Shockwave for Director. HOWEVER, when they are enabled I cannot watch ANY youtube videos. If I disable Shockwave Flash, youtube videos play, except for HTML5 videos. Regardless if Flash is enabled or disabled, when I go to the Adobe flash test page, it is indicating that I do not have flash installed. However the Shockwave Player test page, shows that shockwave is installed and working. I am so frustrated....I have uninstalled and installed so many times, shockwave, adobe, etc. And no matter what I do .swf images/apps do not play at all. This is the worse, since my work's website (which I maintain) uses .swf. I did not create them, but would like to see them and it seems to necessary when I try to update the website, because the website maintenance hangs. Flash never 'crashes'.....
Here's the report, just with the display device info - let me know if you need anything else (it's really long!)
System Information
Time of this report: 9/18/2012, 17:22:42
Machine name: AM-LAPTOP
Operating System: Windows 7 Home Premium 64-bit (6.1, Build 7601) Service Pack 1 (7601.win7sp1_gdr.120503-2030)
Language: English (Regional Setting: English)
System Manufacturer: Dell Inc.
System Model: Inspiron N5050
BIOS: BIOS Date: 10/14/11 14:44:39 Ver: 04.06.04
Processor: Intel(R) Core(TM) i3-2350M CPU @ 2.30GHz (4 CPUs), ~2.3GHz
Memory: 4096MB RAM
Available OS Memory: 4004MB RAM
Page File: 3162MB used, 4844MB available
Windows Dir: C:\windows
DirectX Version: DirectX 11
DX Setup Parameters: Not found
User DPI Setting: Using System DPI
System DPI Setting: 96 DPI (100 percent)
DWM DPI Scaling: Disabled
DxDiag Version: 6.01.7601.17514 32bit Unicode
DxDiag Notes
Display Tab 1: No problems found.
Sound Tab 1: No problems found.
Sound Tab 2: No problems found.
Input Tab: No problems found.
DirectX Debug Levels
Direct3D: 0/4 (retail)
DirectDraw: 0/4 (retail)
DirectInput: 0/5 (retail)
DirectMusic: 0/5 (retail)
DirectPlay: 0/9 (retail)
DirectSound: 0/5 (retail)
DirectShow: 0/6 (retail)
Display Devices
Card name: Intel(R) HD Graphics Family
Manufacturer: Intel Corporation
Chip type: Intel(R) HD Graphics Family
DAC type: Internal
Device Key: Enum\PCI\VEN_8086&DEV_0116&SUBSYS_05041028&REV_09
Display Memory: 1696 MB
Dedicated Memory: 64 MB
Shared Memory: 1632 MB
Current Mode: 1366 x 768 (32 bit) (60Hz)
Monitor Name: Generic PnP Monitor
Monitor Model: unknown
Monitor Id: SEC5441
Native Mode: 1366 x 768(p) (59.997Hz)
Output Type: Internal
Driver Name: igdumd64.dll,igd10umd64.dll,igd10umd64.dll,igdumdx32,igd10umd32,igd10umd32
Driver File Version: 8.15.0010.2342 (English)
Driver Version: 8.15.10.2342
DDI Version: 10.1
Driver Model: WDDM 1.1
Driver Attributes: Final Retail
Driver Date/Size: 3/25/2011 22:17:46, 7473664 bytes
WHQL Logo'd: Yes
WHQL Date Stamp:
Device Identifier: {D7B78E66-4256-11CF-BE7A-0E25A9C2C535}
Vendor ID: 0x8086
Device ID: 0x0116
SubSys ID: 0x05041028
Revision ID: 0x0009
Driver Strong Name: oem3.inf:Intel.Mfg.NTamd64:iSNBM0:8.15.10.2342:pci\ven_8086&dev_0116&subsys_05041028
Rank Of Driver: 00E60001
Video Accel: ModeMPEG2_A ModeMPEG2_C ModeWMV9_C ModeVC1_C
Deinterlace Caps: {BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(YUY2,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(YUY2,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(YUY2,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(UYVY,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(UYVY,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(UYVY,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(YV12,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(YV12,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(YV12,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(NV12,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(NV12,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(NV12,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(IMC1,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(IMC1,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(IMC1,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(IMC2,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(IMC2,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(IMC2,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(IMC3,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(IMC3,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(IMC3,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
{BF752EF6-8CC4-457A-BE1B-08BD1CAEEE9F}: Format(In/Out)=(IMC4,YUY2) Frames(Prev/Fwd/Back)=(0,0,1) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_EdgeFiltering
{335AA36E-7884-43A4-9C91-7F87FAF3E37E}: Format(In/Out)=(IMC4,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend DeinterlaceTech_BOBVerticalStretch
{5A54A0C9-C7EC-4BD9-8EDE-F3C75DC4393B}: Format(In/Out)=(IMC4,YUY2) Frames(Prev/Fwd/Back)=(0,0,0) Caps=VideoProcess_YUV2RGB VideoProcess_StretchX VideoProcess_StretchY VideoProcess_AlphaBlend
D3D9 Overlay: Supported
DXVA-HD: Supported
DDraw Status: Enabled
D3D Status: Enabled
AGP Status: Enabled -
Safari 5.1.2 Youtube HTML5-Video issues
Fullscreen-Button on Youtube doesn't work for HTML5 videos on Youtube in Safari. Also there are problems with the video performance. The process QTKitServer Safari Webcontent has 105% CPU, the whole MacBook is very slow in that moment.
This is only a problem in Safari!
Since three years i use Safari for all my work on the net. But after the upgrade to Lion, this browser has a lot of bugs and getting slower and slower. I think it is time to change the browser. :SYes. I have the same problem as well. Watching a video on Youtube and the process called QTKitServer goes above 100%. I haven't figured out why (html 5 or fullscreen or whatever) but I didn't noticed it before.
Macbook, Snow Leopard, Safari 5.1.2 with only the Adblock extension running.
Maybe you are looking for
-
How to sync iPhone with new Mac without losing all my iTunes?
I have recently got a new MacBook after my old one crashed... but I have been told that anything not bought would be lost when I sync my iPhone with my new Mac... I have already transferred the bought songs etc... is there a way (cheap or free if pos
-
How to Publish on the Web a PDF document in Reading mode only
Hello, I'm planning to post on my web site my manuscript in PDF format. I would like to make it available in a reading mode only.. I wonder if ADOBE LIVECYCLE Rights Management would allow me to do so in a safe manner. What would be the cost? Thanks.
-
Hi, I'm getting a frequently recurring error in the logs, as follows: GetFileFromUrl: FileNotFoundException when attempting get file Url /site_files/include/js/internet2_dcs_tag.js The system cannot find the file specified. (Exception from HRESULT: 0
-
Adobe Reader 8.1.2 is laggy/choppy
I use reader in one-page continuous page view at 150% zoom and when I use the hand tool to scroll the the document it is choppy and laggy to load. How do I fix this?
-
Sorting Aperture photos on ATV...
After the upgrade I really love the option to be able to sort my Aperture photos by EXIF date or file name. It was a frequent request and great Apple listened to its customers, now I finally can use ATV in my photo business. Cheers, Fons.