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" );
Related
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.
I have animation with ScrollMagic library and I am also using GSAP. This is description of animation on scroll in steps. Every number is one scroll:
Add class overflow-hidden to body, to disable scrolling.
Move credit-cards
Move remove some images
Start doing transform: translate(x,y) rotateZ(zdeg)
Stop scrolling and make image that was translated sticky
So this works good with mouse on mousewheel event. The question is:
What is the best way to implement touch scroll with very same effect when user comes from iOS or Andorid. (When user comes to my website from android, iPhone, iPad etc.)
I know that there is touchmove event.
var image = document.getElementById('image-phone');
if(step == 1){
//do first step
}...
//mousewheel event
window.addEventListener('mousewheel', function (e) {
//this is implemented
});
//touchnmove event
window.addEventListener('touchmove', function (e) {
//should I use this event
});
I am working on what will hopefully be my first create.js project in Animate CC at my current employer.
I am trying to load in a .mp4 into a Bitmap object, using
HTML5ElementForVideo = document.createElement('video');
HTML5ElementForVideo.src = 'bridge-animation-resized-794x652.mp4';
HTML5ElementForVideo.autoplay = false;
video = new createjs.Bitmap(HTML5ElementForVideo);
video.x = 110.00;
video.y = 42.5;
stage.addChild(video);
..which works okay, and as expected. In the video, there are a series of steps which we would like the user to be able to go between, using "Previous" and "Next" step buttons.
I assumed that navigation wise, I would be able to use something along the lines of:
[video].gotoAndPlay(x)
To move to the right frame in the video. However, this does not seem to work or be supported? I only seem to be able to play the video or stop it with .play and .pause?
Any suggestions, please?
Dave
The video is not an Animate or CreateJS object - only the Bitmap drawing it to the stage is. Check out the HTML Video API for how to control it. To set the position, use the currentTime property to control the video position.
Hope that helps!
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.
I have implemented a parallax effect with a video. I wanted to do it for my own so I did it without any framework or plugin but it is slow and it stumbles around.
My idea was that there are 2 pictures, 1 video and 2 boxes in front of them. So my code was that if i am on the position of the 1 picture, the pictures scroll slower (with margin-top) like this:
$( window ).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll>470){
scroll = scroll-470;
var scrollSlow = scroll*0.4;
$('#Picture1').css('margin-top', scrollSlow);
$('#InfoBox1').css('margin-top', -scroll);
if(scroll<400){
$('#Picture2').css('margin-top', -scroll);
}
$('#InfoBox2').css('margin-top', -scroll+heightPX);
if(scroll<900){
$('#Picture3').css('margin-top', -scroll+heightPX);
}
}
}
But if I scroll down it doesn't work.
Here is the online version: http://p-goetz.de/Parallax.html
Problem: You are probably testing your website in chrome/safari, try using Firefox you will notice that the things are smoother.
Reason: In some browsers when you scroll they jump 100px at once hence your parallax animation start looking odd.
Solution: Try to use a custom scroll with smooth fx.I will recommend Nicescroll.
The issue is the images/videos are so large, the browser lags when scrolling before they are completely loaded. One solution would be to wait for the images/videos to finish loading before presenting the page.
$('body').hide();
var video = document.getElementById('PARALLAX_bild2');
video.addEventListener('loadeddata', function() { // video is loaded
$('img').load(function() { // images are loaded
// Do some fancy fade in of the page here. This is just an example.
$('body').show();
});
}, false);