Autoplay a video on scroll with WordPress - javascript

In advance, my apologies for my bad english.
I'm using WordPress with Elementor.
I wan't to have an autoplay on my video only when it is in viewport.
I've tried this code :
jQuery(document).ready(function ($) {
//To check if element is visible
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
//To play-pause self-hosted videos in elementor only when it's visible
$(window).scroll(function () {
$(".elementor-video").each(function (i, obj) {
if (checkVisible(obj)) {
obj.play();
} else
obj.pause();
});
});
});
It's works BUT ONLY if the user has already click on play.
How to improve this ?
In advance, thanks.

Well i will prefer keeping it simple. Below I have mentioned the complete process and will be adding the image as well to make it simple for you. This is from a st courier tracking website which is displaying tracking results and showing it to the customers so whenever the customer comes the video is auto played . How are they doing it.
If you are using elementor then simply
Go to the page
Edit with Elementor
Open Navigator
Click on Video (The one which you want autoplay on)
5.Now at the right hand side click on "Content"
Under the video options select or toggle on Autoplay
Hopefully it helps.
Elementor navigator
Toogle on option

Browsers do not allow autoplay for video when is not muted.

Related

JS - Audio player with progress bar and tags on it

I need to make an audio player using HTML/CSS and JS. The player should be simple, with play button and progress bar. However I need to implement a way that users can add tags on the audio file (on progress bar). Something like a player from SoundCloud. Where there is a tiny line on bar at specified time, and when you hover that, a popup window comes out with some message.
Is it possible with HTML5's <audio></audio> tags to get millisecond representation using JavaScript?
Or the best idea is to create a custom audio player?
EDIT
I am following this example -> http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/
And there is a function which I am trying to edit. So when I do:
function moveplayhead(event)
{
var newMargLeft = event.clientX - getPosition(timeline);
console.log(newMargLeft);
if (newMargLeft >= 0 && newMargLeft <= timelineWidth)
{
playhead.style.marginLeft = newMargLeft + "px";
}
if (newMargLeft < 0)
{
playhead.style.marginLeft = "0px";
}
if (newMargLeft > timelineWidth)
{
playhead.style.marginLeft = timelineWidth + "px";
}
}
I get in console number of seconds. How can I place small red label (for example) to mark this area. And then add a popup..
You should be able to add a progressing line on your developed audio player with below logic steps:
Create an audio player function (javascript)
Create a timer function (javascript)
Specify an intervall where you want to "tap-out" the trigger that will indicate to move the progress line. (javascript)
Create the transition sliding. (Javascript or CSS)
Create stacking layer using z-index (so you can have your audio player on one layer, and the progressing line on a layer ontop the audio player.) - (CSS)
Since the interaction between each step will probably be needed to work relatively fast, you should stay in javascript as much as possible, without to many interaction with CSS and HTML.

I want to add a css class selector to an onclick function in a vimeo-video slider/carousel plugin that came with a Timber template I bought

Want to achieve: a thumbnail gallery of video selections to work like a playlist. Each thumbnail is a clickable link to load & play their respective video in the central screen above gallery.
gallery with player/slider above
And here's a bit of JS from the plugin, that (I think) is the function for clicking Next: (Demo Link Below)
var z = a('<a href="#" />').attr("id", "tms-prev").addClass("tms-arrow-nav").appendTo(b),
C = a('<a href="#" />').attr("id", "tms-next").addClass("tms-arrow-nav").appendTo(b);
z.each(function() {
a(this).on("click", function(a) {
a.preventDefault(), p.autoAdvance && b.data("loaded") && y.resetSlideshow(), y.prevSlide()
})
}), C.each(function() {
a(this).on("click", function(a) {
a.preventDefault(), p.autoAdvance && b.data("loaded") && y.resetSlideshow(), y.nextSlide()
})
}), p.lazyLoad && b.find(".tms-arrow-nav").css({
display: "block"
})
}
What I've done: Linked thumbnails to use - a href target="name" to target the iframe for the central player screen. Since the video player is actually a slider plugin, I've run into a slight conflict.
The problem: Once integrated(my addition), the video loads on the second (of 3) slides on pause. User wouldn't know it was there, but - when the slider is rotated by clicking the NEXT arrow btn, the video begins to play from the slider's plugin function. This would be fine if the slider rotated from the user initially clicking the Play thumbnail. In fact, a preferable effect.
Solution I'm seeking: to include the classname for the thumbnail links in the plugin's existing click function where the NEXT slide button triggers rotation - basically adding my classname to $(this) of its onclick function, so clicking on any thumbnail link in the gallery will not only load the video (as it does now) but also trigger the slide to rotate, provided that the slider plugin plays video when rotated (as it does now).
Options: If problematic, I can go with disabling slider rotation altogether... if that would remove conflict to begin video play.
Codepen: Doesn't seem to work
SO, I hosted a demo online: demo of slider
1) the video playing at header on open is not the slider, slider is below this and directly above the gallery and says Slider Caption over a mountain icon.
2) Only the top left thumbnail (2 Narbonne) is linked. When clicked, the video will load on the 2nd slide buit it wont seem like anything happened. rotate with the Next arrow and you'll see it. Feel free to use the demo in any way necessary - its only for this purpose.

