視頻在jQuery和的fancybox（本地視頻文件的MP4而非YouTube）

我成功運行YouTube視頻中的Jquery FencyBox。但是，我不能在jQuery的FencyBox運行本地MP4視頻文件（該文件所在的文件夾中）視頻在jQuery和的fancybox（本地視頻文件的MP4而非YouTube）

請告訴我如何可以運行在jQuery中FENCYBOX本地視頻文件（與我正在運行的YouTube視頻在FencyBox）。

以下是我使用的代碼：

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）。現在我無法在Fancy Box中播放本地視頻文件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>

請建議/ guide/help。

來源

2013-10-02 Anwer Hussain

的問題是，大多數媒體對象需要一名球員來運行，無論是（自託管）第三方軟件或瀏覽器的插件/擴展程序，通常的QuickTime的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）data-type屬性表明content的fancybox（V1.3.4）的type應該處理。我使用swf作爲本地視頻，因爲無論我在播放mp4視頻，我都會使用swf播放器（jwplayer.swf）。

那麼你可以使用這個腳本任何人：

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

注意：.on()需要的jQuery V1.7 +但的fancybox不工作使用jQuery v1.9 +，請參閱this瞭解更多信息。你可以使用jQuery v1.8.3或者在引用的帖子中應用這個補丁。

LAST點評：這款可能無法在移動設備上工作。您可能更願意使用mediaelements之類的其他播放器來代替跨瀏覽器/跨平臺兼容性（或通過舊版瀏覽器後備選項獲取jwplayer v6.x）

來源

2013-10-02 18:48:48 JFK

此代碼可幫助您運行本地視頻文件，使確定你有你的。mp4視頻文件，或者您可以將YouTube視頻與錨標記鏈接。

<head> 
 
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script> 
 
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" /> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $('#video a').fancybox({ 
 
       width: 640, 
 
       height: 400, 
 
       type: 'iframe' 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
<div id="video"> 
 
    <a href="new_video.mp4"><img src="/images/video_coverpage.jpg" alt="" /></a>  
 
</div> 
 
</body>

來源

2016-04-19 13:53:44

雖然此代碼段可以解決的問題，[包括一個解釋]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers ）真的有助於提高你的帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。 –

Jinal回答與工作示例。

<head> 
 
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script> 
 
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" /> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $('#video a').fancybox({ 
 
       width: 640, 
 
       height: 400, 
 
       type: 'iframe' 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
<div id="video"> 
 
    <a href="http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251">Click Here</a>  
 
</div> 
 
</body>

來源

2017-03-16 07:13:39

視頻在jQuery和的fancybox（本地視頻文件的MP4而非YouTube）

回答

相關問題