JavaScript/CSS - buttons overlaying video - javascript

I created a simple html/javascript/css to learn about it. It is a video with buttons inside. I want the buttons to be invisible until the video plays for 5 seconds where the video will then pause and the buttons will appear. I was able to get this to work with 1 button but now I want to expand it to 3 buttons. For some reason when I run it, when the video hits 5 seconds, button 2 and 3 jumps down to the next line. I don't understand why it is doing that. Also, how do I make all the buttons invisible until the video pauses at 5 seconds? I'd like for it to show then, and then after I select a button, have the buttons disappear again.
Here is my html:
<div id="wrapper">
<video id="myvid" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
<div id="group1">
<button onclick="one()">one</button>
<button onclick="two()">two</button>
<button onclick="three()">three</button>
</div>
</div>
Here is my javascript:
var video = document.getElementById("myvid");
var button = document.querySelector("button"); //tried changing to #group1 but it still does the exact same as "button"
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5 && this.currentTime <= 6) {
this.pause();
button.style = "display: block";
}
});
Here is my CSS:
#group1 {
position: absolute;
top: 40px;
}
I had "display: none;" inside #group1 and that doesn't allow the buttons to be displayed but then I can't figure out in my javascript how to display it when the video pauses.

how do I make all the buttons invisible until the video pauses at 5 seconds?
Add a default style with visibility: hidden to your button group.
#group1 {
display: block;
visibility: hidden;
}
For some reason when I run it, when the video hits 5 seconds, button 2 and 3 jumps down to the next line. I don't understand why it is doing that.
Its mostly because, you haven't applied any CSS to your buttons or your first button has a style of display:block. So give style display: inline-block to all your buttons.
#group1 button {
display: inine-block;
}
And on click of your button, again apply style visibility: hidden to your div. So it would make it go.
check my example
var video = document.getElementById("myvid");
var btnGroup = document.querySelector("#btn-group");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5 && this.currentTime <= 6) {
this.pause();
btnGroup.style.visibility = "visible";
}
});
function one() {
btnGroup.style.visibility = "hidden";
}
#btn-group {
visibility : hidden;
}
<div id="wrapper">
<video id="myvid" width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div id="btn-group">
<button onclick="one()">one</button>
<button onclick="two()">two</button>
<button onclick="three()">three</button>
</div>
</div>
You can also use display: block and display: none. If you use display, the element wont take occupy any space. If you use visibility: hidden it will continue to occupy the space in the page.

You can use 'document.querySelectorAll("button")' but not 'document.querySelector("button")'.

document.querySelector will select only first item. You can use document.getElementsByClassName.
Add class to each button
<button class="myclass" onclick="one()">one</button>
<button class="myclass" onclick="two()">two</button>
<button class="myclass" onclick="three()">three</button>
Use class selector.
var button = document.getElementsByClassName("myclass");
Change style to all buttons with loop.
for (var i = 0; i < button.length; i++) {
button[i].style = "display: block";
}

Related

How to make video play only when a button is clicked in javascript

I have a div that inside of it has a <video autoplay> <source src='myvid'> </video> and by default the div has a display ='none' on css. I am adding an event listener of click on the div and once its clicked i am changing the display none to display block.
the problem is that the video plays automatically when the site reloads and not when the button is clicked. basically i want the video to play only when the div is display ='block'. How can i do that in Javascript?
Remove the autoplay attribute
Use JavaScript to play the video using a custom button and the .play() method
<video id="video"> <source src='myvid'></video>
<button id="play">PLAY</button>
document.querySelector("#play").addEventListener("click", () => {
document.querySelector("#video").play();
});
If you don't want a custom button (not clear from your question) than you could provide the browser default by using the controls attribute
const EL_video = document.querySelector("#video");
const EL_play = document.querySelector("#play");
EL_play.addEventListener("click", () => {
const isPaused = EL_video.paused;
EL_video[isPaused ? "play" : "pause"]();
EL_video.classList.toggle("u-none", !isPaused);
});
#video {width: 300px;}
/* Utility classes: */
.u-none {display: none;}
<button id="play">Toggle & play</button><br>
<video id="video" class="u-none">
<source src='http://vjs.zencdn.net/v/oceans.mp4' type='video/mp4'>
</video>
try addind an onclick attribute to the div like this:
<div onclick="play_video();">
Or you can create a button:
<button onclick="play_video();">play the video</button>
Then, create the javascript function like this:
function play_video()
{
document.getElementById("id_of_the_video").play();
}

