阻止来自 react-native-webview 的 youtube 网站重定向答案

【问题标题】：Block youtube website redirect from react-native-webview阻止来自 react-native-webview 的 youtube 网站重定向
【发布时间】：2021-03-06 04:12:52
【问题描述】：

我正在 react-native 应用程序中通过 react-native-webview 播放 YouTube 嵌入式 LiveStream 永久 URL。直播工作正常。但是选择视频标题或更多视频时，WebView将显示YouTube网站。我试图防止这种情况发生。

永久直播网址

https://www.youtube.com/embed/live_stream?channel="ChannelID"

播放器网页视图

<WebView
          style={{resizeMode: 'cover', flex: 1 }}
          allowsFullscreenVideo={true}
          javaScriptEnabled={true}
          mediaPlaybackRequiresUserAction={false}
          automaticallyAdjustContentInsets={true}
          allowsInlineMediaPlayback={true}
          domStorageEnabled={true}
          decelerationRate="normal"
          startInLoadingState={true}
          scalesPageToFit={false}
          scrollEnabled={false}
          source={{ html: "<html> "
                              + "<body style='margin:0px;padding:0px;'> "
                                  + "<script type='text/javascript' src='http://www.youtube.com/iframe_api'></script> "
                                  + "<script type='text/javascript'> "
                                      + "var player; "
                                      + "function onYouTubeIframeAPIReady() "
                                          + "{"
                                              + "player=new YT.Player("
                                                  + "'playerId',"
                                                  + "{events:{onReady:onPlayerReady}},"
                                              + ")"
                                          + "} "
                                      + "function onPlayerReady(event) {player.playVideo();} "
                                  + "</script> "
                                  + "<iframe id='playerId' "
                                      + "type='text/html' "
                                      + "width='100%' "
                                      + "height='100%' "
                                      + "src='"+ this.stateLiveTv.url +"&rel=0&showinfo=0&controls=1&enablejsapi=1&modestbranding=1&autoplay=1&playsinline=1' "
                                      + "frameborder='0' "
                                      + "allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' "
                                      + "allowfullscreen> "
                              + "</body> "
                          + "</html>"
                    }} >
        </WebView>

在此之前，我使用 YouTube Data API 来获取 Livestream video_id。但是，我多次遇到配额限制错误。所以，我转向嵌入式永久 URL。我检查了其他库 react-native-youtube、react-native-youtube-iframe。两个播放器都是根据视频 ID 播放的，而不是嵌入永久 URL。

请建议我阻止在 webview 中显示 YouTube 网站，或者建议我使用其他支持嵌入式永久 URL 播放的库。提前致谢！

【问题讨论】：

标签： react-native webview youtube youtube-iframe-api react-native-webview

【解决方案1】：

您可以将 youtube sdk 嵌入到您的 react native 中。这将提供原生体验。

Youtube sdk react-native

【讨论】：

请注明SDK名称或链接
此 SDK 示例包含唯一的 videoId 参数。我正在尝试使用嵌入式 URL。有什么解决办法吗？

【解决方案2】：

我解决了，通过以下代码从嵌入式 LiveStream 永久 URL 获取 video_id

fetch(this.stateLiveTv.url)
    .then((response)=>{
                 return response.text()
    }) .then((text)=>{
                     var matches = text.match('"video_id":"(.*?)"');
                     var videoId = matches[1];
          });

并使用 video_id 通过react-native-youtube-iframe 进行直播。

【讨论】：