Как React Native для управления воспроизведением / паузой видео в WebView - PullRequest
Новая
       11

Как React Native для управления воспроизведением / паузой видео в WebView

1 голос
/ 19 марта 2020

Я пытаюсь воспроизвести и приостановить видео в WebView от React Native.
Но когда this.state.shouldPlay становится истинным, введенный ниже JavaScript не работает. 

injectedJavaScript=
{`document.getElementsByTagName("video")[0].play();`}

Посоветуйте, пожалуйста, как управлять видео в WebView из React Native.
response-native-video не может быть использовано из-за проблем с производительностью. 

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>
    )  
  }

}

Спасибо.

...