Jquery视频墙与Fancybox javascript混合

时间:2014-11-06 14:38:56

标签: javascript jquery fancybox mix

我从互联网上获得了一个VideoWall代码,我设法改变了它并设置了所有内容。

代码基本上是一些缩略图,用鼠标悬停播放视频表单存档.mp4或.ogv,然后单击它打开带视频的fancybox。

我遇到的唯一问题是当我在Fancybox中打开Vimeo时,取决于我使用的浏览器,它将以flash形式打开。问题是,当我尝试在IOS上打开它时,它将无法加载,可能导致它以闪存方式打开..

以下是调用fancybox的代码

<div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/109228610' data-type='local' data-mp4='../media/video/1/wall/011.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video" data-description="" data-thumb="../media/video/1/wall/01.jpg"></div>

我知道这一定很简单,我不知道我提供的信息是否适用。我需要找到一种方法让这个视频打开,但不是闪存,所以IOS设备可以看到它。

提前感谢您的帮助。

这是代码

Hello JFK, here is the code i use :

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>HTML5 Video Wall</title>
        
		<link rel="stylesheet" type="text/css" href="css/vw_default.css" />
        
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <!-- fancybox -->
        <link rel="stylesheet" type="text/css" href="data/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
        <link rel="stylesheet" type="text/css" href="data/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
        <link rel="stylesheet" type="text/css" href="data/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
        <script type="text/javascript" src="data/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
		<script type="text/javascript" src="data/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <script type="text/javascript" src="data/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        <script type="text/javascript" src="data/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
        <!-- end fancybox -->
        
        <script type="text/javascript" src="js/jquery.videoWall.min.js"></script>
        <script type="text/javascript">
        
			var hap_player;  
			jQuery(document).ready(function($) {
				
				/* SETTINGS */
				var vw_settings = {
					
					/*activePlaylist: Active playlist to start with. enter element 'id' attribute, or leave empty for none. */
					activePlaylist:'playlist1',
					/*playlistList: dom element which holds list of playlists */
					playlistList:'#playlist_list',
					
					/*useLivePreview: true/false (play video on thumbnail rollover). Defaults to false on mobile. */
					useLivePreview:true,
					/*useSound: true/false (use sound in preview videos, if useLivePreview = true) */
					useSound:true,
					/* useWebmVideoFormat: true/false (Browser support for html5 video requires minimum of 2 video formats to cover all browsers, mp4 and ogv being preffered. If useWebmVideoFormat is true, then webm will be used instead of a ogv.) */
					useWebmVideoFormat:false,

					/*wallType: default/icons/zoom/tooltip/'' (''=dont create playlist) */
					wallType:'default',
					
					/*useRemoveButtons: true/false (create button to remove vimeo from playlist; only for wallType icons) */
					useRemoveButtons:true,
					tooltips: {remove: 'Remove',/* remove button */
							   expand: 'Expand',/* lightbox button */
							   link: 'External link',/* external link button */
							   action: 'Custom action'},/* empty action button */
					   
					/* media_id: unique id for api (if multiple player instances were used, then strings need to be different!) */
					media_id:'default'
					
				};
				
				hap_player = $('#componentWrapper').videoWall(vw_settings);
				//initApi();
				
			});
			
			var api_panel, api_panel_inited, api_panel_inner, toggle_api_panel, api_panel_opened, tgtime = 300;
			function initApi(){
				
				api_panel = $('#api_panel').css('display', 'block');
				api_panel_inner = $('#api_panel_inner');
				api_panel.css('right', -api_panel_inner.outerWidth(true)-20+'px');
				
				toggle_api_panel = $('.toggle_panel').css({cursor:'pointer', display:'block'}).bind('click', function(){
					if(api_panel_opened){
						api_panel.stop().animate({ 'right': -api_panel_inner.outerWidth(true)-20+'px'},  {duration: tgtime, complete: function(){
							api_panel.css('display','none');
						}});
						$(this).removeClass().addClass('toggle_panel');
						api_panel_opened=false;	
					}else{
						api_panel.css('display','block').stop().animate({ 'right': 41+'px'},  {duration: tgtime});
						$(this).removeClass().addClass('toggle_panel_close');
						api_panel_opened=true;
					}
					return false;	
				}).click();
				api_panel_inited=true;
			}
        
        </script>
        	


  

  
  		<div id="componentWrapper">
        	<div class="componentPlaylist"><div class="playlist_content"></div></div>
        	<div class="preloader"></div>
        </div>
        
        <div id="playlist_list">

			 <!-- local tracks -->
			 <div id='playlist1'>





           <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/011.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="descriptiions" 
data-description="" data-thumb="../media/video/1/wall/01.jpg"></div>
                 
              <!-- 2 think2-->   <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808" width="500" height="281" frameborder="0" ' data-type='local' data-mp4='../media/video/1/wall/012.mp4' data-ogv='../media/video/1/wall/02.ogv'
 data-title="Youtube video" data-description="descriptiions." data-thumb="../media/video/1/wall/02.jpg"></div>
                 
         <!-- 3 jet -->         <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/013.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/03.jpg"></div>
             
   <!--4 welcome -->         <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/video/28383808' data-type='local' data-mp4='../media/video/1/wall/014.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/04.jpg"></div>
                
        <!--5 a linha-->          <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/015.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/05.jpg"></div>

       <!--6 corat -->            <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/016.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/06.jpg"></div>
                                  
          <!--7 pier 111-->           <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/video/28383808' data-type='local' data-mp4='../media/video/1/wall/017.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/07.jpg"></div>
                 
             
               <!--8 tarsila -->     <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/018.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/08.jpg"></div>
                 
 <!-- 9 abc dos caes-->     <div class='playlistItem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/019.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="Vimeo video Nulla facilisi" 
data-description="descriptiions." data-thumb="../media/video/1/wall/09.jpg"></div>
             

             </div>

0 个答案:

没有答案