So im doing a site that before people enter another children site there will be a youtube video first.
When they click the play button, there will be a 15 second countdown then after the count down, the link or button will be appear [Visit here]
Here's a sample code I made: https://jsfiddle.net/aLq4mt69/13/
Problem here is that I don't know how stop the countdown first before clicking the play button
Another thing is that since autoplay isn't available on Mobile, I will not be doing that, I want just people click the play button then visit the page. Also I picked youtube because I need analytics on who will be viewing the video
<div class="video-wrapper">
<video class="video" id="bVideo" >
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
</div>
<div class="content">
<div>
Skip
</div>
</div>
<script>
var adVideo = document.getElementById("bVideo");
var SkipButton = document.getElementById("Skip");
var counter = 15;
var newElement = document.createElement("p");
newElement.innerHTML = "You can skip in 15 seconds.";
var id;
SkipButton.parentNode.replaceChild(newElement, SkipButton);
id = setInterval(function() {
counter--;
if(counter < 1) {
newElement.parentNode.replaceChild(SkipButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can skip in " + counter.toString() + " seconds.";
}
}, 1000);
Related
I'm trying to make it so that when you click on a separate element it pauses the current song playing from a different element. In addition I had previously made it so when you click on the same element after it started playing audio it would pause that audio, but when you click on a different element with the same function it breaks.
var paused = true;
var song;
var songPlaying;
function playSong(x) {
song = x;
if(songPlaying != song){
document.getElementById(songPlaying).pause();
}
if(paused == true){
document.getElementById(song).play();
paused = false;
songPlaying = song;
} else {
document.getElementById(song).pause();
paused = true;
}
}
Is there anyway I can fix this? Will I have to make a different function for every song?
EDIT 1: Here the HTML my for the sections I'm using as well, each audio file has an ID that is called as a parameter in the function inside onclick
<div class="album">
<img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<div class="album">
<img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
<h1>Follow the Blind</h1>
<p>Released in 1989</p>
</div>
<!--- Audio -->
<audio id="bofSong">
<source src="assets/BattalionsOfFear.mp3">
</audio>
<audio id="bfsSong">
<source src="assets/BanishFromSanctuary.mp3">
</audio>
EDIT 2:
In attempting Laif's solution
I have tried adding the 'song' class to my HTML img elements and linked it to my audio element with the 'song1' class yet it still is not working. Am I doing the classes wrong or is it something with the way I have put them down?
<div class="album">
<img src="assets/BattalionsOfFear.png" class="song song1">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<audio id="bofSong" class="song1">
<source src="assets/BattalionsOfFear.mp3">
</audio>
Each song should share the same class so that you can do something like this:
<html>
<div class="song"></div>
<div class="song"></div>
</html>
var songs = document.querySelectorAll(".song");
function playSong(e) {
songs.forEach(el => {
el.style.play();
});
e.currentTarget.pause();
};
songs.forEach(el => {
el.addEventListener("click", playSong);
});
Functionality:
Audio is played in main game page and in other pages, hence when user wins the game, there is a Game Win notification sound before reverting back to the main audio when the game page changes to game congratulation page. While, when user loses the game, there will be a Game lost notification sound before reverting back to the main audio when the game page changes to the GameOver page.
What has been done:
I have managed to create the main audio and it is playing for all pages.
Issue:
I am unable to set the
1.) GameWin notification sound
2.) GameLost notification sound
to play when the user either win or lose the game during the page transition. The main audio is still playing.
Hence, how am I able set the notification audio to play when the user either win or lose the game during the page transition from the game page to either the game win page or the game lose page.
I have attached the code for perusal..please help.
function initiateGameTimer() {
CounterInterval = setInterval(function() {
counter = counter + 1;
timer = timer - 1;
$('#GameTime').html(timer);
console.log(timer);
// Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
if (timer == 0) {
clearInterval(CounterInterval);
if (x >= 1440) {
$("#GamePage").hide();
$("#Congratulations").show();
} else if (x < 1440) {
console.log("fail");
$("#GamePage").hide();
$("#GameOver").show();
}
}
}, 1000)
}
<div id="GamePage" style="width:1920px; height:3840px; z-index=1;">
<div id="jquery_jplayer_4" style="position:absolute; z-index:1;"></div>
<audio src="lib/Elements/happy.mp3" loop autoplay>Your browser does not support this audio format</audio>
</div>
<div id="Congratulations" style="display:none; width:1920px; height:3840px; z-index=2;">
<div id="jquery_jplayer_5" style="position:absolute; z-index:1;"></div>
<audio src="lib/Elements/audioCongratulations.mp3" loop autoplay>Your browser does not support this audio format</audio>
</div>
<div id="GameOver" style="display:none; left:0; top:0; width:1920px; height:3840px; z-index=2; ">
<div id="jquery_jplayer_6" style="position:absolute; z-index:1;"></div>
<audio src="lib/Elements/audiogameOver.mp3" loop autoplay>Your browser does not support this audio format</audio>
<input id="OK" type="image" src="lib/Elements/Ok.png" onclick="RevertPage()" />
</div>
Solved.
It can be done via this way:
function initiateGameTimer() {
CounterInterval = setInterval(function() {
counter = counter + 1;
timer = timer - 1;
$('#GameTime').html(timer);
console.log(timer);
// Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
if (timer == 0) {
clearInterval(CounterInterval);
if (x >= 1440) {
var audioWon = document.getElementById("GameWon");
audioWon.play();
$("#GamePage").hide();
$("#Congratulations").show();
} else if (x < 1440) {
console.log("fail");
var audioLose = document.getElementById("GameLose");
audioLose.play();
$("#GamePage").hide();
$("#GameOver").show();
}
}
}, 1000)
}
<div id="Congratulations" style="display:none; width:1920px; height:3840px; z-index=2;">
<audio id="GameWon" src="lib/Elements/GameCompleted.mp3">Your browser does not support this audio format</audio>
<div id="jquery_jplayer_5" style="position:absolute; z-index:1;"></div>
</div>
<div id="GameOver" style="display:none; left:0; top:0; width:1920px; height:3840px; z-index=2; ">
<audio id="GameLose" src="lib/Elements/GameFail.mp3">Your browser does not support this audio format</audio>
<div id="jquery_jplayer_6" style="position:absolute; z-index:1;"></div>
<input id="OK" type="image" src="lib/Elements/Ok.png" onclick="RevertPage()" />
</div>
I have added an extra <audio> tag within each of the for GameWon and GameOver, while I set to the assign a variable to each of the <audio> tag id and call the method play() to play the audio when the respective div id is called.
I have a Slider that I have modifed the code so it stops on mouseover. So far so good. but.. As you can see in the html I have one slider with en embedded video.
My problem is that even though the slider now stops on hover, I also want it to stop when I play an embedded video. Preferably, but not necessary, resume the slider when the video ends.
Javascript:
var VSliderHome = true;
$("#SliderHome").hover(function() {
VSliderHome = false;
}, function() {
VSliderHome = true;
});
function autoplaySlider(length) {
if (VSliderHome) {
if (visibleSlidePosition < length - 1) {
nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
visibleSlidePosition += 1;
} else {
prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
visibleSlidePosition = 0;
}
updateNavigationMarker(navigationMarker, visibleSlidePosition + 1);
updateSliderNavigation(sliderNav, visibleSlidePosition);
}
}
HTML:
<slider.body>
<section class="cd-hero">
<ul id="SliderHome" class="cd-hero-slider autoplay">
<li class="selected">
<div class="cd-full-width" style="background-image: url(img/fileupload/zlide.jpg)">
<div class="textcont-left">
<h2>text</h2>
<p>text</p>
Köp Nu
</div>
</div>
</li>
<li style="background-image: url(img/fileupload/smatrphones.jpg)">
<div class="cd-half-width cd-img-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fXu2fWz" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cd-half-width">
<div class="textcont-right">
<h2>text</h2>
<p>text</p>
Mer Information
</div>
</div>
</li>
</section>
</body>
Add an on-click function in the current function of the slider... Similar to the on-hover,however do it on-click, so that when you click in the area of the PLAY it will effect the slider... even though you're clicking play and the click has nothing to do with the slider, the fact that the video is on the slider and the slider is awaiting an on-click function result... works.
Use the video event play/pause to change your variable
$('video').on('play pause', function(e){
VSliderHome = e.type === 'pause';
})
You need to listen for events from the video and respond accordingly. You can see the details of how to do this in the YouTube Player API Reference.
As a quick example, you might want something like this:
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// stop slider
} else if (done) {
// start slider
}
}
I want to use a video as a background that automatically stretches to the whole screen,in such a way that if a page is loaded then just before the loading of the content a video plays for 5 sec then it pauses and contents are loaded and again start playing if user clicks on another link,and the user will not be redirected before the video finishes.
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});
my code is working fine its just that I don't know how to play the video just before redirecting to another page without using an intermediate page
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
Think you need something like this:
$( "a" ).click(function( event ) {
event.preventDefault();
var link = $(this).attr('href');
BV.play();
BV.addEvent("ended", endFunc);
function endFunc(link) {
window.location = link;
};
});
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" preload="auto">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});