-
-
Save anova/19a0403c6d163b003a45c2ced3422878 to your computer and use it in GitHub Desktop.
| /** @return IntersectionObserver */ | |
| function createObserver(p_threshold) { | |
| return new IntersectionObserver( | |
| (entries) => { | |
| entries.forEach((/** @type IntersectionObserverEntry */ entry) => { | |
| if (entry.isIntersecting) { | |
| const eventIntersecting = new CustomEvent("intersecting"); | |
| entry.target.dispatchEvent(eventIntersecting); | |
| return; | |
| } | |
| const eventNotIntersecting = new CustomEvent("not-intersecting"); | |
| entry.target.dispatchEvent(eventNotIntersecting); | |
| }); | |
| }, | |
| { | |
| threshold: p_threshold, | |
| } | |
| ); | |
| } | |
| export { | |
| createObserver | |
| }; |
but This console warning is gone. I am not sure . But It autoplaying without audio in Chrome . I think in my Chrome Browser my url have good engagement to auto play .
chrome://media-engagement/
if my url is high It can auto play But I think It is only in Desktop
https://developer.chrome.com/blog/autoplay/#media-engagement-index
@thanhtutzaw I am sorry. I don't know about media engagement, but I will read about it.
I wrote this code from Ben Frain's blog post. I noticed this observer being re-used not only videos, also connect the sliders autoplay/pause is useful. I de-coupled the createObserver, and use with custom events.
Our agency's portfolio detail pages are using this createObserver code.
(Note for future: This links may be expire someday, if I notice, I will remove the links which became obsolete)
https://www.kreatif.net/markalarimiz/portakal-bahcem/
This is the createObserver: https://www.kreatif.net/wp-content/themes/kreatif_wp_theme/js/create-observer.js
And this is where its used: https://www.kreatif.net/wp-content/themes/kreatif_wp_theme/js/kr-videos.js
Note to myself: if "muted" attribute is absent, autoplay blocked.
Hello @thanhtutzaw , JS console says: "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22" You call
play()andpause()methods on same element,pause()interrupts the play. It seems thepause()callen on every video. There must be a condition. If element intersects,play()must be called. If element stopped being intersected,pause()must be called.