Pause, Play, and Mute (i.e. control) embedded TikTok video

[ChristopherGabba]

I followed the guidance on the post: link

Code:

import React from 'react'
import { Button } from './Button'
import { WebView } from 'react-native-webview'
import useWebshell, {
  HandleHTMLDimensionsFeature,
  ForceResponsiveViewportFeature,
  ForceElementSizeFeature,
  useAutoheight,
} from '@formidable-webview/webshell'
import { View } from 'react-native'

import React from 'react'
import { Button } from './Button'
import { WebView } from 'react-native-webview'
import useWebshell, {
  HandleHTMLDimensionsFeature,
  ForceResponsiveViewportFeature,
  ForceElementSizeFeature,
  useAutoheight,
} from '@formidable-webview/webshell'
import { View } from 'react-native'

const Webshell = useWebshell(
  WebView,
  new HandleHTMLDimensionsFeature(),
  new ForceResponsiveViewportFeature({ maxScale: 1 }),
  new ForceElementSizeFeature({
    target: 'body',
    heightValue: 'auto',
    widthValue: 'auto',
  })
)


export default function TikTokPost(props) {

  const { autoheightWebshellProps } = useAutoheight({
    resetHeightOnViewportWidthChange: true,
    webshellProps: {
      ...props,
      //   style: { borderRadius: 15, overflow: 'hidden' },
      allowsInlineMediaPlayback: true,
      scrollEnabled: false,
      allowsFullscreenVideo: false,
      domStorageEnabled: true,
      originWhitelist: ['*'],
      javaScriptEnabled: true,
      source: {
        html: "<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" data-embed-from=\"oembed\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015?refer=embed\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it😍❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage?refer=embed\">#foryoupage</a> <a title=\"petsoftiktok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/petsoftiktok?refer=embed\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic?refer=embed\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501?refer=embed\">♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>",
        baseUrl: 'https://www.tiktok.com',
      },
    },
  })

const onPauseButtonPressed = () => {
     // pause code here
}

const onPlayButtonPressed = () => {
     // play code here
}

const onMuteButtonPressed = () => {
     // mute button here
}

  return (
    <View>
      <Webshell {...autoheightWebshellProps} />
      <Button onPress={onPauseButtonPressed}/>
      <Button onPress={onMuteButtonPressed}/>
      <Button onPress={onPlayButtonPressed}/>
    </View>
  )
}

And the Webshell is working perfect for displaying the post. I know it sounds dumb, but I have an external set of buttons to control the reel. This is because I'm not using TikTok exclusively in my app so I'm trying to keep ui consistent with lots of other video sources.

I've tried using

webViewRef.current?.injectJavascript('document.querySelector('video').muted = false')
``

and a bunch of other combinations that have worked for videos from other sources, but not this embeded tiktok video.

Thanks in advanced..

[Zeeshan404]

@ChristopherGabba did you figure this out ?