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/
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.
Have a slider in website header that uses JavaScript and Jquery to change its tabs every 6 seconds or when the user clicks one of its tabs. I use it in my project in Webflow (a page builder) and the problem I face is that whenever slide changes, currently focused form window loses focus.
I'm no programmer even though I'm learning js now, but if after some investigation I think that the .w--current class is used both for slider and form focus in Webflow's master js file.
Here is my live project:
https://bauserwis-com-pl.webflow.io/
I found some solutions that use IntersectionObserver API to tell if the header is in viewport and stop the setInterval timer, but I struggle with integrating it with my code. Or perhaps is there a different solution? I don't mind slides changing in the background, I only want to stop the form from losing focus.
Thanks in advance.
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// Cycle through all tabs.
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();
if($next.length) {
$next.click(); // user click resets timeout
} else {
$('.standard-tab:first').click();
}
}, 6000); // 6 second tab loop (change this)
}
// Reset loop if a tab is clicked
$('.standard-tab').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
I have a form that has multiple pages, on one of the page I’m using a web service to return a value (triggered on the next button) that is then displayed on the next page.
The value return takes over 20 second and want to use an animated gif to let the user know something is happening, I am using a jquery page animation that is normally fired using
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
I have tried $(window).unload(function() nut this seems to fire straight away andnever leaves the animation.
Ideally I would like to fire the animation on the next button:
Next
And run while the web service is getting the information but npo sure hope this is done.
I have tried
$(document).ready(function () {
$('.button').on('click', getAn);
});
function getAn () {
$(".se-pre-con").fadeOut("slow");;
});
But this doesn’t fire. I also don't have acess to modify the html.
Is it possible to use an animated gif like this or is it really only for page loading?
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;
}
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.