I have a web site that includes several Flash videos. Given that the iPad doesn't support Flash and the elimination of Flash support on new Android OS versions, I decided to update my videos to a format that was compatible with all web browsers. I found this process long and torturous before I finally got the results that I wanted. As much as I searched, there seemed to be no one authoritative reference that described the proper method.
After many failures and false starts, I came to this forum asking for help. Thanks to members "poinsondeathray" and "_Al_" who provided a great amount of assistance, I was finally able to get satisfactory results. However, the title of that thread bears little resemblance to the final solution. Therefore, this thread is intended to present a summary of my experience. I don't claim to be an expert and there are probably other methods that work. Nonetheless hopefully, this thread will help anyone else who is trying to do something similar.
OK. Here goes .
Alternative Methods to post on the web
1. HTML5 - this process requires the use of the "<video>" tag. Since the various browsers don't support the same video format. It is necessary to recode the video into MP4, WebM, OGV and Flash to ensure that every broswer will play the video.
2. Flowplayer - I fiddled with this player but was unable to get it working properly (probably my fault).
3. JW Player - This player allows an MP4 video to be played in native format or falls back to Flash in those browsers who don't support it.
I selected JW player because it was the easiest and worked best for me.
Making the Video Clip
My original videos were in MOV format and most needed to be trimmed to get the clip that I wanted to post. I tried a number of stand-alone programs to trim the MOV video. Some of the programs that I used to recode the MOV file also allow trimming. I found that almost all programs sometimes gave me a bad trimmed video. Either there was a short video freeze at the beginning of the trimmed video or the sound played for a second or so with a frozen video at the end of the clip. (I think that this has something to do with the placement of Reference frames or B frames in the clip. However, I didn't find any application that showed those frames and allowed me to select the right spot for a cut.)
In the end, Quicktime Pro consistently provided a good quality clip.
Recoding MOV video to WebM
If you choose to use HTML5, one of the recoded videos that you will need is WebM. In my failed attempt at HTML5, I used Xmedia Recode to do this conversion. However, when I played these videos in Firefox, they frequently stuttered. I found that the problem was not the video but Firefox. If the WebM video was played in VLC (version 2), it played flawlessly.
Therefore, this was one of the negative aspects of using HTML5.
Recoding MOV video to MP4
This is the process that caused me the most grief. I used about half a dozen different programs in an attempt to get an MP4 video that would work in all browsers. Ultimately, I found that it was the CODEC used by the conversion program that was causing the problem. MP4s created by programs that used the "isom" CODEC usually failed to load in at least one browser. A program that used the "mp42" CODEC produced an MP4 video that worked consistently.
Although the various conversion programs provided a different variety of options that could be used in the conversion process, none of them explicitly allowed the selection of the "mp42" CODEC!
In the end, I used Handbrake with the following options
- "Android-mid" option
- 2 Reference Frames
- selected the bit rate (used 1500)
- selected dimensions of the output video that I wanted (used 800x448)
To ensure that the correct CODEC was used, I loaded the MP4 file into Mediainfo and chose the Text output. There, you can see that the MP4 was coded with the CODEC ID mp42.
So in summary, the recommendation is:
- use JW Player in your web page
- If necessary, trim your video in Quicktime Pro
- Recode your video into MP4 using Handbrake
- Verify that the correct CODEC was used with MediaInfo
This is a little lengthy but I hope that it will save someone else a little time and grief.
Thanks again to "poisondeathray" and "_Al_" for their assistance.
After many failures and false starts, I came to this forum asking for help. Thanks to members "poinsondeathray" and "_Al_" who provided a great amount of assistance, I was finally able to get satisfactory results. However, the title of that thread bears little resemblance to the final solution. Therefore, this thread is intended to present a summary of my experience. I don't claim to be an expert and there are probably other methods that work. Nonetheless hopefully, this thread will help anyone else who is trying to do something similar.
OK. Here goes .
Alternative Methods to post on the web
1. HTML5 - this process requires the use of the "<video>" tag. Since the various browsers don't support the same video format. It is necessary to recode the video into MP4, WebM, OGV and Flash to ensure that every broswer will play the video.
2. Flowplayer - I fiddled with this player but was unable to get it working properly (probably my fault).
3. JW Player - This player allows an MP4 video to be played in native format or falls back to Flash in those browsers who don't support it.
I selected JW player because it was the easiest and worked best for me.
Making the Video Clip
My original videos were in MOV format and most needed to be trimmed to get the clip that I wanted to post. I tried a number of stand-alone programs to trim the MOV video. Some of the programs that I used to recode the MOV file also allow trimming. I found that almost all programs sometimes gave me a bad trimmed video. Either there was a short video freeze at the beginning of the trimmed video or the sound played for a second or so with a frozen video at the end of the clip. (I think that this has something to do with the placement of Reference frames or B frames in the clip. However, I didn't find any application that showed those frames and allowed me to select the right spot for a cut.)
In the end, Quicktime Pro consistently provided a good quality clip.
Recoding MOV video to WebM
If you choose to use HTML5, one of the recoded videos that you will need is WebM. In my failed attempt at HTML5, I used Xmedia Recode to do this conversion. However, when I played these videos in Firefox, they frequently stuttered. I found that the problem was not the video but Firefox. If the WebM video was played in VLC (version 2), it played flawlessly.
Therefore, this was one of the negative aspects of using HTML5.
Recoding MOV video to MP4
This is the process that caused me the most grief. I used about half a dozen different programs in an attempt to get an MP4 video that would work in all browsers. Ultimately, I found that it was the CODEC used by the conversion program that was causing the problem. MP4s created by programs that used the "isom" CODEC usually failed to load in at least one browser. A program that used the "mp42" CODEC produced an MP4 video that worked consistently.
Although the various conversion programs provided a different variety of options that could be used in the conversion process, none of them explicitly allowed the selection of the "mp42" CODEC!
In the end, I used Handbrake with the following options
- "Android-mid" option
- 2 Reference Frames
- selected the bit rate (used 1500)
- selected dimensions of the output video that I wanted (used 800x448)
To ensure that the correct CODEC was used, I loaded the MP4 file into Mediainfo and chose the Text output. There, you can see that the MP4 was coded with the CODEC ID mp42.
So in summary, the recommendation is:
- use JW Player in your web page
- If necessary, trim your video in Quicktime Pro
- Recode your video into MP4 using Handbrake
- Verify that the correct CODEC was used with MediaInfo
This is a little lengthy but I hope that it will save someone else a little time and grief.
Thanks again to "poisondeathray" and "_Al_" for their assistance.