react-native - 阻止 YouTube 网站从 React-Native-WebView 重定向

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

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

永久直播网址

https://www.youtube.com/embed/live_stream?channel="Channel身份证”

播放器网页 View

<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 播放。提前致谢!

最佳答案

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

Youtube sdk react-native

关于react-native - 阻止 YouTube 网站从 React-Native-WebView 重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64968542/

相关文章:

ios - 每当我启动我的 React native 应用程序时,都会出现 RAM、JSC、 View 、UI 和 JS 使用表。如何删除此表?

ios - Webview didFailLoadWithError 错误代码 -999

javascript - Android webview视频没有达到readyState=4

reactjs - React Native 中的 ES6 功能

react-native - 使用 lottie.js 给出错误 TypeError : Attempted to assign to readonly property

objective-c - 将 webview 的内容设置为 html 字符串( cocoa )

java - YouTube API 无法按预期播放视频

javascript - 使用 iframe 在 Metro App 中嵌入 YouTube 视频时发生内存泄漏

flash - 为什么Flash Video Player无法在Firefox中显示?

ios - 基线文本样式是否与React Native [iOS]的文本输入所使用的文本样式不同?