Question

我无法加载在React Native中从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 url时，效果很好。以下是我从服务器获取的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 URL，因此youtube视频工作正常。当您使用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给出了访问被拒绝的错误

无法在React Native的WebView中加载视频

1 个答案: