I am trying to change the video's current time if I click on the P tag.
Note: Each P tag will be able to change the current time to a different duration
e.g.
<p>Sample 1</p> // should change the current time to 10 seconds
<p>Sample 2</p> // should change the current time to 30 seconds
Bellow is the code Currently I am trying to work on. Can anyone please let me know how can I change the current time clicking on the P tags.
const RecipeReview = () => {
return (
<div className='row'>
<div className='col-sm-8'>
<div className='row'>
<div className='embed-responsive embed-responsive-16by9'>
<video className='embed-responsive-item' controls>
<source src={VideoLink} />
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div className='col-sm-4'>
<div className='row mt-2 ml-1'>
<div className='w-100 mt-2 mr-2'>
<div className='d-flex flex-nowrap align-items-center'>
<p className='text flex-grow-1 mr-2'>
Sample1
</p>
</div>
<div className='d-flex flex-nowrap align-items-center'>
<p className='text flex-grow-1 mr-2'>
Sample2
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default RecipeReview;
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>
I am trying to recreate the video controls as such that it appears as text and only appears on hover, exactly the same as the videos hosted in this website: http://www.brownsdesign.com/work/, any idea how. I've got the text, but it is not functioning as a playpause button. Any help is appreciated. Thanks.
html:
<div class="item chopsticks hamburger shake">
<video class="noauto" loop="loop" controls="controls" poster="images/27890.jpg" height="auto" width="300">
<source src="videos/b_cs.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
<img src="images/27890.jpg" alt="" />
</video>
<div class="controller" style="display:none;">
<div class="controlContainer">
<a class="vidPlay" style="cursor: pointer;">Play</a>
<a class="vidPause" style="cursor: pointer;">Pause</a>
<a class="vidStop" style="cursor: pointer;">Stop</a>
</div> <!-- end .controlContainer -->
</div> <!-- end .controller -->
</div> <!-- end .item chopsticks hamburger shake -->
So why not use jQuery?
$('.item').hover(function() {
$('.controller').slideDown();
}, function() {
$('.controller').slideUp();
});
I try build app by JQM and I use widget Navbar, until now I used by IFrame but it works not good.
My question is, what can I replace instead of IFrame ?
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li>
<a href="#info_tab" class="infoButton ui-btn-active" data-icon="custom"
id="infoMenu"> </a></l`enter code here`i>
<li><a href="#calendar_tab" class="calendarButton"
data-icon="custom" id="calendarMenu"></a></li>
<li><a href="#picture_tab" class="picturesButton" data-icon="custom"
id="pictureMenu"> </a></li>
<li></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- iFrames -->
<div id="iFramesDIV">
<div id="info_tab" class="fullScreen ">
</div>
<div id="calendar_tab" class="fullScreen hide">
<iframe id="calendarFrame" src="tab_pickadate/calendar.html"
scrolling="no" frameborder="0" class="fullScreen"></iframe>
</div>
<div id="picture_tab" class="fullScreen hide">
<iframe id="pictureFrame" src="" scrolling="no" frameborder="0"
class="fullScreen"></iframe>
</div>
<div id="buy_tab" class="fullScreen hide">
<iframe id="buyFrame" src="tab_buy/buy.html" frameborder="0"
class="fullScreen"></iframe>
</div>
</div>
<!-- End iFrames -->
</div>
<!-- End Content-->
Please help me :)
To use iframes you will need to include JQM library in the source of Iframe. Try including JQM in "tab_pickadate/calendar.html" path. I also worked with Iframes and JQM together.
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>