我正在通过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 中。这将提供原生体验。
关于react-native - 阻止 YouTube 网站从 React-Native-WebView 重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64968542/