so, I have a function that makes an image invisible, and at the same time starts playing a video (1 out of 6) underneath it. It works great, the div fades out, and it plays. However, it only works the first time.There are six thumbs(all an item in a list), and they each play one of the videos, right? So, each time a thumb is pressed, I need the image to comeback(quickly) and then fade out slowly like it does. So, a mini reset of sorts on each click. the code is
$(document).ready(function () {
$('li, .thumbs').on('click', function () {
var numb = $(this).index(),
videos = [
'images/talking1.m4v',
'images/talking2.m4v',
'images/talking1.m4v',
'images/talking2.m4v',
'images/talking1.m4v',
'images/talking2.m4v'
],
myVideo = document.getElementById('myVid');
myVideo.src = videos[numb];
myVideo.load();
$('#MyT').addClass('clear');
myVideo.play();
});
});
i tried shuffling things around, and no dice. And, yes, it is supposed to start fading once the video has finished loading. This is for iPad and I haven't found a better way around the flicker you get when a video loads.
Edit: okay, trying to explain this best way I can...
the page loads, and you have the image on top. There are six thumbnails, and one is clicked. The image fades out while the video loads(this doesn't have to be synced, so long as the video finishes loading first), then it plays. If a some point, another of the thumbs is pressed, the image pops back up and fades, to cover while the video loads. Basically, the condition of the first click repeats on each click.
Try the following for checking when the video has ended:
$('#my_video_id').bind("ended", function(){
alert('Video Ended');
$('#MyT').removeClass('clear');
});
Taken from http://help.videojs.com/discussions/questions/40-jquery-and-event-listeners
Seems to have worked for them, so let me know if you have similar results.
Edit
So when your thumbnail is clicked you should first check to see if a video is already playing as discussed in the link in the comments section. If a video is playing, stop that video and add the class 'clear' back the that video. Then you can go ahead and fade the 2nd video in. I obviously can't write all that for you because I don't know all the conditions, constraints and the html code you have, but the basic outline is there.
Related
I am using one iframe to display multiple videos, one at a time, by changing the value of its src attribute.
Users can close the video, which actually hides the iframe behind an overlay.
Next time,
the user chooses another video on a slideshow
the iframe's src changes to the new one
the user clicks a Play button\
the overlay becomes invisible
the iframe shows up and plays the new video.
The issue I am facing is that between step 4 and 5, users always see the image of the old video momentarily before seeing the new one, which is not good.
I guess that is because the iframe is still loading the new video, during which time it still keeps the old video.
I can think of two ways to solve it:
right after every time the src changes in step 2:
force the iframe to load the new video. The change of src is prior to playing the video, so when the video plays, the iframe should have already abandoned the old one for some time.
"clear" the iframe so it is empty now, and should display a blank screen prior to finishing loading the new video.
But I don't know how to achieve either... Is there a function in iframe like
let iframe = document.getElementById("iframe_id");
iframe.clearCache();
// or
iframe.reload();
?
(I maybe able to desctroy the iframe HTML element every time and recreate it, but it seems costly and not very elegant...)
Thanks in advance!
I looked into it, and I adapted this (example 1) example. Here are the changes I made
Please look at the link for complete code. What follows are strictly modifications for simplicity
<input type="button"
id="hider"
value="Hide"/>
<script>
function reload() {
console.log(document.getElementById('iframeid').src);
// if we are currently watching Bob1, we will load Bob2
if (document.getElementById('iframeid').src.includes("Bob1"))
document.getElementById('iframeid').src = 'Bob2.webm';
else
document.getElementById('iframeid').src = 'Bob1.webm';
}
//Wait for reload, and then show iframe. This is the money
document.getElementById('iframeid').onload = () => document.getElementById('iframeid').style.display = "block"
btn.onclick = reload;
//when we hit the hide button, hide our iframe
hider.onclick = () => {
document.getElementById('iframeid').style.display = "none";
};
</script>
To use this, you should first hit the hide button and then press the refresh.
I changed the refresh button to switch between two videos, and then after it has loaded, then and only then should it show itself. This at least for me avoids your issue.
You will need to change this example to your usecase, such as
document.getElementById('iframeid').onload = () => document.getElementById('iframeid').style.display = "block"
to the display that your iframe uses.
The site is a simple landing page with a hero video background that autoplays and when you click the search box(which is in the center of the video) it unmutes and plays the audio from the video. Our mute/unmute button works great but they want the click of the video to also mute/unmute. Whenever I add the element of the video-overlay to the function, everything on top of it works as a mute/unmute too which we don't want, it breaks our search tool.
I've tried creating an element specifically for mute/unmute but it still stays on top, I've tried adding different classes to the mute/unmute function (Hero.onMuteClick). I looked into stopPropogation but I wasn't able to figure that out.
https://jsfiddle.net/kevingsp/9xhzr1by/2/
I expect clicking the video-overlay to mute/unmute the audio from the video.
Thanks for reading!
Edit/Update
I followed the steps below and it worked, I made the original mute/unmute button unclickable in the CSS with pointer-events:none; so the background/overlay could only control it.
Thanks!
Why don't you use focus and focusout.
Take a look at the follwing snippet.
init: function() {
$(".muteunmute").click(function(e) {
Hero.onMuteClick();
});
$('#inputSearch').on('focus',()=>Hero.unmute() ).on('focusout',()=>Hero.mute() );
}
Edit
Sorry I misunderstood you.
Hope the following snippet fits your needs :)
The problem is that all the elements are children of '.video-overlay', so you have to check which one is the real target.
init: function() {
$(".muteunmute").click(function(e) {
Hero.onMuteClick();
});
$('.video-overlay').click(function(e){
if($(e.target).hasClass('video-overlay-content'))
{
Hero.onMuteClick();
}
});
}
I need to create a video player using jwplayer that can play thru specific areas of a video. Im doing this to reduce the amount of videos we need to load on page load and hopefully simplify ongoing updates if the timing needs adjustment later. I would just modify the data attributes.
I do not want request a page refresh, or a different video.
GOAL: The desired behavior would be, hit button 1, play 0-10 seconds and pause. Hit button 2, play 11-20 seconds and pause. hit the first button and repeat the behavior if desired.
the buttons would exist like this:
I made some code updates but the functionality isn't fully working. This only now works after hitting the button twice... If hit 0-15, then hit 15-25, it starts to play then just stops. I believe that the stop is being caused by the stop im calling within the condition?
<section>
<div class="seeker" data-start="0" data-end="15">Go there and pause</div>
</section>
<section>
<div class="seeker" data-start="16" data-end="20">Go there and pause</div>
</section>
jwplayer("player").setup({
file: "http://sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4",
});
$(function(){
$("section").each(function(){
$(this).find(".seeker").bind('click',function(){
var start = $(this).data('start'),
end = $(this).data('end');
jwplayer().play();
jwplayer().seek(start).onTime(function(event) {
if(event.position>end) {
jwplayer().stop();
}
});
});
});
This code works on load so the functionality is def working but I just need to attach to the click and use the 'start','end' vars.
jwplayer().onReady(function(){
jwplayer().seek(0).onTime(function(event) {
if(event.position>15) {
jwplayer().stop();
}
});
});
Work in progress is here:
http://jsfiddle.net/arkjoseph/n2rpq1t4/21/
I am presently tinkering with video.js, an open source HTML5 video player. There is this big-play-button (button name) which is shown before the video is started. Upon clicking the button "play", it disappears until the page is refreshed and the video has reloaded.
I would like to modify the code so that the button re-appears when the video is paused.
FWIW, in January 2017, someone made a change that displays the big-play-button on pause just by adding this class: vjs-show-big-play-button-on-pause
You can hide / show the big play button at any time using the VJS API, so no need to go about creating a new button. bigPlayButton.show() and bigPlayButton.hide() are what you're looking for. Here's an example that should get you on the right path:
var video = videojs('my-awesome-video');
video.on('pause', function() {
this.bigPlayButton.show();
// Now the issue is that we need to hide it again if we start playing
// So every time we do this, we can create a one-time listener for play events.
video.one('play', function() {
this.bigPlayButton.hide();
});
});
Here's a working example.
UPDATE FOR 5.0
We (ok, it was me) broke it in 5.0 with a css change. We need to revisit getting this approach to work (or whether it should), but in the meantime, adding these styles should do it.
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
please I need some help with the flow of my jquery code. I have gotten the slideshow to work and decided to go a step further and add nav buttons/images.
in the code below, I am testing it out with one div first, the div will later become a picture or a button. anyways i have it so that when i click the div, the slideshow goes to the first image in the slide show.
Now the KEY ISSUE I am having is that with the code below it works but it takes 5 seconds after the click to show the first image, i'm guessing because of the timeout function.
Please note the this is just a snippet of the code contained in the function slideShow.
$("#slidecontrol2").click(function(){
next.removeClass('is-showing');
$('#container').children(':first').children(':first').addClass('is-showing');
});
setTimeout(slideShow, 5000);
I tried calling the function again after the click() function and before the timeout function.
$("#slidecontrol2").click(function(){
next.removeClass('is-showing');
$('#container').children(':first').children(':first').addClass('is-showing');
**slideShow ();**
});
setTimeout(slideShow, 5000);
it works but now my images are going crazy fast, and dare i click again, it speeds up and gets crazier.
Please help
ANYONE!!
I noticed that slideShow takes no parameters, so it must handle finding the "visible" slide and the next slide on its own. It also seems to me that you would like the slideshow to happen automatically (which I gathered from you setTimeout(slideShow, 5000); line) AND you would like to progress to the next slide on click of the slidecontrol2 element. Since slideShow takes care of this progressive action, here's what your code should look like (pseudo-code below):
var slideShow = function(){
//Fades out current image,
//finds next image with class "is-showing" and fades it in
}
$(document).ready(function(){
//Adds click handler to advance slideshow on click of button
$("#slidecontrol2").click(function(){
slideShow();
});
//Begins slideshow on load of page
setTimeout(slideShow, 5000);
});