在fancybox mit JWPlayer中启动本地video，在url中显示videoID

这就是我通常使用fancybox和jwplayer启动video文件的方式。

头：

 /* ... */      $(document).ready(function() { $(".fancybox").fancybox(); });   $(document).ready(function() { jwplayer('startTheMovie').setup({ file: "file.mp4", width: "640", height: "360", }); });   

身体：

  
 
 
Loading...
 
 
 Click here to start the movie  

现在的挑战是：我有140个video文件，并且不希望每个文件都有一个function。 您是否知道在点击链接时为该function提供videoID（可能是video文件的文件名）的解决方案？

我想过这样的事情：

 Click here to start movie no 1 Click here to start movie no 2 

谢谢。

Answer 1

您当前使用的方法是将video内嵌加载到隐藏的div ，然后在fancybox中加载该div 。

我会采用不同的方法：我会直接链接到我的video，并在打开fancybox后动态加载它们。 这样做的好处是，在需要之前，video不会出现在DOM中。 您还可以为多个video使用单个脚本，以便：

 Click here to start movie no 1 Click here to start movie no 2 

为了使事情更加灵活，每个video都可以有自己的尺寸（video可能没有相同的尺寸）使用（HTML5） data-*属性传递其height和width ，如：

 Click here to start movie no 1 Click here to start movie no 2 

然后使用这个脚本：

 $(document).ready(function () { $(".fancybox").fancybox({ fitToView: false, // to show videos in their own size content: '', // 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 = ""; } }); }); // ready 

见DEMO