阻止 youtube 网站从 react-native-webview 重定向

Question

我正在通过 react-native 应用程序中的 react-native-webview 永久播放 YouTube 嵌入式 LiveStream URL。直播工作正常。 But when selecting a Video title or more videos option webview displays the Youtube website.我尽量避免这种情况。

永久直播Url

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

播放器网络视图

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

Before that, I used YouTube Data API to get Livestream video_id. but, I faced a quota limit error many times. so, I moved to embedded permanent URL. And I checked with other libraries react-native-youtube, react-native-youtube-iframe. Both players are played based on video id not embedded permanent URL.

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

Answer 1

您可以将 youtube sdk 嵌入到您的本机反应中。这将提供原生体验。

Youtube sdk react-native

Answer 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 直播。

阻止 youtube 网站从 react-native-webview 重定向

Block youtube website redirect from react-native-webview

youtube

webview

youtube-iframe-api

react-native

react-native-webview