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.
Related
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();
}
I am trying to display video preview when some one touch on that screen on touchstart event by dynamically add video tag and video source (which is .webm) video and will start to play automatically. I can fetch the video tag but video is not getting played.
Here is my code:
<div class="thumb-overlay playthumb">
<img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive ">
<div class="duration">15:11</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$(".playthumb").on('touchstart', function(event) {
var thumb = $(this).children('img')[0];
var id = thumb.id;
$('#thumbPlayerM').remove();
var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>');
var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>';
$(video).append(content);
$(video).hide();
var target = $("#" + id);
$(target).after($(video));
$(video)[0].play();
$(video).fadeIn();
});
});
</script>
I even try this also
var vid = $("#thumbPlayerM");
vid.play();
$(video).fadeIn();
Video is coming over the image but not playing. Any one can help me? Thank you.
I fixed this issue, need to add this:
<video autoplay loop muted playsinline></video>
My videos are already muted but I have no idea why it was not working. I must check my encoder.
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.
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'm having some problems in my code. To begin, I would like for a song to play after a song I am playing ends (with the audio tag).
<audio id="batmansong1">
<source src="Songs/nanananabatman.m4a">
</audio>
<button id="play" onclick="document.getElementById('batmansong1').play()"><img src="Buttons/play.jpg" height="40" width="40"></button>
<button id="pause" onclick="document.getElementById('batmansong1').pause()"><img src="Buttons/pause.jpg" height="40" width="40"></button>
As you can see, the buttons will play or pause the first audio clip. However, I want them to also pause and play the second audio clip when it starts playing.
Your buttons will still be working when doing this. You can add an eventlistener that checks if te <audio> element ended playing. Then you just set the next source and start playing again. (BTW you'd better not use inline javacript and old html styling (I mean width="40" and such, just use CSS))
all the code below is in this jsfiddle
JS:
player = document.getElementById('batmansong1');
player.addEventListener('ended', function () {
if (player.src == 'link/to/your/next/file.m4a') return; //check if we have already set the new src, as this function is called EVERY TIME your audio file ends.
player.src = 'link/to/your/next/file.m4a';
player.play();
});
document.getElementById('pause').addEventListener('click', function () {
document.getElementById('batmansong1').pause();
});
document.getElementById('play').addEventListener('click', function () {
document.getElementById('batmansong1').play();
});
HTML:
<audio id="batmansong1" src="Songs/nanananabatman.m4a"></audio>
<button id="play">
<img src="Buttons/play.jpg" />
</button>
<button id="pause">
<img src="Buttons/pause.jpg" />
</button>
CSS:
img {
width:40px;
height:40px;
}
If you want to know anything else, feel free to ask!
//It should work for html 5 surpport browsers
function htmlfiveMedia(){
document.getElementById('player').play();
}
//in your html
<audio id="player" src="../jizadmin/sounds/new_message.wav"></audio>
OR
IF THE BROWSER DOES NOT SUPPORT AUDIO TAG TRY THIS BELOW
//This function is going to play sound
function explorerMedia()
{
$('embed').remove();
$("<embed src='../jizadmin/sounds/new_message.wav' autostart='true' hidden='true' height='1' width='1'>").insertAfter('hr');
}
//add an <hr> below your page
Hope this would help