我从互联网上获得了一个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>