Question

我正在尝试使用webm支持进行精彩的mediaelement/fancyvideo工作（因为使用MacOs Firefox闪回后备不稳定）：
- 如果有webm文件，则播放 - 如果没有，mediaelement使用它的闪回后备现在，我试图设置

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，那就忘记闪回后退。
我吮吸Jquery和其他JS的东西，也许有人有个主意。这个插件可能是一个非常酷的功能。

谢谢

Answer 1

您仍然可以定位mp4标记中的任何<a>文件（或任何其他类型），如：

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

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

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

注意所有源文件必须具有同名，无论其类型和扩展名。

使用fancybox在mediaelement.js中支持Webm

1 个答案: