Last active
February 4, 2022 21:10
-
-
Save blairanderson/bd9b8f25b3964aa4c071670e9bbaf2fe to your computer and use it in GitHub Desktop.
Fullscreen Background Video Slideshow on iOS devices - note currently uses jquery :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% for video in site.static_files %} | |
{% if video.path contains 'img/videos' %} | |
<video muted playsinline> | |
<source src="{{ site.baseurl }}{{ video.path }}" type="video/mp4"> | |
</video> | |
{% endif %} | |
{% endfor %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.__next_video = 0; | |
function playNextVideo() { | |
if (window.__next_video === $('video').length) { | |
window.__next_video = 0; | |
} | |
playVideoAtIndex(window.__next_video); | |
window.__next_video++; | |
} | |
function playVideoAtIndex(index) { | |
$('video').each(function(i, video) { | |
var $vid = $(video); | |
var vid = $vid[0]; | |
$vid.off('ended'); | |
$vid.fadeOut('fast'); | |
if (index === i) { | |
vid.load(); | |
vid.play(); | |
$vid.fadeIn('fast'); | |
$vid.on('ended', playNextVideo); | |
} | |
}); | |
} | |
playNextVideo(); |
@KevinFremon i also hope you see this. You should post some code here otherwise I cannot tell what you have added/changed.
@blairanderson - That would be helpful, wouldn't it. :)
Here is my very minimal re-write:
(function(){
window.__next_video = 0;
function playNextVideo() {
if (window.__next_video === $('#hs_cos_wrapper_{{ name }} video').length) {
window.__next_video = 0;
}
playVideoAtIndex(window.__next_video);
window.__next_video++;
}
function playVideoAtIndex(index) {
$('#hs_cos_wrapper_{{ name }} video').each(function(i, video) {
var $vid = $(video);
var vid = $vid[0];
$vid.off('ended');
$vid.fadeOut('0');
if (index === i) {
vid.load();
vid.play();
$vid.fadeIn('0');
$vid.on('ended', playNextVideo);
}
});
}
playNextVideo();
}())
The only main difference is the #hs_cos_wrapper_{{ name }} proceeding VIDEO. This is basically generates a unique ID and helped me at least get as far as to have the videos play on multiple rows.
Thanks man! You're a lifesaver.
only bug i see is that you're using the same index variable name for both
loops ` window.__next_video = 0;` should probably be something like `
window["__next_{{name}}_video"] = 0;`
…On Fri, Sep 27, 2019 at 1:55 PM Kevin Fremon ***@***.***> wrote:
@blairanderson <https://github.com/blairanderson> - That would be
helpful, wouldn't it. :)
Here is my very minimal re-write:
(function(){
window.__next_video = 0;
function playNextVideo() {
if (window.__next_video === $('#hs_cos_wrapper_{{ name }} video').length) {
window.__next_video = 0;
}
playVideoAtIndex(window.__next_video);
window.__next_video++;
}
function playVideoAtIndex(index) {
$('#hs_cos_wrapper_{{ name }} video').each(function(i, video) {
var $vid = $(video);
var vid = $vid[0];
$vid.off('ended');
$vid.fadeOut('0');
if (index === i) {
vid.load();
vid.play();
$vid.fadeIn('0');
$vid.on('ended', playNextVideo);
}
});
}
playNextVideo();
}())
The only main difference is the #hs_cos_wrapper_{{ name }} proceeding
VIDEO. This is basically generates a unique ID and helped me at least get
as far as to have the videos play on multiple rows.
Thanks man! You're a lifesaver.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/bd9b8f25b3964aa4c071670e9bbaf2fe?email_source=notifications&email_token=AAHJKWBE5D2V52M5QDIBBS3QLZXLXA5CNFSM4I3JSSH2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFZQTE#gistcomment-3039538>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAHJKWBHRYSISKGIZUDZ3HTQLZXLXANCNFSM4I3JSSHQ>
.
--
Blair Anderson
425-829-1130
@blairanderson <https://twitter.com/blairanderson>
@blairanderson Thank you so much for pointing that out! I'll adjust that and give it a try.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Blair! What's happening man? Thanks so much for making this magic-sauce of a script you wrote available. It works awesome when I'm using one instance of the script on a page. However, I'm running into an issue when using multiple instances? For example. My hero banner has video as well as a separate row farther down the page.
I've added specific IDs (#hero video) or (#row-2 video) as an example. That got me part of the way there.
If only one clip is added to each instance on the page, everything works great. But once I add a second clip to any of the instances on the page, as soon as the second clip plays through, they all go blank.
Any insight on how I might solve for that would be massively appreciated.
Thanks in advance. Hope you see this. :)