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>
Related
I want that whenever anyone plays the audio then only gif play..
here what I tried...
number = 0;
var animations = ['https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif'
];
function character() {
image = document.getElementById('1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG');
image.src = animations[number];
}
<div class="board">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhUIEQv7m_0HrLkcEDQURyV74eGEO8ZDW0LhhyFbK72BBXm9S0BolRB0V82i7RvX5S83j1QPOYazQlbUp8p9S5xSnlMNIpQGwJdKlmwCiPc8sHMqO8dPgYpstyejRK9rKeWNlofjOhTQGcfyk3Jt_1YqAezHYyRBDJiaGYD1R5O9mrdzaQKzDAc0Pe2oA=s16000" alt="cassete" width="300" height="200" id="1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG" onclick="character();"/>
<audio class="splplayer" controls="controls" id="audio_player" preload="metadata">
<source src="https://drive.google.com/uc?export=download&id=1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"></source></audio></div>
Don't know where the error occurs.... here gif is playing on clicking on it not on clicking the audio play button
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";
}
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
I ran into a little problem right now and i can't find a solution.
HTML:
<video id="vid" controls >
<source src=".mp4" type="video/mp4">
<source src="HEYE.mp4" type="video/mp4">
</video>
JavaScript:
function ChangeVideo(){
if(click%2 == 0){
document.getElementById('vid').src="Troll.mp4";
click++;
}else{
document.getElementById('vid').src="HEYE.mp4";
click++;
}
}
Button:
<button onclick="ChangeVideo()">Change video</button>
the problem is that i dont get it to change video when i click the button.
My to videos in my map is named "HEYE.mp4" and "Troll.mp4"
function ChangeVideo(){
var vid = document.getElementById('vid');
vid.src = click%2 ? "HEYE.mp4" : "Troll.mp4";
vid.load();
vid.play();
click++;
}
I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;