add class not working with html5 video player using jquery

I have a simple video block, on video ended I am displaying certain gif,
Problem:
Now when a user pauses the video the gif also shows up, meaning When the video has ended the gifs shows up now when I play again the video and pause the video the gifs show again
To do
I want when a user pauses the video the gif should not display, meaning the gif should show up only on video ended
Here is my solution
HTML
<div canplay id="video-block">
<div id="video-container">
<video id="videoplayer" playsinline muted autoplay>
<source src="videos/good_job.mp4"></source>
</video>
<div id="interactive-layers">
</div>
</div>
<div id="pause-play-button">
<img id="play" src="images/play.png">
<img id="pause" src="images/pause.png">
</div>
Js
$(document).ready(function(){
$("#videoplayer")[0].addEventListener("ended", onVideoEnded);
});
function showGif(gifname) {
$("#gif-data").remove();
var gif = $("<div id='gif-data'><audio class='audio' id='gifaudio' autoplay src='" + gifs[gifname].audio + "'></audio><img class='gif' id='animatedgif' src='" + gifs[gifname].gif + "?rand=" + Math.random() + "'></div>")
$("#interactive-layers").append(gif);
}
function onVideoEnded(e) {
showGif("ed22");
}
$("#pause-play-button").on("click", function () {
clearTheTimeout();
if ($("#video-block video")[0].paused == true) {
$("#gif-data").addClass("hidegif");
$("#video-block video")[0].play();
$("#pause").css("display", 'block');
$("#play").css("display", "none");
} else {
$("#video-block video")[0].pause();
$("#audioplayer")[0].pause();
$("#gif-data").removeClass("hidegif");
$("#pause").css("display", 'none');
$("#play").css("display", "block");
}
});
CSS
.hidegif{
display: none;
}
Unfortunately, still, my giffs shows up when I click pause video button,
What am I doing wrong?
I think the problem happens because element 'gif-data' created dynamically. Try to find an element inside the parent static element.
$('#video-block').find("#gif-data").addClass("hidegif");
That should work.
It's a few months old post but in my experience addEventListener not works all the time with Jquery but the .on event works. so when you are listening the ended event, do it with .on and write the showGif function inside it.

JavaScript - Overlay button on video

I'm able to play a video and have it pause after 5 seconds. When it pauses at 5 seconds, I would like for a button to appear in the middle of the screen. When the button is clicked, I would like for the currentTime to be set at 20 seconds, for the button to disappear, and for the video to play at 20 seconds. I'm not sure how to execute this.
This is what I have so far:
.js
var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
this.pause();
//need to call for the button to appear in the video screen. overlay?
//when the button is clicked, call the skip() function
//button needs to disappear
}
});
function skip(){
video.currentTime = 20;
video.play();
}
.html
<div id="wrapper">
<video id="myvid" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
//would i put an onclick button here?
</div>
Since it's a button for now, would I even need .css?
You can add a click handler to the button with onclick="function()"
we will set its style to display none as you want it to be hidden to begin with
we'll select in the javascript call it button and when you pause the video we'll set it to be visible.
var video = document.getElementById("myvid");
var button = document.querySelector("button");
var firstRun = true;
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5 && firstRun) {
this.pause();
firstRun = false;
button.style = "display: block";
}
});
function skip(){
video.currentTime = 20;
video.play();
button.style = "";
}
button {
display: none;
position: absolute;
top: 40px;
}
<div id="wrapper">
<video id="myvid" width="320" height="240" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<button onclick="skip()">skip</button>
</div>

