bug: Video Elements will not autoplay on IOS

[seanaye]

Bug Report

Capacitor Version

Latest Dependencies:

@capacitor/cli: 2.4.1 @capacitor/core: 2.4.1 @capacitor/android: 2.4.1 @capacitor/electron: 2.4.1 @capacitor/ios: 2.4.1

Installed Dependencies:

@capacitor/cli 2.4.1 @capacitor/core 2.4.1 @capacitor/android 2.4.1 @capacitor/ios 2.4.1 @capacitor/electron not installed

Related to #1094

I'm using plyr as a wrapper around the native html5 video element. And using an intersection observer to automatically play videos when they are scrolled into view via videoElem.play() (play() function below is a wrapper for this)

    const intersectionOptions = {
      handler: (entry: IntersectionObserverEntry) => {
        if (entry.intersectionRatio > 0.9) {
          context.emit('loadNext')
        }
        if (entry.isIntersecting) {
          context.emit('scroll', props.index)
          play()
        } else {
          pause()
        }
      },
      cfg: {
        threshold: [0.5, 1.0]
      }
    }

in vue template (using quasar.js v-intersection)

      plyr(
        v-if='post.media'
        :src='post.media'
        :thumbnail='thumbnail || post.thumbnail'
        :postID='post.id'
        @ready='handleReady'
        @playing='trackPlay'
        v-intersection='intersectionOptions'
        ref='plyr'
      )

Platform(s)

IOS 13.7 (17H35) IPhone Xr

Current Behavior

Video cannot be played via javascript in certain scenarios on certain devices. Exact reproduction methods are unknown, but when low power mode is enabled no videos will autoplay. On Iphone Xr 13.7 without low power mode some videos will autoplay but some will not. This does not occur on any other platform. When play() cause it interupted it yields the following error via safari remote debug. Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Expected Behavior

Video should autoplay regardless of low power mode status or ios version

Code Reproduction

I am unsure of how to reproduce the bug 100% of the time other than putting an IOS device in low power mode and calling play() on an element. When not in low power mode videos will autoplay maybe 40% of the time. Very unpredictable when the issue occurs and on some devices it can autoplay almost 100% of the time. Again this in only an issue on IOS

Other Technical Details

yarn --version output: 1.22.4

node --version output: v14.2.0

pod --version output (iOS issues only): 1.9.1

[jcesarmobile]

Capacitor enables autoplay, but if it doesn't work in certain conditions, there is nothing we can do about it, it's probably a WKWebView bug, please, report it on https://bugs.webkit.org/

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.