Implementation of multiple media tracks in HTML5 video

Hello,
There is an existing API for dealing with multiple media tracks in HTML5 video, which is described here:
http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#media-resources-with-multiple-media-tracks
Do you have any plans on implementing this in Firefox? If so, do you have any estimated timeframe?
Best Regards
André

hello andre, a basic implementation of it is landing in firefox 33. for reference please see [https://bugzilla.mozilla.org/show_bug.cgi?id=744896 bug #744896].

Similar Messages

FMS 4 HTTP dynamic streaming in HTML5 video Tag

We recently purchased FMS4 and I'm in the midst of setting it up. However, not that it's a HUGE deal, but....
I see conflicting answers in the forums about whether or not it is possible to stream media in the HTML5 <video> tag (going back to early 2010).
Ideally, I'd like to stream (most of the time using flash), but for the specific browsers that support it, (chrome, ff, IE9, and select iOS devices) HTML5 video tags.
So, can FMS 4 do that?
<video id="something" controls="controls">
<source src="http://video.mydomain.com/vod/myMovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

</video>
If so, how? I gave it a shot using the above code (minus the "blah, blah, blah" ), and the video doesn't play - if all it is, is a syntax error, then please be so kind as to provide the correct syntax.
However, if it isn't possible unless you download something else, like the File Packager for HTTP Streaming or the Origin module for HTTP Dynamic Streaming... please direct me accordingly.
Any assistance would be greatly appreciated.
Thank you kindly, in advance.

To the best of my knowlege, no.
The browser would need to support the flash media manifest file format to be able to play and HTTP stream from FMS, and I don't think any of the browser vendors have implemented it. It would be more likely that Apple's spec is adopted (HLS uses a similar structure using mpeg-ts), but that's not implemented in anything other than safari at this point.
you -could- use the bundled apache http server to serve progressive downloads to the <video> object in the browser, but it wouldn't be a stream coming from FMS.
More info on flash media manifest file format here:
http://opensource.adobe.com/wiki/pages/viewpage.action?pageId=43581634

Adding Multiple audio tracks

Hi people.
How can I add multiple Audio tracks on a video which then can be switched on a DVD remote control?
Please help.
thanks in advance.
J.

jagthandi,
I agree with you on the separate purchase of Encore. It's a great authoring program. Until CS3, it was sold as a stand-alone, though was also included in the CS2 Production Studio, which is how I came by it. Adobe began integrating it more and more closely to Premiere Pro, so that became more of a "module," than a stand-alone. As of CS3 it only came bundled with P-Pro. Good on one hand, but not so good, on the other. Having used it for many years now, I would be loathe to use any other authoring application.
It seems that Sony has done similar with their DVD Architect Pro, only bundling it with Vegas Pro.
What this means is that there are now few full-featured authoring applications in an affordable price range. DVD Studio Pro being one of the few, and its interface is not as clean as Encore's. It offers potentially more power, but you have to do some basic programming to use that power. At the top of the list is Sonic Scenarist, but at around US$50K, complete, it's not really an option. Also, its interface takes years to learn.
So very glad that I have Encore2. I will likely never part with that program, as it does 99% of what I would ever want from an authoring application. That last 1% can usually be done with some creative workarounds.
Hunt

Video with Multiple Audio Tracks-- IOS 4.2 Removes Way to Select Them

After upgrading to IOS 4.2 on my iPhone 4, I've found it no longer lets me select from among multiple audio tracks. The option and button is completely gone.
I encode my videos with AC3 audio as the first track (for my home media devices), and stereo audio as the second track (for the iPhone). Now the iPhone will just play the video, with no audio, and no way to select another track. This is extremely frustrating as I've encoded all my DVDs this way, and never had any issue with playback like this on any IOS device going back to the first gen iPod Touch.
Anyone else have this issue, and know of a work around? Thanks!

I too have the exact same problem for the exact same reason. Did you ever figure out a workaround (other than reencoding all your videos)?

Export Video with Multiple Audio Tracks

I need to be able to export video with audio on multiple tracks. I have moved to CS6 from FCP 7 where this was rather easy to do. I can make a preset in AME with more than enough mono tracks but after the encode the video is always smashed to one mono track. I am not doing a 5.1 mix, there are different mic's on each track that need to remain independant of one another and mixing them down within Premiere is not feasable. Are there no options to just have the audio 'pass through' like Compressor? Sorry if there are other posts but I have been searching forever and can not find a simple answer on this topic.
Also, is there no way to have the source timecode burn in? Putting a filter on the video in a sequence is unacceptable, I am very displeased to find that this doesn's seem possible in AME or Premiere, it has been part of Apple's suite for years.
Example of my preset from Compressor:
Name: Apple ProRes 422 (Proxy)
Description: QuickTime movie with Apple ProRes 422 (Proxy) and audio pass-through
File Extension: mov
Estimated size: unknown
Audio: multi-track pass-through
Video Encoder
          Width: (100% of source)
          Height: (100% of source)
          Pixel aspect ratio: Default
          Crop: None
          Padding: None
          Frame rate: (100% of source)
          Frame Controls: Automatically selected: Off
          Codec Type: Apple ProRes 422 (Proxy)
          Multi-pass: Off, frame reorder: Off
          Automatic gamma correction
Progressive
          Pixel depth: 24
          Spatial quality: 50
          Min. Spatial quality: 0
          Temporal quality: 0
          Min. temporal quality: 0
Timecode Generator
          Position: Lower Right--Title Safe
          Alpha: 1.000
          Label: Source Timecode
          Start Timecode at 00:00:00:00 false
          Text Color: r:0.0000, g:0.0000, b:0.0000
          Font: Helvetica, 36

Hi James,
For exporting a multitrack .wav file, you have to start a project with a multichannel audiomaster (3-16 tracks).
Copy and paste your complete edit to the new editsetting.
Now in the audiomixer you can route your audiolayers to the multichannel you like.
(CH1+2 pan to left is channel 1, pan to right is channel 2 and for a stereo track pan to center : channel 1 for left and channel 2 for right.)
Then you export your project to a 3-16 tracks multitrack .wav file.
When you need mono tracks you can import your multitrack .wav file in premiere. Then send it to Audition (edit in Audition) and then adobe will convert the file into mono tracks.
You'll find the mono tracks in your audio capture folder or can premiere search for then by 'reveal in explorer'.
The multi track .wav file has got timecode within the file.
When exporting in QT you can also choose for a multitrack audio file. It also contains your timeline timecode.
.avi or .mp4 video files cannot be exported with more than 5.1 channels of audio
MXF OP1a in XDCAMHD can also be exported with max. 16 channels of audio. It also contains your timeline timecode.
Hopefully you can get further with Premiere Pro with this info.
Succes with it!!
gr. Mano

No HTML5 Video option in Insert/Media Drop down menu on DW, CS6

Just getting into wanting to try the HTML5 Video on websites I am building on my PC using CS6.
However, I downloaded the tutorial "Inspire" on how to do this, etc. by downloading the mpeg4 video files(trolly) and doing a test site while following along with tutorial. Followed to a "T".
When it came to actually clicking the Insert selection then the Media selection to drop down the following only,
SWF
FLV
Shockwave
Applet
Active X
Plugin
I even updated DW, restarted PC and still no final choice to add the HTML5 Video file. And I did have the Option in the New Document Dialouge Box to select HTML5 from the DOCtype menu earlier in the tutorial test I conducted and made. Think of why I don't have that option?
kjvidman

Just copy & paste the following code into a new, blank html document. Replace the Poster image and videos with your own.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Video</title>

</head>
<body>

<video width="500" height="325" poster="Your_poster_image.jpg" controls>

<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
NOTE: If you see this, you're using an
outdated browser that doesn't support
the video tag. </video>

</body>
</html>
You will need all 3 file types to support the various web devices:
ogv
webm
mp4
Nancy O.

Creating Video with Multiple Audio Tracks?

Not sure if this is the right place to post this question but I figured its compression/video codec related so someone might have an idea...
I've used Handbrake in the past to rip a DVD with an audio commentary that allowed for multiple audio tracks that could be played back in iTunes/Quicktime (though not on the iPod Classic for some reason... perhaps someone knows the answer to this?)
I was just curious as to whether or not this was possible to do WITHOUT first making a DVD with an 2ndary track? I was hoping to record audio commentary for one of my shorts, and put it up on the web, but wanted to avoid the step of going to dvd first then ripping it.
is this achievable in compressor? do I need to use a third party app? thanks so much.

ehmjay wrote:
is there any app (be it from apple or a 3rd party tool) that will allow me to add a secondary audio track for switching in quicktime/iTunes? if so could you point me in the direction of it (or even instructions)
I'm afraid I'm unaware of anything - outside of HandBrake - that does encode a second track of audio. But I haven't exactly had my eyes open since I haven't needed to do this for a client yet.
handbrake mentinos that its able to rip secondary audio for use with iPod Classic/Apple TV... however so far it hasn't worked for me. Does this mean that while handbrake is doing it properly its just my iPod itself that's having the troubles (like I said that alt. audio is there in iTunes/Quicktime just not on the iPod itself)
I am pretty sure that the issue is that the software for iPod Classics - as is the case with AppleTV and, even, QT Player - which won't allow you to switch over to the other track. But I haven't had to work with the Classic in a while, perhaps there is a setting in Audio (or Video) that gives you the pop-up option you're seeking?

Even when I select a specific media type (or multiple media types) for ingest, Prelude imports .JPG etc. I want to only import video files.

Even when I select a specific media type (or multiple media types) for ingest, Prelude imports .JPG etc. I want to only import video files within a section of subfolders.
please help
adobe prelude cc2014

Prelude will ingest only the files that you have selected (checked the box next to) in the Ingest Dialog. Can you provide more information or screen shots of what you Ingest Dialog looks like BEFORE you ingest and what your Project Panel looks like AFTER you ingest?
Thanks -
Michael

How to embed multiples HTML5 videos onto simple web page?

How to insert multiples HTML5 videos onto single web page?

I recommend Pickle Player -- one player can support playlists of MP4 or M4V video files.
http://www.pickleplayer.com/
Nancy O.

Multiple HTML5 Videos on one page

How can I get more than one HTML5 video on one page? When I tried to place 4 3-sec videos with autoplay and looping, only the first one plays.
<video height="300" weight="300" controls preload="none" autoplay loop>
<source src="video1.m4v" type= "video/mp4"/>
<video height="300" weight="300" controls preload="none" autoplay loop>
<source src="video2.m4v" type= "video/mp4"/>
<video height="300" weight="300" controls preload="none" autoplay loop>
<source src="video3.m4v" type= "video/mp4"/>
<video height="300" weight="300" controls preload="none" autoplay loop>
<source src="video4.m4v" type= "video/mp4"/>
Thank you

Hi
Unfortunately you cannot, as most browsers use an "exclusive OR" code for playing videos, which means that only one will play at a time. The reason for this is that if they did not do so you could have multiple soundtracks playing at the same time.
There are 3rd party players that will do this though, (sorry cannot recommend any specific player, but try a search).
PZ

I just downloaded CS6 and the doucmentation says I should have HTML5 Video as an option under Insert Media and I do not. why?

I just downloaded CS6 because the website said I could link to .mp4 videos with the new features. I did not download the CC because I was told by support that it is the same as CS6 but you would be billed monthly. I was following the instructions to Embed video in HTML5 and I followed all the steps until the step for Insert - Video and select HTML5 Video. My software does not have this option. Why? this is the page I got my information from:
Adobe Dreamweaver CS6: Embedding video in HTML5 | Adobe Inspire Magazine

No need to duplicate replies. This is a web forum so replies are seen by everyone.
The plain hard truth is CS6 on perpetual license is not the same software as CS6 on the Creative Cloud. Version 12 will never get new bells & whistles added to it. But 4 months after CS6 came out, the Cloud version received 2 significant upgrades that totally changed the software from what you have. This fact frustrated many Cloud users who were trying to learn CS6 from text books that were rendered obsolete by Cloud upgrades. Anyway, it was a very confusing time for everyone. And that's why there are 2 versions of CS6.
Nancy O.

Multiple audio tracks not showing up on iphone video.

I created my video in iMovie '09 v. 8.0.6
I have two audio tracks, one person talking in the video and another being a background track. The video exports fine. The audio works when I play on the computer and after I have uploaded to my kickstarter site. When I try to play the video back from the kickstarter page on my iphone or ipad it only plays the background music, no audio from the person talking in the video. HOWEVER, if I plug in the headphones and listen it sounds fine.
What is the deal? Is there some setting I am missing when exporting that will allow both audio channels to play on the iphone external speaker?
Thanks.

I was having the same issue too. I was hoping that apple will address this issue with a SW update or at least someone from apple would be kind enough to answer this thread.
After researching for a couple days I found a solution. It's not the most efficient, but it works. You'll need a CD-R or CD-RW with this method. The trick is you need to convert m4p file format to mpa or mp3 file format.
You can follow the following steps:
1. Open iTunes
2. Create a New Playlist: File -> New Playlist
3. Drag the song(s) to the playlist you just created. Note: Depending on the file size you might only be able to burn just 1 song at a time
4. Insert a Blank CD to your disk drive.
5. Right click on the playlist then click "Burn Playlist to Disk." Then click burn. Make sure the Disc format is set to Audio CD.
6. Once the disc is finished, click on the CD in the device section in iTunes. Right click the song and click "Create AAC Version." This will create a .mpa file into your iTunes.
7. Copy that file to your iPhone and you're golden
Hope this helps guys. I know it's not the most elegant solution, but it works and now you can workout with those tunes. I know I've been quite frustrated because my tracks didn't show up, hopefully the new SW update will fix this.
I would appreciate any apple genius' solution that is more efficient as well.
Cheers

Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?

Hi All,
I am creating an interactive site through Edge Animate and am in the process of trying to create a HTML 5 Video Playlist to function within Edge Animate.
Current Process - Example:
I have 3 videos that need to be played on a certain page.
I created a symbol and dragged the videos to the stage and hidden them within that symbol's timeline.
I then use thumbnail images in a side playlist to either .remove(); .hide(); a video and .show(); the next.
However when I do a hide / show option, the video continue to plays in the background if I don't also create an if/else statement to pause it.
My concern with pausing it is that it will continue to load and dramatically slow down the load time of the site.
References:
I found this which looks very helpful but don't know how to add this to edge composition.
http://demosthenes.info/blog/909/Create-An-Automatic-HTML5-Video-Playlist
Please help or put me in the right direction to create a playlist would be hugely... AMAZINGLY.. helpful.
Thanks,
Jason

Hi Joe,
Thank you so much for your help on this one. It is hugely appreciated!!
I have been working frantically to implement your solution to get this working. I used the 'change src' method.
I have added all my code below in case anyone wants the solution in the future.
Could you please help below as I am now totally stuck with the <track> and 'event listener issues' !!
Issue #1:
I am having major problems with loading the 'closed captions' track element.
Everything I click for the video to change source / to the next video, the closed caption track adds to the video and doesn't 'unload' the previous one. You then end up with multiple different subtitle tracks on the video screen
- The closed captions / subtitles are not showing up in Google Chrome either?
Issue #2:
I can't get the event listener in edge animate to work for 'playing' and 'ended'. Can you please help and point me in the correct direction??
Screenshot (showing what happens after the 3rd video is loaded)
This is the Code I am currently using in the "Creation Complete" of this Symbol.
SET UP OF VIDEO PLAYER AND FIRST VIDEO
var vid = sym.$("video_Chapter5");
vid.html('<video id="ch5video" width="100%" height="auto" margin= "0 auto" \
position ="relative" poster="video/video1_poster.jpg" controls="controls" </video> \
<source id ="videomp4src" src="video/Video_mp4_1.mp4" type="video/mp4" </source> \
<source id ="videoogvsrc" src="video/Video_ogv_1.ogg" type="video/ogv" </source> \
<source id ="videowebmsrc" src="video/Video_webm_1.ogg" type="video/webm" </source> \
<track id ="trackvtt" kind="subtitles" src="video/Video_1_Script.vtt" srclang="en" label="English" hidden </track>');
VARIABLE IDS
$(document).ready(function() {
var videoID = 'ch5video';
var sourceID1 = 'videomp4src';
var sourceID2 = 'videoogvsrc';
var sourceID3 = 'videowebmsrc';
var trackID = 'trackvtt';
var vid1mp4 = 'video/Video_mp4_1.mp4';
var vid2mp4 = 'video/Video_mp4_2.mp4';
var vid3mp4 = 'video/Video_mp4_3.mp4';
var vid4mp4 = 'video/Video_mp4_4.mp4';
var vid1ogv = 'video/Video_ogv_1.ogv';
var vid2ogv = 'video/Video_ogv_2.ogv';
var vid3ogv = 'video/Video_ogv_3.ogv';
var vid4ogv = 'video/Video_ogv_4.ogv';
var vid1webm = 'video/Video_webm_1.webm';
var vid2webm = 'video/Video_webm_2.webm';
var vid3webm = 'video/Video_webm_3.webm';
var vid4webm = 'video/Video_webm_4.webm';
var script1vtt = 'video/Video_1_Script.vtt';
var script2vtt = 'video/Video_2_Script.vtt';
var script3srt = 'video/Video_3_Script.vtt';
var script4vtt = 'video/Video_4_Script.vtt';
var newposter1 = 'video/video1_poster.jpg';
var newposter2 = 'video/video2_poster.jpg';
var newposter3 = 'video/video3_poster.jpg';
var newposter4 = 'video/video4_poster.jpg';
VIDEO PLAYLIST THUMBNAIL BUTTONS - TO CHANGE VIDEO IN PLAYER
sym.$('btn1').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid1mp4);
sym.$('#'+sourceID2).attr('src', vid1ogv);
sym.$('#'+sourceID3).attr('src', vid1webm);
sym.$('#'+trackID).attr('src', script1vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter1);
sym.$('#'+videoID).get(0).play();
sym.$('btn2').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid2mp4);
sym.$('#'+sourceID2).attr('src', vid2ogv);
sym.$('#'+sourceID3).attr('src', vid2webm);
sym.$('#'+trackID).attr('src', script2vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+trackID).load();
sym.$('#'+videoID).attr('poster', newposter2);
sym.$('#'+videoID).get(0).play();
sym.$('btn3').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid3mp4);
sym.$('#'+sourceID2).attr('src', vid3ogv);
sym.$('#'+sourceID3).attr('src', vid3webm);
sym.$('#'+trackID).attr('src', script3srt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter3);
sym.$('#'+videoID).get(0).play();
sym.$('btn4').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid4mp4);
sym.$('#'+sourceID2).attr('src', vid4ogv);
sym.$('#'+sourceID3).attr('src', vid4webm);
sym.$('#'+trackID).attr('src', script4vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter4);
sym.$('#'+videoID).get(0).play();
EVENT LISTENER FOR PLAYING - TO CREAT BACKGROUND /LIGHT BOX SCREEN
sym.$('#'+videoID).get(0).addEventListener('playing', function () {
sym.getSymbol("backscreen_Ch5").$("backscreen").show();
sym.getSymbol("backscreen_Ch5").play("play");
EVENT LISTENER FOR ENDED - TO PLAY NEXT VIDEO IN SERIES
sym.$('#'+videoID).get(0).addEventListener('ended', function () {
//code to play next video

MP4 - anamorph flag and multiple audio tracks

So far Quicktime simply ignores the anamorph flag in mp4 video files, making it impossible to backup dvds and converting them for appletv without a very significant loss in resolution and quality. Will there be an update for this issue soon or is it simply not wanted to allow best possible backups? I know the workarround with the quicktime reference movie, but why not implement the mp4 specs correctly and make it all easier for us?
What about MP4 videos with multiple audio tracks. I'd like to keep english and german audio tracks of my DVDs when converting to appletv. As far as i know appletv doesn't allow a selection of the audio track. Workarround with Quicktime Reference Movie works here es well, saving two Reference Movies with only one audio track enabled, but why not make it easy for us consumers and allow audio track selection on appletv. Will there be an Update?
Hope to get some answers.

modelone,
Thanks for your post. I have been experiencing the same problem of not being able to pass-through export an MP4 file that was encoded with CE-Quicktime profile.
Your post helped me to discover a workaround that will allow you to set the proper width of an MP4 file that is encoded with CE-Quicktime profile. This method does not require Quicktime Pro, and the corrected file plays properly in Quicktime and Apple TV.
First, encode the MP4 file using CE-Quicktime profile. Then, open Dumpster and drag the MP4 file into it. Navigate to 'moov', then 'trak', then 'tkhd', then select 'Matrix [a b u]'. There are 3 hexadecimal values for this key. The first number is the transformation matrix that Quicktime and Apple TV uses to determine the correct display aspect. This is the value that is multiplied to the encoded horizontal resolution to derive the horizontal display resolution. For e.g. if the encoded resolution is 720 x 576 and you want it to play back in 1024 x 576, the matrix value is 1024/720 = 1.4222. Change that first number to this correct hexadecimal fractional value and click 'Apply'.
The patched MP4 file will now play back in correct aspect ratio in Quicktime and Apple TV.
Hope this helps!

HTML5 video encoding

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.


<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>

 Download Video:
 Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
 Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>

(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>
 Download Video:
 Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
 Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>

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>
 Download Video:
 Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
 Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>

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

Implementation of multiple media tracks in HTML5 video

Similar Messages

Maybe you are looking for