Question

我的目标是播放已经上传到我的服务器上的mov文件，让它使用fancybox和jquery弹出框架会很好。但是我试图在这些代码中用.mov代替swf-type没有运气：

<a class="various" href="Poem.MOV">Play movie</a>

来自fancybox网站的建议列表中的这个Jquery：

    <script src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<script>
        $(document).ready(function() {
            $(".various").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });
        });
    </script>

这只将我发送到播放该mov-file的其他网页。通过在fancybox框架中成功弹出视频而工作的不同且最接近的代码但是根本不播放甚至不显示。它只出现在没有播放电影的白框中：

HTML：

<a class="fancybox" data-type="swf" href="Poem.MOV" title="Poem">Play Movie</a>

JAVASCRIPT：

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

我想知道使用fancybox在我们自己的服务器上播放.mov是否可行，而不使用YouTube或Vimeo等第三方服务器。谢谢你的时间。

Answer 1

您可以使用JWplayer player与fancybox一起播放.mov或其他视频格式。下面是整合jWplayer with fancybox的代码：

$(".various").fancybox({
        fitToView: true,
        content: '<div id="myJWPlayer">Loading the player ...</div>',
        scrolling: 'no',
        afterShow: function () {
          var video_href= j(this.element).data('url');
          $('#myJWPlayer').css({height:'400px',width:'500px'});
          setTimeout(function(){
            jwplayer('myJWPlayer').setup({
                'file' : video_href,
                "autostart" : "true",
                "controlbar" : "bottom",
                "flashplayer" : "url-to-/jwplayer.flash.swf",
                "volume" : "70",
                "width" : 500,
                "height" : 400,
                "mute" : "false",
                "stretching" : "fill"
            });
            updateViewTime(vid);
          },100);
        }
      });

Answer 2

我在 HTML5 视频播放器工作时遇到了问题，但将相同的 .mov 加载到fancybox 时无法播放。我的解决方案是直接将视频的url添加到video标签中，或者在afterLoad()回调中将source标签的“type”属性设置为空。

const attachment_movie = [ 'mp4', 'mov' ];

$.fancybox.open(gallery, {
    buttons: [
      'download',
      'zoom',
      'slideShow',
      'thumbs',
      'close'
    ],
    thumbs: { 'autoStart': true },
    afterLoad : function() {
        var href = this.src;
        var ext = href.substr(href.lastIndexOf('.') + 1).toLowerCase();
        
        if ( $.inArray(ext, attachment_movie) > -1 )
          $('.fancybox-video').prop('src', href);
        // or
        if ( $.inArray(ext, attachment_movie) > -1 )
          $('.fancybox-video source').prop('type', '');
    }
  });

Answer 3

我通过替换 <video> 标记的模板设法解决了该问题。我在视频标签中添加了 src="{{src}}"。您也可以将其作为选项的一部分传递。

$.fancybox.defaults.video = {
  ...$.fancybox.defaults.video,
  tpl: `
  <video class="fancybox-video" poster="{{poster}}" src="{{src}}">
    <source src="{{src}}" type="{{format}}" />Sorry, your browser doesn't support embedded videos, 
    <a href="{{src}}">download</a> and watch with your favorite video player!
  </video>`
};

我们如何使用jquery在fancybox中播放.mov文件？

3 个答案: