Playing MP4 video on Flash Fallback with HTML5 file api

[veacks]

Hi, I'm trying to get a preview for the user before uploading a MP4 file.

It works like a charm for Chrome but I have this error message "The video could not be loaded, either because the server or network failed or because the format is not supported." when I try with Firefox.

I know Firefox can't read MP4/H264 natively, but the flash fallback does and if I refer to to the sources of videojs.as I can see base64 lib is imported. https://github.com/videojs/video-js-swf/blob/master/src/VideoJS.as

So if the source of the video is a MP4 base64, how can I tel to videojs to read it with the flash fallback instead of the HTML5 video tag and force to read base64 instead of reading the url ?

When I try to force flash with V.options.techOrder = ["flash"]; I have the error : VIDEOJS: Video.js: buffered unavailable on Flash playback technology element.

Thanks and sorry if the question is litte beat tricky.

[mmcc]

I'm sorry, I'm not following. When you say preview, do you mean something like a poster image? If so, I would definitely advise setting an actual poster image rather than relying on a preview from the video (in HTML5 or Flash).

[veacks]

Hi mmcc, I'm sorry, English is not my first language, so I will try to be more clear.

I provided an example on codepen with the behaviour I try to get : http://codepen.io/veacks/pen/ClBEe

What I'm doing is, when you drag and drop the MP4 file from the OS to the page, I get the source of the file as base64 encoded form the HTML5 "FileReader" api.

Then, I create a video tag with the base64 code in the src attribute and after I instanciate the video.js player with the video tag.

This is so the user can have a direct preview of the MP4 file before uploading to the server which is very usefull for him if he need to send multiple MP4 files at the same time (eg: a normal video and a video with audio description for accessibility).

As you can see, the fonctionality works well with Chrome, but if I try with the flash fallback (eg: with firefox) it recognizes the base64 passed in the src attribute of the videotag as an url and not as a base64 input.

After some research on the Action Script code, maybe the issue is not in the video.js repository and it will be better if I do a pull request on the video-js-swf repository because the switch between url and base64 doesn't seems to exist yet.

Should I rather use the video-js-swf repository?

Thanks.

[michelt]

Same problem here. Flash fallback does not work on Firefox with .mp4 files

[mmcc]

@michelt Just standard mp4 files or a base64 source? Flash playback in Firefox 29 is working fine for me with standard mp4 files, but the OP is right about base64 sources.

@veacks I'm thinking this one is a better fit for the swf repo. Mind opening up a ticket over there and referencing this one?

[mmcc]

This is actually a known issue regarding the src attribute (video.js doesn't support the src attribute directly on the Video.js element). This will (should) work if you set the source via the Video.js API instead of setting the src, then initializing the element.

[veacks]

Ok I'll try it this week. Thanks :)

[mmcc]

Great, thanks! I noticed the source thing on a second reading (related: #1274), but afaik what you're doing should be fine if you use the API to set everything. I did something similar with blobs a little while back. Keep us updated!

[veacks]

Hi,

I've made my tests with a MP4 file on Firefox.

videojs(aVideo, { "controls": true, "autoplay": true, "preload": "auto" }).src({ type: "video/mp4", src: [MY-BASE64-MP4-VIDEO]})

The flashplayer instanciates well, but the MP4 video does not play and the screen stay in black. I can see the base64 in src attribute of the flashvars tag.

<param name="movie" value="http://vjs.zencdn.net/4.9/video-js.swf">
<param name="flashvars" value="readyFunction=videojs.Flash.onReady&amp;eventProxyFunction=videojs.Flash.onEvent&amp;errorEventProxyFunction=videojs.Flash.onError&amp;autoplay=true&amp;preload=undefined&amp;loop=undefined&amp;muted=undefined&amp;src=data%3Avideo%2Fmp4%3Bbase64%[REST-OF-MY-BASE64-FILE]">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all"><param name="wmode" value="opaque"><param name="bgcolor" value="#000000">

Maybe base64 sources are to big for a flashvar or flash can't read it? Any ideas?