Music player plays all with the same id

Im trying to make a music player where, when the user click on the button, the overlayed image, will change the image to stop.png and play the song. When the user click it again it will change the image to play.png and stop playing song.
<audio id="myAudio">
<source src="http://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/jsref/hors.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
function plaYer() {
var image = document.getElementById('myImage');
var x = document.getElementById("myAudio");
if (image.src.match("play")) {
image.src = "stop.png";
x.play();
} else {
image.src = "play.png";
x.pause();
}
}
</script>
<button id="song"
style="color: white; background-image: url('cover100.jpg'); border: none; outline: none; display:block;
width:100px;
height:100px;">
<img id="myImage" onclick="plaYer()" src="play.png" width="100" height="100">
</button>
My problem is, when I try to create 2 music player the other music player doesnt work. Can someone help me ?
IDs have to be unique. If you want to reuse your function, you cannot hardcode the IDs in it. Since you use inline event handlers, you already have access to the image element. Pass that information, plus the ID of the corresponding <audio> element to your function:
function plaYer(image, audioID) {
var x = document.getElementById(audioID);
// rest of your code ...
}
// HTML
<img id="myImage" onclick="plaYer(this, 'myAudio')" ... />
I recommend to read the excellent articles on quirksmode.org to learn more about event handling.

Playing a video in slider and then swapping out for an image at end

So I currently have a video playing inside a HeroCarousel slider. There is an image before the slider and another image after the slider.
My code:
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/island-careers/retail.html">
<img src="/media/island/splash/now-hiring-splash.jpg" />
</a>
</div>
<div data-time="9000" data-video="true" data-prev-src="/media/splash/slider-left-black.png" data-next-src="/media/splash/slider-right-black.png" id="video">
<a href="/catalog/island-collections/packing-list/">
<video width="1275" height="557" preload="auto" id="myVideo">
<source src="/media/island/splash/video-2.mp4" type="video/mp4">
</video>
<img src="/media/island/splash/escape-splash.jpg" />
</a>
</div>
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/catalog/mens-resort-wear/classic-shirts/breaker-striped-red-linen-shirt.html">
<img src="/media/island/splash/breakers-shirt-splash.jpg" />
</a>
</div>
So my issue is that the video is playing when the page loads. When the slide enters into view, the video is already at its completed frame. I want the video to play when the slide enters into view and not when the page loads. The slider adds the class current to the current slide so I started writing the following script in order to get it to play:
//playing video
jQuery(document).ready(function() {
$play = 0;
if($play > 0) {
if(jQuery("article#video").hasClass("current")) {
jQuery("#myVideo").get(0).play();
$play++;
}
}
});
This script is not working completely.
I would also like to swap out the video for the image found underneath it once the video ends (the video should only be played once)
One way to achieve this would be using flags and listening to DOMSubtreeModified and ended event.
for starting the video only when the slide is visible, you can do
var canPlay = false, played = false;
$('.hero-carousel article').bind('DOMSubtreeModified', function(e) {
if(played){ // flag to make sure it is played only once.
$('.hero-carousel article').unbind('DOMSubtreeModified');
}else if($(e.target).hasClass('current')){
canPlay = true; // flag to make sure, playing starts only when slide is current.
var video = $(e.target).find('video')[0];
if(video){
video.play();
}
}
});
$('.hero-carousel article video').bind('play', function(){
if(!canPlay){
this.pause();
this.currentTime = 0;
}else{
played = true;
}
});
and for hiding the video once it is finished, you can do:
$('.hero-carousel article video').bind('ended', function(){
this.style.display = 'none';
});
fiddle demo

Categories

Resources