在fancybox mit JWPlayer中启动本地视频，在url中启动视频ID [英] Start local video in fancybox mit JWPlayer, video ID in url
问题描述
这通常是我使用fancybox和jwplayer启动视频文件的方式.
This is how I usually start a video file with fancybox and jwplayer.
头:
<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>
<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>
现在的挑战是: 我有140个视频文件，并且不想为每个文件都提供功能.您知道一种在单击链接时为该功能提供视频ID(可能是视频文件的文件名)的解决方案吗?
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?
我想到了这样的事情:
<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>
谢谢.
推荐答案
当前使用的方法是将视频内联加载到隐藏的div中，然后将div加载到fancybox中.
The method you are currently using is loading the video inline in a hidden div, then loading that div in fancybox.
我将采用另一种方法:打开fancybox后，我将直接链接到我的视频并动态加载它们.这样做的好处是，除非需要视频，否则视频不会出现在DOM中.另外，您可以将一个脚本用于多个视频，所以:
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>
为使事情变得更加灵活，每个视频都可以使用(HTML5)data-*属性(例如:
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&wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>";
}
});
}); // ready
请参见 演示
See DEMO
这篇关于在fancybox mit JWPlayer中启动本地视频，在url中启动视频ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
