jquery - Start local video in fancybox mit JWPlayer, video ID in url

Question

Welcome To Ask or Share your Answers For Others

jquery - Start local video in fancybox mit JWPlayer, video ID in url

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - Start local video in fancybox mit JWPlayer, video ID in url

This is how I usually start a video file with fancybox and jwplayer.

Head:

<head> /* ... */
      <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
      <script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
      <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
      <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.3" media="screen" />
      <script type="text/javascript">
        $(document).ready(function() {
          $(".fancybox").fancybox();
        });
      </script>
      <script type="text/javascript">
        $(document).ready(function() {
                  jwplayer('startTheMovie').setup({
                     file: "file.mp4",
                     width: "640",
                     height: "360",
                  });
        });
      </script>
</head>

Body:

<body>
     <div style="display:none">
        <div id="movie">                                    
          <div id="startTheMovie">Loading...</div>                          
        </div>
      </div>
      <a href="#movie" class="fancybox">Click here to start the movie</a>
</body>

The challenge now is: I have 140 video files and don't want a function for every single file. Do you know a solution for giving a video id (which may be the filename of a video file) to the function when clicking on a link?

I thought about something like this:

<a href="#movie?id=movie1" class="fancybox">Click here to start movie no 1</a>
<a href="#movie?id=movie2" class="fancybox">Click here to start movie no 2</a>

Thank you.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:23:39+0000

The method you are currently using is loading the video inline in a hidden div, then loading that div in fancybox.

I would follow a different approach: I would link to my videos directly and load them dynamically once fancybox is opened. That has the advantage that videos are not present in the DOM until they are required. Also you can use a single script for multiple videos so :

<a href="path/video01.mp4" class="fancybox">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox">Click here to start movie no 2</a>

To make things more flexible, each video could have its own dimensions (video may not have the same size always) passing its height and width using the (HTML5) data-* attribute like :

<a href="path/video01.mp4" class="fancybox" data-width="352" data-height="270">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox" data-width="640" data-height="360">Click here to start movie no 2</a>

Then use this single script :

$(document).ready(function () {
  $(".fancybox").fancybox({
    fitToView: false, // to show videos in their own size
    content: '<span></span>', // create temp content
    scrolling: 'no', // don't show scrolling bars in fancybox
    afterLoad: function () {
      // get dimensions from data attributes
      var $width = $(this.element).data('width'); 
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='pathToPlayer/jwplayer.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });
}); // ready

See DEMO

Categories

jquery - Start local video in fancybox mit JWPlayer, video ID in url

jquery - Start local video in fancybox mit JWPlayer, video ID in url

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags