Webm support in mediaelement.js with fancybox

问题

I'm trying to make the wonderfull mediaelement/fancyvideo work with a webm support (because the flash fallback is choppy with MacOs Firefox) :
- if there's a webm file, it's played.
- if not, mediaelement uses it's flash fallback.
For now, I've tried to 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 a soon as you write your video without extension... BUT forget about the flash fallback if only mp4 and no webm is there.
I suck at Jquery and other JS stuff, maybe someone has an idea. It might be a very cool feature for this plugin.

Thanks

回答1:

You still could target any mp4 file (or any other type) in your <a> tag like :

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

Then you may need to strip the extension of the file using the .split() method and build the different sources within the beforeLoad callback like :

beforeLoad: function () {
    // build the HTML5 video structure for fancyBox content with specific parameters
    _videoHref = this.href.split(".mp4")[0]; // remove file extension from href
    // set fancyBox content and 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 all source files MUST have the same name regardless their type and extension.

来源：https://stackoverflow.com/questions/26759091/webm-support-in-mediaelement-js-with-fancybox

标签

jquery

fancybox

mediaelement.js