html:
<!--视频缩略图开始-->
<div class="fresh-media fresh-type-video">
<div class=" fresh-media-small-img fresh-media-small-video">
<img src="http://r01.xesimg.com/dynamic/dc6b746db5892f33ecac662ec1baf3d9_small.jpg">
<a href="javascript:void(0);" class="fresh-video-play"></a>
</div>
</div>
<!--视频缩略图结束-->
<!--视频大图播放开始-->
<div class="fresh-media fresh-media-expand fresh-media-expand-video hiding" data-url="http://www.xueersi.com/video/getDynVideo/1989">
</div>
<!--视频大图播放结束-->
js:
var fresh = fresh || {};
fresh.media = fresh.media || {};
fresh.media.video = fresh.media.video || {};
fresh.media.video.videoPlay = function(dom){
var videoBox = $(dom).closest('.fresh-type-video');
//视频div层显示
videoBox.next().show();
//视频缩略图隐藏
videoBox.hide();//图隐藏
var url = videoBox.next().data('url');
var video_html ='<div class="fresh-media-big-video">'
+ '<p class="fresh-media-packUp"><a href="javascript:void(0);" class="fresh-packUp-video">收起</a></p>'
+ '<div /></a></p>'
+'</div>'
+'<!--[if !IE]>-->'
+'</object> '
+'<!--<![endif]-->'
+'</object>'
+ '</div>'
+ '</div>';
videoBox.next().html(video_html);
}
点击播放调用函数:
//点击视频小图显示视频大图效果
$('.fresh-main-wrapper').off('click', '.fresh-type-video .fresh-media-small-video').on('click', '.fresh-type-video .fresh-media-small-video', function(){
fresh.media.video.videoPlay(this);
});