How React Native to control Play/Pause Video in WebView - react-native

Question

I am trying to play and pause video in WebView by React Native.
But when this.state.shouldPlay becomes true, the below injectedJavaScript does not work.
injectedJavaScript=
{`document.getElementsByTagName("video")[0].play();`}
Please advise how to control Video in WebView from React Native.
react-native-video cannot be used because of performance issue.
import * as React from 'react';
import { Component, useState, useEffect } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
import {WebView} from 'react-native-webview';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
shouldPlay: false, // not play at default
}
}
_handlePlayAndPause = () => {
if (this.state.shouldPlay == false) {
this.setState({shouldPlay: true });
} else {
this.setState({shouldPlay: false });
};
render() {
const {shouldPlay } = this.state;
return (
<View style={styles.container}>
{ shouldPlay ?
<View>
<WebView
source={{ uri: www.url.com/sample.mp4 }}
javaScriptEnabled = {true}
injectedJavaScript=
{`document.getElementsByTagName("video")[0].play();`}
/>
</View>
:
<View>
<WebView
source={{ uri: www.url.com/sample.mp4 }}
javaScriptEnabled = {true}
injectedJavaScript=
{`document.getElementsByTagName("video")[0].pause();`}
/>
</View>
}
{ shouldPlay ?
<View>
<TouchableOpacity onPress={ this._handlePlayAndPause } >
<Ionicons name="ios-pause"/>
</TouchableOpacity>
</View>
:
<View>
<TouchableOpacity onPress={ this._handlePlayAndPause } >
<Ionicons name="ios-play-circle"/>
</TouchableOpacity>
</View>
}
</View>
)
}
}
Thank you.