FancyPlayer+fancybox结合
夹谷和裕
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/flowplayer-3.2.13.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/fancyplayer.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css">
<script type="text/javascript">
var videoPath = "";
var swfPlayer = "js/flowplayer-3.2.18.swf";
</script>
</head>
<body>
<a href="http://www.www.com/.../1.mp4" class="video_link">TEST</a>
</body>
</html>
fancyplayer.js:
// FancyPlayer.js - A spicy mix of FancyBox and Flowplayer
$(document).ready(function () {
var videoClip = '';
var player = '';
var clipTitle = '';
$(".video_link").hover(function () {
videoClip = $(this).attr('href');
// clipTitle = $(this).text();
$(this).attr({"href": "#video_box"});
},
function () {
$(this).attr({"href": "" + videoClip + ""});
});
$(".video_link").fancybox({
tpl: {
wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner" id="fancybox-inner"></div></div></div></div>',
error: '<p class="fancybox-error">请求内容不能加载，<br/>请稍后再试。</p>',
closeBtn: '<a title="关闭" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next: '<a title="下一页" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev: '<a title="前一页" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
},
// helpers: {
// title: {
// type: 'inside' // 'float', 'inside', 'outside' or 'over'
// }
// },
// title: clipTitle,
//aspectRatio:true,
type: 'swf',
padding: 10,
margin: 10,
autoResize: false,
// beforeLoad: function () {
// this.title = clipTitle;
// },
afterShow: function () {
player = $f("fancybox-inner", swfPlayer, {
plugins: {
controls: {
// height: 30,
// scrubber: true,
// buttonColor: 'rgba(0, 0, 0, 0.9)',
// buttonOverColor: '#000000',
// backgroundGradient: 'medium',
// backgroundColor: '#D7D7D7',
// sliderColor: '#2c2c2c',
// bufferColor: '#606060',
// progressColor: '#056e9f',
// sliderBorder: '1px solid #808080',
// sliderHeight: 20,
// volumeSliderColor: '#FFFFFF',
// volumeBorder: '1px solid #808080',
// timeColor: '#000000',
// durationColor: '#535353',
tooltips: {
buttons: true,
play: '播放',
fullscreen: '全屏',
fullscreenExit: '退出全屏',
pause: '暂停',
mute: '静音',
unmute: '取消静音'
}
}
},
clip: {
autoPlay: true,
autoBuffering: true,
url: videoPath + videoClip,
onStart: function (clip) {
//var wrap=jQuery(this.getParent());
var clipWidth = clip.metaData.width;
var clipHeight = clip.metaData.height;
var pos = $.fancybox.getViewport();
var clipRatio = clipHeight / clipWidth;
if (clipWidth - 20 >= pos.w) {
clipWidth = pos.w - 40;
clipHeight = Math.round(clipRatio * clipWidth);
}
if (clipHeight - 20 >= pos.h) {
clipHeight = pos.h - 40;
clipWidth = Math.round(clipHeight / clipRatio);
}
$(".fancybox-wrap").css({
width: clipWidth + 20,
height: clipHeight + 20
});
$(".fancybox-wrap").css({
left: Math.round((pos.w - clipWidth - 20) / 2),
top: Math.round((pos.h - clipHeight - 20) / 2)
});
$(".fancybox-inner").css({
width: clipWidth,
height: clipHeight
});
},
onFinish: function () {
$('.fancybox-close').trigger('click');
}
}
});
player.load();
$('.fancybox-close').click(function () {
$(".fancybox-wrap").remove();
});
}
});
});
fancyBox - version: 2.1.5
flowplayer - 3.2.13
flowplayer - 3.2.18
以前有个下载的老版本结合，改了下，能用
类似资料：