Solved

Universal way to play video on the web

Posted on 2010-08-31
11
443 Views
Last Modified: 2013-11-19
I am looking for a way to play h.264 on all platforms and browsers (or at least most of them) and am having a devil of a time. I have tried JW Player and it kinda works, but not exactly. Here is what we would like:

1) Should play h.264 baseline encoded MP4 files
2) Should try HTML5 first, then fall back to flash if that does not work (may be a problem since Firefox supports the HTML5 Video tag, but only for OGG files). I say this because as things move towards HTML5 I want it to rely on that instead of Flash.
3) Should work in IE 7, 8, 9, iPhone/iPad 3.x/4.x, Firefox 3.x/4.x, and optionally others. IE and iPhone/iPad is a non-negotiable requirement.
4) Should not require the end user to install/modify anything (flash is OK if it is supported)
5) This will be for commercial use and we do not mind licensing a player/code/whatever as long as it is not stupid expensive.

Right now what I have is the JW Player using the following code:

 
<video src="/demo/jbr-0001-368x208-64-2.mp4" poster="/demo/uvs100822-001.jpg" width="368" height="250" controls>

<p><embed flashvars="file=demo/jbr-0001-368x208-64-2.mp4&image=demo/uvs100822-001.jpg&autostart=false"

  allowfullscreen="true"

  allowscripaccess="always"

  id="player2"

  name="player2"

  src="player.swf"

  width="368"

  height="270"/>

</p></video>

Open in new window


This seems to work with IE8, iPhone/iPad 3.x/4.x, Chrome, and Safari. It does not work with Firefox 3.x, IE7,  Firefox 64bit (Shiretoko/Minefield), and seems to have problems with the IE9 preview.

I am also not opposed to changing from MP4 h.264 baseline if there is a suggestion that fits the rest of the criteria and I can encode it (using VideoStudio x3 to edit). I just picked that because VS supported it, HTML5 supports it, JW Player supports it, and it creates good looking yet pretty compact video. I did not try the HTML5 version of JW player because it is "supposed" to do what I want, but fails with iOS 4.x which my client sees as a current requirement.

Thanks!
0
Comment
Question by:AMPLECOMPUTERS
  • 7
  • 4
11 Comments
 
LVL 22

Expert Comment

by:fredshovel
Comment Utility
May not be what you are looking for but I personally wouldn't use the end product encoding from Corel VSX3. As you know the audience memeber's browser doesn't make the final decision on what will stream. The audience member has to have the acceptable player on the local machine -- even if it plays in the background like Flash.
JW Player will stream H.264 in the FLV container. You can put the codec in the wrapper in the free Super encoder from Erightsoft. And as just about all audience members have Flash -- irrespecitve of their browsers -- the H.264 will happly stream up to HD in the FLV wrapper.
0
 

Author Comment

by:AMPLECOMPUTERS
Comment Utility
fredshovel: I have so far been very impressed with the encoding of VSX3 in h.264, it looks fantastic and is plenty small enough. What do you see wrong with the encoding that I must be missing?

Next, pure flash is not an option, please see my original post, the client REQUIRES that it play on iPhones and iPads, which means no flash player (hence my request that it be a HTML5 solution which falls back to flash if the browser can not play HTML5 in MP4 format (for example with Firefox which seems to be the only browser that does not support h.264 MP4 for the HTML5 video tag, it only supports OGG)).

Now I could be missing something here, so unless you are saying that the JW Player will play a h.264 encoded FLV file not only to a flash enabled browser, but also stream h.264 to a HTML5 browser which does not have flash I do not think it will work.
0
 
LVL 22

Expert Comment

by:fredshovel
Comment Utility
I have used VSX2 quite a bit, and it won't put H.264 in an FLV container. I had a brief demo of VSX3 -- but like its predecessor it was CRASH HAPPY -- but to tell the truth I didn't check out if it could wrap H.264 in an FLV container (I would guess not, but who knows?). Sorry I didn't know that Apple had dumped Flash in favour of HTML5.
So I guess I've got a bit of reading-up to do.  One thing that springs to mind is of course Apple's MOV container, which of course uses the H.264 codec. Since they dumped the old MPEG-4 part 2 and dropped H.264 in it has been a brilliant streaming and file format. Like I've said I really need to read up on this -- but I found a site that has a script for HTML5.
0
 
LVL 22

Expert Comment

by:fredshovel
Comment Utility
0
 

Author Comment

by:AMPLECOMPUTERS
Comment Utility
I checked out the link you provided and here is what I found.

1) It requires files be formatted in both MOV and OGV formats and I would prefer not to have two formats if possible. If I was going to use two formats instead of all this code etc I would just put a button for flash, and another button for HTML5, problem solved.

2) I went looking for something to convert to MOV and OGV, still have not found anything and of course VSX3 will not export to either. So I found one that will convert to MOV h.264, which looks and sounds horrible compared to the VSX3 h.264 MP4 output, and is a 33% larger file too. I found another that will do OGG video (which says you can just rename it to OGV but the OGG encoder just crashes without creating a file).