Prevent Slider Revolution from pausing HTML5 video

I'm using the Themepunch Revolution slider in a project, which shows a single video slide in HTML 5.
When I click on it, it pauses, which I don't want.
The <video> element in the page is generated by the slider plugin.
Here's what I tried so far:
$('body').on('click', 'video', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
This is the code in the slider library:
html5vid.find('video, .tp-poster, .tp-video-play-button').click(function() {
if (html5vid.hasClass("videoisplaying"))
video.pause();
else
video.play();
})
I also tried catching the pause event, but it never fires:
$('body').on('pause', 'video', ...);
For Revolution Slider 6.x, it's easier, just select the video layer option > Content > (Scroll down) Advanced Media Settings > Set "No Interaction" off
This will disable the click to pause/play also remove controls, you end up with a playing video with no interactions, also don't forget to set Loop Media on for complete experience
Revolution Slider No Interaction Setting to prevent controls and stop click for play/pause:
Hey it is 2019 but anyone who look for solution is that :
Put transparent shape layer onto video layer as full width and height.
Make sure put this layer one step above the video layer as showing below(this shape looks like it below the video layer but in rev slider animation settings the more bottom the more up on the front-end i hope i make it clear :)
Layer positions on rev slider animation settings
Try
html5vid.find('video, .tp-poster, .tp-video-play-button').unbind('click');
Replace html5vid with whatever element the script is looking to find in.
EDITED
...or better yet, try to unbind click on the video element as follows:
$('video').unbind( "click" );

Change the time of a video when moving the mouse?

I stumbled across this WoW website and, inspecting some elements, discovered that the "spinning characters" are WebM / MP4 videos. Go to the Characters section, pick a character, and press this button. This will load up a video of them spinning.
These videos can rewind and fast-forward depending on the direction you drag your cursor (Left = reverse, Right = fast-forward).
My question is simple, what function does that? Is it JavaScript?
Thanks in advance.
It's JavaScript, and this is the code they are using:
//this is for video on stage
CharacterSelect.ui.modelVideo = ModelVideo.build($(".model-video"));
//and this is when the page is ready
$(document).ready(function() {
if (ModelVideo.supportsVideo && !$('html').hasClass('ie')) {
var modelVideo = videoController.create(".model-video");
}
});

Delayed autoscroll effect on a block of text

Im fairly new to JS... please be gentle.
Can anyone suggest a way to pull off a delayed autoscroll effect on a block of text?
It's important to mention that my ultimate goal is to use this on a popup modal window, on iOS devices. And because iOS browsers do not display the scrollbar until user interaction, I am resorting to the auto-scroll.
In effect: I would like the page to load, wait a couple of seconds, then have begin to slowly scroll down. The scroll is intended to be a hint to the user that there is more content available, therefore if there is any way to stop or temporarily pause the auto-scroll on user interaction- that would be optimal.
I have searched for my answers a couple of hours now, but between not being able to initialize the found code to my design (again, I'm fairly green), and not being able to find a solution that achieves everything I need - I am turning to brighter minds.
I have set up a fiddle with my HTML and CSS: http://jsfiddle.net/zfMsQ/
Any help is greatly appreciated!
ps: This is my very first post on StackOverflow :)
My code:
Extensive. Linked above.
Here you go: http://jsfiddle.net/zfMsQ/3/
var roll = true;
var max = 0;
var text = $("#content");
function scroll() {
text.scrollTop(text.scrollTop() + 1)
var top = text.scrollTop()
if (top > max) {
max = top
if (roll) {
setTimeout(scroll, 50)
}
}
}
text.on("mouseenter mouseover mousedown", function(){
roll = false;
})
setTimeout(scroll, 2000)

Categories