jquery - Webm support in mediaelement.js with fancybox -

jquery - Webm support in mediaelement.js with fancybox -

i'm trying create wonderfull mediaelement/fancyvideo work webm back upwards (because flash fallback choppy macos firefox) : - if there's webm file, it's played. - if not, mediaelement uses it's flash fallback. now, i've tried set

this.content = "<video id='video_player' poster='" + _videoposter + "' width='" + _videowidth + "' height='" + _videoheight + "' controls='controls' > <source type='video/mp4' src='" + _videohref + ".mp4'/> <source type='video/webm' src='" + _videohref + ".webm'/> </video>";

that's working write video without extension... forget flash fallback if mp4 , no webm there. suck @ jquery , other js stuff, maybe has idea. might cool feature plugin.

thanks

you still target mp4 file (or other type) in <a> tag :

<a href="video.mp4" class="fancy_video" data-width="560" data-height="320" data-caption="the video" data-poster="">play video</a>

then may need strip extension of file using .split() method , build different sources within beforeload callback :

beforeload: function () { // build html5 video construction fancybox content specific parameters _videohref = this.href.split(".mp4")[0]; // remove file extension href // set fancybox content , pass parameters this.content = "<video id='video_player' width='" + _videowidth + "' height='" + _videoheight + "' controls='controls' preload='none'>" + "<source src='" + _videohref + ".webm' type='video/webm' />" + "<source src='" + _videohref + ".mp4' type='video/mp4' />" + "</video>"; // ...etc. }

see jsfiddle

notice source files must have same name regardless type , extension.

jquery fancybox mediaelement.js