So, my goal is to make my first div
<a href="#" onclick="showVideo1()">
<div style="width:42.5%; height:50%; position:absolute; top:5%; left:5%; background:black;" onclick="toggle_visibility('video1');">
<video style="width:100%; height:100%" autoplay="autoplay" loop="true" muted>
<source src="http://www.techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
</a>
change the display of div2
<div class="hiddiv" id="video1">
<div class="vidcont">
<video style="width:100%; height:100%;">
<source src="http://www.techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
</div>
when its clicked. To do so, I used this bit of JS
<script type="text/javascript">
function showVideo1() {
document.getElementById('video1').style.display = "block";
}
</script>`
and it works how I want it to, but now I need it so when I click on div2, it changes back to hidden. How do I do this?
you can just create another function to hide it
<div class= "hiddiv" id="video1" onclick="hideVideo()">
...
</div>
<script type="text/javascript">
function hideVideo() {
document.getElementById('video1').style.display = "none";
}
</script>
you can also create a function to toggle classes (visible/hidden).
Related
I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.
Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/
Thanks in advance
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); });
$(this).on("mouseout", function() { hideVideo(i); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
<video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", hoverVideo);
$(this).on("mouseout", hideVideo);
});
});
function hoverVideo() {
$(this).find(".overlayImage").hide();
$(this).find(".thevideo")[0].play();
}
function hideVideo(video) {
$(this).find(".thevideo")[0].currentTime = 0;
$(this).find(".thevideo")[0].pause();
$(this).find(".overlayImage").show();
}
* {
font-family: sans-serif
}
.video {
position: relative;
width: 320px;
}
.overlayImage {
position: absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In this, every video is separate from each other, allow me to explain why:
I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.
If you want you can get rid of the class tags, and use the $.find() function like this, for example:
$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();
In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.
I hope this code helps you.
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
$(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
.video {
position:relative;
}
.overlayImage {
position:absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I hope this updated code help you
I want to create a buffer gif when user seeks, play or pause the video. I am able to succeed a bit but I can'f figure out how to do this on seek. This is my code.
HTML:
<div class="row text-center">
<video width="320" height="240" controls id="video1" onplay="buffer(this.id)" poster="" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" onplay="buffer(this.id)" poster="" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS:
video.loading {
background: black url("img/loader_old.gif") center center no-repeat;
z-index: 300000 !important;
}
JQUERY:
function buffer(id){
$('#'+id).on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#'+id).on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
}
You can set the value of poster attribute to .gif at html, remove value at canplay event, where you call $(this).attr('poster', '');
<div class="row text-center">
<video width="320" height="240" controls id="video1" poster="img/loader_old.gif" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" poster="img/loader_old.gif" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
$(function() {
$("video").each(function() {
$(this).on("canplay", function (event) {
$(this).attr("poster", "");
})
})
});
Have problem with moving page to the top when I show or hide items. I want to show and hide containers simultaneously force site to don't scroll it up to the top when action of showing / hiding is triggered.
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
p{
padding: 400px 0px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<html>
<body>
<p>Lorem ipsum</p>
Movie 1
<div id="movie1" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie1.avi" type="video/avi">
too old browser.
</video>
</div>
<br/>
Movie 2
<div id="movie2" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie2.avi" type="video/avi">
too old browser.
</video>
</div>
</body>
</html>
How to prevent this move? Is there any other solution or I need to change toggle script?
Try this out:- http://jsfiddle.net/adiioo7/ftqo2z68/
Remove href=# from anchor tags.
JS:-
function toggle_visibility(id) {
$("#"+id).toggle();
}
HTML:-
<p>Lorem ipsum</p> <a onclick="toggle_visibility('movie1');">Movie 1</a>
<div id="movie1" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie1.avi" type="video/avi">too old browser.</video>
</div>
<br/> <a onclick="toggle_visibility('movie2');">Movie 2</a>
<div id="movie2" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie2.avi" type="video/avi">too old browser.</video>
</div>
Let's say I have a page with 2 divs. In the first div I have a video. After the video plays the 30 second clip THEN i want the second div to show an "about video" text. How can i accomplish this?
Code:
<div class="clip"> (This is the first div)
<video width="560" height="340" controls>
<source src="media/clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="media/clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div class="about_video"> (This is the second div)
Clip by Person. The clip is about sample..
</div>
Something like this should work:
HTML (ID's are your friend):
<div id="div1" class="clip"> (This is the first div)
<video id="myVideo" width="560" height="340" controls>
<source src="media/clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="media/clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div id="div2" class="about_video"> (This is the second div)
Clip by Person. The clip is about sample..
</div>
CSS:
.about_video {
display: 'none';
}
JS:
document.getElementById('myVideo').addEventListener('ended', function(e) {
document.getElementById('div2').style.display = 'block';
});
I have a similar demo here : http://jsfiddle.net/frictionless/NNCRR/
The top bar appears after a delay of 5000 milliseconds or 5 seconds
$(function() {
$('.headerbar')
.delay(5000).slideDown();
});
Hope this helps
For more check http://api.jquery.com/delay/
I have a problem, I am implimenting JavaScript into my website to show the audio controls when the button is clicked. I have the controls hidden with CSS and I need JavaScript to show the controls when my button is clicked. Here is my code.
<video id="videoBackground" poster="img/loading.gif" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">
</video>
<audio id="audioInterview" preload='auto' controls>
<source src="audio/interview.mp3" type="audio/mpeg">
</audio>
<div class="buttonSkip" onclick="window.location='http://www.lrltv.org/muslims-nuclear.html'"></div>
<div id="buttonPlacement" class="buttonPlacement">
<div onclick="showAudio('audioInterview')"; class="btnDonate"></div>
<div onclick="alert('Clicked Buy');" class="btnBuy"></div>
</div>
<!-- Show Audio when button is clicked -->
<script>
function showAudio('audioInterview')
{
var obj=document.getElementById('audioInterview');
obj.className = 'show';
}
</script>
function showAudio('audioInterview')
{
var obj=document.getElementById('audioInterview');
obj.className = 'show';
}
is wrong, it should be
function showAudio(controlId)
{
var obj=document.getElementById(controlId);
obj.className = 'show';
}