react-native - React Native 如何控制 WebView 中的播放/暂停视频
问题描述
我正在尝试通过 React Native 在 WebView 中播放和暂停视频。
但是当 this.state.shouldPlay 变为 true 时,下面注入的 JavaScript 就不起作用了。
injectedJavaScript= {`document.getElementsByTagName("video")[0].play();`}
请告知如何从 React Native 控制 WebView 中的视频。
由于性能问题,无法使用 react-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>
)
}
}
谢谢你。
解决方案
推荐阅读
- c# - Blazored Toast 在视图模型中不起作用
- c# - WCF 错误操作对于事务状态无效
- python - 嵌套时 PysimpleGui 按钮不起作用
- python - Python if 语句无法识别从文本文件加载的变量
- python - 在 python 或 django 中将此格式转换为 2021 年 9 月 7 日星期二 08:34:00 GMT+0530(印度标准时间)为 YYYY-MM-DD HH:MM:SS
- visual-studio-code - 如何在 VSCODE 中将 Enter 键更改为另一个键,因为我的笔记本电脑的 Enter 键已损坏?
- java - Environment.getExternalStorageDirectory() 字段为什么返回 null?
- jquery - 从通过Foreing Key连接到主表的一个表中获取寄存器数,在Django中有一个条件
- node.js - 如何使用 docker compose 访问主机网络中的容器?
- python - 是否可以在 Python 脚本中使用 lynx 解码 HTML?