无法在 react native 的 webview 中加载视频

Question

我无法加载从 WebView 内部的 json 数据获取的视频，以响应本机。当我提供静态网址时，我会加载视频，但没有内容。当我用 youtube 视频检查它时，它就来了。请帮助我，我已经坚持了好几天了。请。以下是我的代码：

反应代码

 fetch(GLOBAL.VIDEO_URL + this.props.navigation.state.params.id, {
                method: 'GET',
                headers: {
                    'Authorization': token
                }
            })
                .then((response) => response.json())
                .then((responseData) =>
                    this.setState({
                        section: responseData.data.video_url[0]

                    })

                );

<WebView
                            source={{ baseUrl: '', html: this.state.section }}
                            javaScriptEnabled={true}
                        />

当我尝试上述方法时，我收到了这个错误：https://i.stack.imgur.com/leyTH.png。但是当我尝试使用 youtube 网址时，它工作正常。以下是我从服务器获取的 api。

json

{
    "data": {
        "id": 8631,
        "post_title": "Video Unit 1",
        "post_content": "</p>\n",
        "vedio_url": [
            "https://indianeconomy-lms.s3.ap-south-1.amazonaws.com/what.mp4?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISUKXIZNZMXWED5Q%2F20190131%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20190131T100607Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Signature=cbbc13281f92b771e6b10ae83fd9d18768caa63e9fe808c392bad71e8f610607"
        ]
    }
}

请帮忙。

Answer 1

1- 使用 webview 上面的条件，如

this.state.section !== null && <WebView />

2- youtube 视频似乎工作正常，因为可以访问 youtube URL。 当您使用 JSON 对象获取视频的 URL 时，该 URL 需要凭据才能访问内容。

https://indianeconomy-lms.s3.ap-south-1.amazonaws.com/what.mp4?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISUKXIZNZMXWED5Q%2F20190131%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20190131T100607Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Signature=cbbc13281f92b771e6b10ae83fd9d18768caa63e9fe808c392bad71e8f610607

上面的 URL 给出了访问被拒绝的错误，这就是问题