分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery和Fancybox中的视频(本地视频文件mp4而不是Youtube)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在 Jquery FencyBox中成功地运行了Youtube视频.
但是,我无法在Jquery FencyBox中运行本地MP4视频文件(该文件存在于一个文件夹中)

请告诉我如何在JQUERY FENCYBox中运行本地视频文件(与我在FencyBox中运行YouTube视频一样).

以下是我使用的代码：

1).我使用这些文件(插件)：

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

2).成功播放Youtube中的视频

<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).现在我无法在花式框中播放本地视频@L_260_3@mP4：

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

请建议/指导/帮助.

解决方法

问题是大多数媒体对象要求播放器运行(自主托管的)第三方软件或浏览器的插件/扩展卡,通常是MP4视频的快速播放.

在YouTube的情况下,他们已经提供了一个嵌入式播放器,所以你不必担心,但是在你的本地视频的情况下,你仍然需要使用一个外部播放器,让我们说jwplayer(或任何另外您的偏好.)请注意,fancybox不包括任何视频播放器.

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

<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)数据类型属性来指示fancybox(v1.3.4)应该处理的内容类型.我使用swf为您的本地视频,因为我将使用swf播放器(jwplayer.swf),不管我在播放@L_194_5@mp4视频.

那么你可以使用这个脚本中的任何一个：

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