jQuery和Fancybox中的视频(本地视频文件mp4代替Youtube) [英] Video in jQuery and Fancybox (Local video file mp4 Instead of Youtube)

问题描述

我在Jquery FencyBox中成功运行了YouTube视频. 但是，我无法在Jquery FencyBox中运行本地MP4视频文件(此文件存在于文件夹中)

I am successfully running a Youtube Video in Jquery FencyBox. But, I am unable to run a local MP4 Video File in Jquery FencyBox (this file exists in a folder)

请告诉我如何在JQUERY FENCYBOX中运行本地视频文件(与在FencyBox中运行youtube视频相同).

Please tell me how can i run a local video file in JQUERY FENCYBOX (same as i am running a youtube video in FencyBox).

以下是我正在使用的代码:

Following is the code i am using:

1).我正在使用这些文件(插件):

1). I AM USING THESE FILES(PLUGINS) :

jquery.fancybox-1.3.4.js 和 jquery.fancybox-1.3.4.css

jquery.fancybox-1.3.4.js AND jquery.fancybox-1.3.4.css

2).在花式盒中成功播放了Youtube中的视频:

2). Successfully Playing video from Youtube in Fancy Box:

<div class="main">
    <h1>VIDEO Playing From YOUTUBE</h1>
    <p><a href="http://www.youtube.com/embed/WAZ5SmJd1To" class="youtube iframe">Watch this amazing YouTube video</a></p>
</div>

3).现在，我无法在Fancy Box中播放本地视频文件MP4:

3). Now I am unable to play Local Video File MP4 in Fancy Box:

<div class="main">   
    <h1>Local Video File Playing</h1>
    <p><a href="example/video.mp4" class="youtube iframe" > My Local Video in Example Folder</a></p>         
</div>

请提出建议/指导/帮助.

Please suggest/guide/help.

推荐答案

问题在于，大多数媒体对象都需要播放器才能运行，这是(自托管)第三方软件或浏览器的插件/扩展程序，通常 quicktime 用于MP4视频.

The issue is that most media objects require a player to run, either a (self-hosted) third-party software or a browser's plugin/extension, normally quicktime for MP4 videos.

对于youtube，他们已经提供了嵌入式播放器，因此您不必担心，但是对于本地视频，您仍然需要使用外部播放器，例如 jwplayer (或您的任何其他偏好设置.)请注意，fancybox不包含任何视频播放器.

In the case of youtube, they provide already with an embedded player so you don't have to worry about that but in the case of your local video(s), you still need to use an external player, let's say jwplayer (or any other of your preference.) Notice that fancybox doesn't include any video player.

所以我将使用以下html链接每个视频

So I would use the following html to link each video

<a class="fancybox" data-type="iframe" href="http://www.youtube.com/embed/WAZ5SmJd1To?autoplay=1" title="youtube">open youtube (embed mode)</a><br />
<a class="fancybox" data-type="swf" href="pathToPlayer/jwplayer.swf?file=pathToVideo/video.mp4&autostart=true" title="local video mp4">open local video</a>

通知，我添加了(HTML5)data-type属性以指示content fancybox(v1.3.4)的type应该处理.我将swf用于您的本地视频，因为无论我正在播放mp4视频，我都将使用swf播放器(jwplayer.swf).

Notice that I added a (HTML5) data-type attribute to indicate the type of content fancybox (v1.3.4) should handle. I used swf for your local video since I will be using a swf player (jwplayer.swf) regardless I am playing a mp4 video.

然后您可以对其中任何一个使用此脚本:

then you could use this script for any of them :

jQuery(document).ready(function($){
    $(".fancybox").on("click", function(){
        $.fancybox({
          href: this.href,
          type: $(this).data("type")
        }); // fancybox
        return false   
    }); // on
}); // ready

您可以在此处查看演示 http://www.picssel.com/playground /jquery/localVideojwPlayer_02oct13.html

You can see a demo here http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html

注意:.on()需要jQuery v1.7 +，但fancybox不适用于jQuery v1.9 +，请参见

NOTE: .on() requires jQuery v1.7+ but fancybox doesn't work with jQuery v1.9+, see this for further information. You could use jQuery v1.8.3 or apply the patch as in the referred post.

最后评论:这可能不适用于移动设备.您可能宁愿使用 mediaelements 之类的其他播放器来实现跨浏览器/跨平台的兼容性(或获取jwplayer带有旧版浏览器后备选项的v6.x)

LAST COMMENT: this may not work in mobile devices. You may rather prefer to use a different player like mediaelements for cross-browser/cross-platform compatibility instead (or get jwplayer v6.x with legacy browsers fallback option)

这篇关于jQuery和Fancybox中的视频(本地视频文件mp4代替Youtube)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！