htmlVideoLoader()

[Kataleena]

Hi,

I'm having two different issues with htmlVideoLoader():

1. I'm trying to play a .mp4 using htmlVideoLoader(), when the course is ran in IE9 the Toolbook object that the video loads in is reduced to approx. 40x40px instead of its size of 640x360. This only happens in IE9, all above versions seem to work correctly and display it at 640x360.

2. When the above course is ran in Firefox (I’m using version 28 but previous versions are having the same issue) the video motion is jerky, stilted, and choppy, this is not the case when viewed in other browsers. I created a HTML page using the <video> tag to play the same .mp4 in Firefox and the video plays perfectly.

I would be happy to give you a link to the course off the board if you require it. thanks

Cheers,
Kate

[Clifton]

I would be glad to take a look at the problem you are having if nothing below resolves the video problems.

Things I would try:

• Upgrade to the latest version of the PowerPac as we keep the most current VideoJS components in the latest builds.
• Try different encodings for the mp4. They are not all created equal. Though it produces larger file sizes, try h.263 instead of h.264. Also consider adjusting the frame rate to correct jerky playback.
• Make sure the meta info is encoded at the beginning of the video stream. Most programs seem to put it at the end, which causes all sorts of anomalies.

The htmlVideoLoader() function is basically using the HTML 5 video tag to display video OR it uses the Flash plugin as a fallback. In your case it appears that the Flash fallback is being used. There were some sizing issues with the Flash fallback method, which is usually the method selected in IE9. As a workaround, I would experiment with other mp4 encodings. Not all video conversion programs produce the same results and some are better than others when converting for web video. It is also possible that the conversion program you are using for mp4 is not putting the meta information at the beginning of the file stream, so htmlVideoLoader() does not know what aspect the video is until it has completely played once through. If the second playback is correctly sized this is probably what is happening.

I use Super Simple Video Converter in my work OR you can try Any Video Converter. The latter places the meta information at the beginning of the mp4 stream ONLY if you check an option. The former program puts the meta info at the end of the stream and so I use an additional file to just move the meta info to the beginning.
(NOTE: I've only seen meta info problems when encoding h.264 mp4's.)

Download link to program to rewrite meta information to beginning of mp4 stream (really easy and fast to use):
http://www.pgsoftwaretools.com/powerpac/help/accessories/MP4_Fast_Start.zip

Hope this helps!

[Kataleena]

Thank you for your fast reply.

Things I would try:
1. Upgrade to the latest version of the PowerPac as we keep the most current VideoJS components in the latest builds.
2. Try different encodings for the mp4. They are not all created equal. Though it produces larger file sizes, try h.263 instead of h.264. Also consider adjusting the frame rate to correct jerky playback.
3. Make sure the meta info is encoded at the beginning of the video stream. Most programs seem to put it at the end, which causes all sorts of anomalies.

I checked and I am using the latest version PowerPac.

I have spent a lot of time testing and encoding my h264 .mp4 videos using http://zencoder.com/en/. I was using Toolbook and the quicktime plugin with great success but wanted to eliminate the use of quicktime plugin which is the primary reason why I purchased PowerPac.

I used MP4_Fast_Start as you suggested to rewrite meta information to beginning of my mp4 but unfortunately it didn't fix the issue. Also after the video has played once its not correcting the size.


As for flash being used instead of <video> tag, I checked with http://html5test.com/index.html and it says my two computers using IE9 and IE11 browsers supports <video> h.264, why do you think its using the Flash plugin as a fallback?

[Clifton]

Since I no longer have access to IE9, perhaps you can test this configuration for me:
http://www.pgsoftwaretools.com/powerpac/help/index.html??acc=1&m=1&t=3-5-2
When you get to the page in the link above, try and play any of the videos with your IE9 setup and let me know if they play at the correct size.

IE9 is a problem browser for native video tag support. Some configurations will not play h.264 videos even though their browsers indicate they can. To correct the anomaly, I coded the htmlVideoLoader() to just use Flash if it is installed and to use the HTML 5 video tag for all other configurations. Of course, no version of IE can use HTML 5 video unless you check the PowerPac menu item "Enable IE HTML 5 display".

I sure would like to resolve this issue as it has come up before and other non-ToolBook developers of Internet video have complained of the problem as well.

Thank you for your observations!

[Kataleena]

Hi,

I have not been able to get your help system to work on my IE9 Machine, the menu loads on the left hand side but the content on the right never loads.

Oh I didn't realise you coded

htmlVideoLoader() to just use Flash if it is installed and to use the HTML 5 video tag for all other configurations

. I’m sorry I assumed it was the other way around.

I double checked and Enable IE HTML 5 display is ticked.

So now I understand why its playing in flash but it still doesn't solve the sizing issue in IE9, any more ideas?
Unfortunately I have to get it to work in IE9 due to my clients requirements.

Also still dont know why the video doesnt play well in firefox but it plays well in IE(apart from IE9 )

Thanks

[Clifton]

Just curious, but have you tried encoding your mp4 as h.263?
Generally speaking, this is the encoding used by Quicktime and may correct the IE9 issue for your client.
I may also make a change in htmlVideoLoader() to permit greater developer choice regarding the Flash or HTML 5 component usage.

The next PowerPac release is estimated later this week.

[Kataleena]

Hi,

No I haven't compressed in h263 as its a legacy and inferior codec to H264, I have spent years researching and testing codecs and compression due to the amount of video in our courses. Having said that I am happy to encode a test h263 video and see if it fixes the size issue. I will let you know how I go.
**Update** I have encoded a sample h263 video, the results were the same, still not resizing correctly.

I may also make a change in htmlVideoLoader() to permit greater developer choice regarding the Flash or HTML 5 component usage.

I think that would be a great, as I would like to use <video> tag and only use flash if browser doesn't support the <video> tag.

Any ideas about firefox issue?

Thanks

[Clifton]

Please provide link to the troubled content.

Also, if you provide a link to download the video that is giving problems in IE9, that would be good too.

Thanks.

[Clifton]

Please try this patched swf file in one of your exports.
http://www.pgsoftwaretools.com/powerpac/help/accessories/video-js_swf.zip

Copy the file in the archive above to the export folder of one of your projects in the location show below:
[webexport][project name]/dialog/videojs/video-js.swf

Please let me know if this corrects the aspect ratio and sizing issue.

Thank you.

[Kataleena]

Hi,

I have tried adding the file as you asked with no luck, still getting the same result. I will PM you the links for my files.

Please try this patched swf file in one of your exports.
http://www.pgsoftwaretools.com/powerpac ... js_swf.zip

Copy the file in the archive above to the export folder of one of your projects in the location show below:
[webexport][project name]/dialog/videojs/video-js.swf

Thanks