This is starting to look pretty hopeless.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 22

Expert Comment

by:fredshovel
Comment Utility
Just on the conversion to MOV.  If you're happy with VSX3 just save to your desired H.264 resolution and put it in VSX3's mp4 wrapper.  
The next part is simple and quick:
Get youself a free copy of SUPER, which is one of the best converters available -- and free -- no catches.
Download and install Super. When it opens it looks busy but it is really very simple. Drop your clip in by right clicking anywhere in its window and chosing Add Multimedia Files.  You will see three main boxes at the top. The far left box is for the container format. Simply choose the MOV container. Don't touch anything else.
Then in both the AUDIO and VIDEO sections simply check the box that says "Stream Copy"
Then click ENCODE VIDEO.  Make sure you have specified an output folder (you do this by right clicking anywhere in Super and clicking on Output Saving Management and specify a folder on your PC.
This will make an exact copy of your H.264 but place it in a MOV container.
Super is here (you have to scroll to right the bottom and click on "Start downloading Super"
http://www.erightsoft.com/SUPER.html
0
 

Author Comment

by:AMPLECOMPUTERS
Comment Utility
Fred,

OK, tried Super and it encodes the MOV file, and it encoded the OGG file which I renamed OGV. Then I used the code you linked to. Here are the results.

1) When viewed in IE8, no video window appears and I get the message that I need the latest version of safari, firefox or chrome to view the video. This alone kills the idea.

2) For some reason, now the iPad is sporadic. I read some article online that talks about problems if different versions of the same file are present on the server, as stupid as this sounds, as soon as I deleted the MOV and OGV files off the server the problem went away and the iPad plays the video (MP4) perfectly.

3) Skipping all that, the MOV never played right on the iPad, the OGV file never played right in FF. Nothing played in IE. Messing with the code a bit I did get the OGV to play in FF, but when it did it was horrible (jerky and colors off).

I do however like Super, thanks for that.

Unless something else pops up I am just going to try to put two buttons on the web page, one for H.264, one for flash, click on one and it plays the file. Not exactly sure how yet, but working on it.
0
 
LVL 22

Expert Comment

by:fredshovel
Comment Utility
Yeah sorry I can't provide the solution. I went through a lot of this several years ago when Real Player was emerging. Real used to be simple -- you just made a RAM metafile and pointed it to the video. But not enough people got into the Real Player so it was fruitless using it. So I changed to Windows Media.
It would work fine and then they'd change something and you'd have to keep changing your code and even the containers -- like asf etc. So I went for flash. But Apple dropping flash in HTML5 just throws another spanner in the works.
My current liking for mov is because of all the problems with video camera files I liked the fact that my Canon records in mov. It's brilliant and troublefree. Plays on most players and even editors. But alas I always had trouble streaming mov files in the past. But you'd think that because H.264 is the 'go to' codec these days that they'd get their act together with mov.
0
 
LVL 22

Accepted Solution

by:
fredshovel earned 500 total points
Comment Utility
This site was recommended on another thread by the author:
http://camendesign.com/code/video_for_everybody#h264
0
 

Author Closing Comment

by:AMPLECOMPUTERS
Comment Utility
Fred,

Thanks for all your help, and even though I am not using a solution based on the links you provided, the information you provided did get me into the right direction. I also appreciate the information on Super, which is a part of my final solution.

What I decided to do was to create two buttons. Both use the same MP4 H.264 video file. This file was created by exporting an uncompressed AVI from VSX3 (VS will not export MP4 H.264 in the resolution I want) and then that AVI is re-encoded using Super at the resolution I want. Both buttons open a page called player.htm which takes two arguments supplied by the button, a video name and a format. If the format is flash it uses JW Player embedded to play the file. If the format is HTML5 it uses the HTML5 Video tag to play the file.

So far it works on IE7/8/9. Firefox, Chrome, Safari and all my Apple devices (iPod/iPad/iPhone). I have yet to get Opera to work but am not overly concerned about that.

It may not be the most elegant solution, but it is easy to implement (I will be passing this off to the final end user to maintain who does not even know what HTML stands for), works reliably, works on most platforms, requires only one video file to keep track of, and the videos look outstanding.

Thanks again!
0
 
LVL 22

Expert Comment

by:fredshovel
Comment Utility
I'm glad you could pull something out of this. Indeed it is getting like the old days again when there were two or three buttons depending on which player you had. Super never ceases to amaze me, especially being free. It also does batch edits. The stream copy is very handy not only for simply changing a container but my media player won't read Dolby AC3 from my USB HDD, so I use Super to reincode all my DVD audio to MPEG-2 by batch editing all the VOBs but leaving the video untouched with Stream Copy and leaving the VOB container.
Cheers
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Workplace bullying has increased with the use of email and social media. Retain evidence of this with email archiving to protect your employees.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to successfully download and install the SARDU utility on Windows 8, without downloading adware.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now