CODEWITHSUNDEEP
javascripthtmlcssreactjs
willmhunt1
willmhunt1

Reputation: 47

How does Tiktok.com and Youtube shorts automatically play video on scroll (on mobile)? React Javascript

Using React JS, I'm trying to make a website similar to Tiktok, where on scroll, the video below it will play (with AUDIO, I know it's much easier without).

I tried to set this up with a window.addEventListener("scroll",...) set up. But on further research it seems like this doesn't work because the scroll isn't a "valid user input" to allow playing a video on mobile.

After more research it seems like playing then pausing all the videos from an initial user input click would work. Though I'm still working on how to play/pause all the videos from that single input.

Anyway, my question is how do websites like tiktok.com and youtube shorts autoplay videos with sound upon scrolling? How do they accomplish it?

Upvotes: 3

Views: 4046

Answers (2)

albseb
albseb

Reputation: 169

I am sure there are many ways to do it.

One way I would do is to use Intersection Observer API

You can trigger some callback everytime you enter the view of the of

as per docs some usecases

  • Lazy-loading of images or other content as a page is scrolled.
  • Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
  • Reporting of visibility of advertisements in order to calculate ad revenues.
  • Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occurs:

  • A target element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API.
  • The first time the observer is initially asked to watch a target element.
let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

// or

var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

I had made a small npm package for doing lazy loading.

https://www.npmjs.com/package/dyno-img-react

It basically shows a low res image till a user reaches the element ( I can configure the intersection area ). Once it reaches, I would fetch the high-quality image, and remove the observer

If its for RN, I have not really worked recently on RN, but you can check out this library

react-native-intersection-observer

It has an implementation which you can see in the code here.

https://github.com/zhbhun/react-native-intersection-observer/blob/master/src/IntersectionObserver.ts

It uses onLayout event to manage it internally

import { IOScrollView, InView } from 'react-native-intersection-observer'

const Component = () => (
  <IOScrollView>
    <InView onChange={(inView: boolean) => console.log('Inview:', inView)}>
      <Text>Plain children are always rendered. Use onChange to monitor state.</Text>
    </InView>
  </IOScrollView>  
)

export default Component

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

Check this guide for autoplay availibility:

  • The audio is muted or its volume is set to 0
  • The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
  • If the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
  • If the autoplay feature policy is used to grant autoplay support to an and its document.

Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become whitelisted vary from browser to browser, but the above are good guidelines to go by.

To allow autoplay feature, you have to force your users by configuring options to allow. Here's a feature policy that you can try with in header:

Feature-Policy: autoplay

Allowing autoplay in iframe:

<iframe src="mediaplayer.html"
  allow="autoplay 'src'">
</iframe>

But browsers block autoplay with audio as their policy - user can feel irritation with the sound that is automatically appear. So, all thing you have to set a configuration for them to allow to play with sound.

For full information about autoplay, follow the guide. You can also check this tool to see what devices are allowed for autoplay along with autoplay policy.

Upvotes: 0

Related Questions