带有fancybox的mediaelement.js中的Webm支持 [英] Webm support in mediaelement.js with fancybox

问题描述

我正在尝试制作精彩的 mediaelement/fancyvideo 与webm支持一起使用(因为Flash回退在MacOs Firefox中不稳定):
-如果有一个webm文件，则会播放.
-如果不是，那么mediaelement会使用它的Flash后备广告.
目前，我尝试设置

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>";

在不带扩展名的情况下编写视频就可以正常工作...但是，如果只有mp4却没有webm，请忘记Flash后备功能.
我很喜欢Jquery和其他JS东西，也许有人有主意.对于该插件来说，这可能是一个非常酷的功能.

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.

谢谢

推荐答案

您仍然可以定位<a>标签中的任何mp4文件(或任何其他类型)，例如:

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>

然后，您可能需要使用.split()方法剥离文件的扩展名，并在beforeLoad回调中构建不同的sources，如:

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.
}

请参见 JSFIDDLE

See JSFIDDLE

通知，所有源文件必须具有相同的名称，无论其类型和扩展名.

Notice all source files MUST have the same name regardless their type and extension.

这篇关于带有fancybox的mediaelement.js中的Webm支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！