Block youtube website redirect from react-native-webview

2
votes

I am playing YouTube embedded LiveStream permanent URL via react-native-webview inside the react-native application. Livestream working fine. But when selecting a Video title or more videos option webview displays the Youtube website. I try to prevent this.

Permenat Livestream Url

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

Player WebView

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

Kindly suggest me to prevent to display the YouTube website inside webview or suggest me to other libraries support with embedded permanent URL playing. Thanks in advance!

2
react-nativewebviewyoutubeyoutube-iframe-apireact-native-webview

2 Answers

2
votes

You can embed youtube sdk inside your react native. That will give native experience.

Youtube sdk react-native

2
votes

I resolved by, getting video_id from embedded LiveStream permanent URL by the following code

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

And play live via react-native-youtube-iframe using video_id.