I have carousel which displays video slides. The problem with that while playing the current video the carousel automatically transfers the view to the next corousel-item video. How do I solve this issue? Is it a bad way to display a video gallery using carousel?
<h4 class="stylish_headline center ">-Video Gallery-</h4>
<?php $rows= $data["img"];?>
<div class="row" id="posts">
<div class="col s12 m12 l12">
<div class="carousel " data-indicators="true" style="margin-top: -80px;" >
<?php
foreach ($rows as $row){?>
<a class="carousel-item " href="#one!" style=" width: 300px !important;">
<video class="responsive-video" controls>
<source src="video/<?= $row['VIDEO_LINK'] ?>" type="video/mp4">
</video>
</a>
<?php }?>
</div>
</div>
</div>
<script type="text/javascript" >
$(document).ready(function(){
$('.carousel').carousel({
});
});
</script>
Hiya people i was hoping for some help for no reason the controls on chrome do not appear but they do on mozilla and IEcrappycrap do you have any idea about what could do it , i'm using a 360VR player (Bitmovin) dunno if it could have a link but when i take off the bitmovin player embed in a div , the controls works ...
<body onload="Onload()">
<div id="background">
<img id="bg" class="bg" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Bg_m.jpg" style="position:absolute;"/>
<img id="redirection" class="redi" onclick="Redirection()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/btn_1.gif" style="cursor:pointer;position:absolute;"/>
</div>
<div id="container">
<a href="javascript:;" onClick="Bandeau(1);" > <img id="bandeau_top" class="bandeau" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Pub_haut_m.jpg" style="position:absolute;"/></a>
<img id="Fleche_G" class="fleche" onclick="Left()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/fleche_gauche_m.png" style="position:absolute;"/>
<img id="Fleche_D" class="fleche" onclick="Right()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/fleche_droite_m.png" style="position:absolute;"/>
<div class="content">
<div class="player-wrapper">
<div id="playerDiv">
//bitmovinplayerembed here
</div>
</div>
</div>
<iframe name="__bkframe" height="0" width="0" frameborder="0" style="display:none;position:absolute;clip:rect(0px 0px 0px 0px)" src="about:blank"></iframe>
<video id="video1" controls preload="none" onclick="Stop()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/ours.mp4" style="position:absolute;"></video>
<img id="Video_played" class="Video" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/dark.gif" style="position:absolute;"/>
<div id="Choix">
<a href="javascript:;" onClick="Play(1);" > <img id="Vid_1" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette1_produit1_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(2);" ><img id="Vid_2" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette2_produit2_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(3);" ><img id="Vid_3" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette3_film_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(4);" ><img id="Vid_4" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette4_betisier_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play360(360);" ><img id="Vid_5" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette5_360_m.jpg" style="position:absolute;"/></a>
<img id="text_video" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/text360_m.png" style="position:absolute;"/>
</div>
<div id="Jeu_container">
<img id="Jeu_played" class="Jeu" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Jeu_m.jpg" style="visibility:hidden;position:absolute;"/>
<iframe id="iframe" src="http://www.jeubignoel.com/"></iframe>
</div>
<a href="javascript:;" onClick="Bandeau(2);" ><img id="bandeau_bot" class="bandeau" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Pub_bas_m.jpg" style="position:absolute;"/></a>
<p id="mention2">
Big = grand
</p>
<p id="mention">
</p>
<img id="track" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/BlindSpot/Desktop/empty.png" style="position:absolute;">
</div>
The Bitmovin Player explicitly hid Chrome's native video element controls using CSS. Instead of hiding just the one of the used video element, it did this for all video elements on the website. This has been fixed in version 7 of the player, so you should not experience this problem anymore with the latest stable version.
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I have a kiosk that I'm preparing for a conference that uses a 27 inch iMac, OSX Lion. The browser is Chrome. I'm using a lightbox to display quicktime videos. The Lightbox I"m using is fancybox.
When a video appears in the lightbox, I've programmed the lightbox to be "full screen", which is the size of the monitor. But the QUICKTIME content is not fullscreen, it's just a window inside of a very large white lightbox.
When I right click the video, there is a FULLSCREEN option that gives me exactly what I want: the QuickTime content goes full screen, filling up the entire 27 inch Mac screen and it looks beautiful.
What I need is for the video to open fullscreen automatically without having to right click it, since this is for a conference and the users can't keep right clicking videos to make them work right.
Here is my code:
<div id="videocontainerone" style="display:none; position:relative; top:0px;">
<object width="2560" height="1240">
<param name="movie"
fullscreen="full"
quitwhendone="true"
value="videos/one.mov">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"> </param>
<embed
src="videos/one.mov"
fullscreen="full"
quitwhendone="true"
allowscriptaccess="always" allowfullscreen="true" width="2560" height="1240">
</embed>
</object>
</div>
The lightbox is opened by js, but my hunch is that what I need is actually tweaking the quicktime settings and/or embed options. But the js to open the video is simple:
in a document.ready I just do :
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
Any help would be appreciated ! Thank you in advance.
EDIT:
I have tried to create an .htaccess file and a .qtl file , as instructed in this 2006 article:
http://www.kenvillines.com/archives/82.html
and it DOES pull up the movie but still no automatic fullscreen.
Anyone who answers this will get a beer !
Thanks.
So I found the answer. In a nutshell:
Works by putting target videos in display:none divs and using an href to link to #videoone , #videotwo, etc for the various videos, and doing that with the fancybox plugin.
I changed the video format to HTML5 since its running inside of a kiosk.
For the fullscreen effect, I'm using element.webkitRequestFullScreen(); on the html5 video element itself, which still uses the fancybox but puts it fullscreen ( and I mean the VIDEO ITSELF is fullscreen, which is what I wanted ).
I'm posting the code of the entire page here : ( I hope I get the indentation right , I usually don't post THIS much code, but it's useful. ) .... Hopefully this will help someone.
<!doctype html>
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
<!-- Add jQuery library -->
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"> </script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.4"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
console.log(element);
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var videotimer
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
console.log("key pressed is "+keycode);
if(keycode == '13'){
closeWindow();
}
});
$("a.fancybox").click(function() {
//get the name of the video from the parent div
videoname = $(this).parents("div:first").attr("id");
link = '"videos/'+videoname+'.mov'+'"'
tag = $(this).attr("href");
videotimer=setTimeout(function() { closeWindow(); },$(this).attr("id"));
videotimer=setTimeout(function() { playVideo(tag); },3);
});
$(".fancybox-close").live("click", function(){
console.log(videotimer) ;
clearTimeout(videotimer);
});
});//end document.ready
function closeWindow(){
console.log("video closed");
document.webkitCancelFullScreen();
parent.$.fancybox.close();
clearTimeout(videotimer);
}
function playVideo(tag){
console.log ("tag is "+tag);
$(tag).find('video').get(0).currentTime=0;
$(tag).find('video').get(0).play();
}
</script>
<!--div id="top_bar"></div-->
<div id="container">
<div id="top_bg">
<div id="header">
<img src="images/logo.png" alt="logo" />
<br />
<br />
<span class="gotham"> 6 Reasons </span>
<span class="gothamthin">we rock <sup>TM</sup>.
</span>
<!--a class="fancybox" rel="group" href="images/one.jpg"> <img width="25" height="25" src="images/logo.png" alt="" /></a-->
</div>
<div id="reasons_container">
<div class="sub_row">
<div id="play_all">
<a id="994000" class="highlight fancybox"
href="#videocontainerall"
onclick="goFullscreen('vidall')">play all</a>
</div>
</div>
<div class="reasons_row">
<div id="one" class="home_box featured_box">
<a id="9000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerone" onclick="goFullscreen('vidone')">
<span class="reasontext reasontext1">REASON 1</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id ="two" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainertwo"
onclick="goFullscreen('vidtwo')">
<span class="reasontext reasontext1">REASON 2</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="three" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group"
onclick="goFullscreen('vidthree')"
href="#videocontainerthree">
<span class="reasontext reasontext1">REASON 3</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
</div><!-- end reasons row -->
<div class="reasons_row">
<div id="four" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerfour"
onclick="goFullscreen('vidfour')">
<span class="reasontext reasontext1">REASON 4</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="five" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerfive"
onclick="goFullscreen('vidfive')">
<span class="reasontext reasontext1">REASON 5</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="six" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainersix"
onclick="goFullscreen('vidsix')">
<span class="reasontext reasontext1">REASON 6</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc<sup>TM</sup></span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
</div><!-- end reasons row -->
</div><!-- end reasons container -->
</div><!-- end top bg -->
</div>
<div id="footer">
<div style="float:center; position:relative; margin:20px"> OUR PARTNERSHIPS </div>
<br />
<div id="partnerships_container">
<img src="images/logos.jpeg" />
</div>
</div><!-- end footer -->
<!-- The Video Objects -->
<!-- The Video Objects -->
<div id="videocontainerone" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidone" class="player" >
<source src="videos/one.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainertwo" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidtwo" class="player" >
<source src="videos/two.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerthree" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidthree" class="player" >
<source src="videos/three.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerfour" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidfour" class="player" >
<source src="videos/four.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerfive" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidfive" class="player" >
<source src="videos/five.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainersix" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidsix" class="player" >
<source src="videos/six.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerall" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidall" class="player" >
<source src="videos/all.mov" type="video/mp4" >
</video>
</div>
</div>
<!-- END The Video Objects -->
<!-- END The Video Objects -->
</body>
</html>
I am trying to put two banners on top of a navigation bar with everything nicely centered. I can get the two banners to nicely sit by one another but when I make the browser window smaller the first banner goes on top of the second!
Is there a code where I can prevent this? If so please let me know.
This is what I have so far:
<center>
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
<BR>
You can set a min-width on the container of the banners.
Edit based on your comment:
<center> <!-- *shudder* -->
<div style="min-width: 860px;"> <!-- inline only for example purposes -->
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
</div> <!-- ditch the BR -->
...
</center>