在React Native应用中嵌入Facebook视频

Question

是否可以在react-native应用程序中嵌入来自公共帖子的Facebook视频？

如果可能的话，我认为我需要使用<WebView>组件，这是我用于几种其他类型的视频嵌入的方式，但Facebook嵌入是不同的。我们已经在我们的Web客户端上实现了它，但有一些DOM特定方面，我不确定如何在react-native中重新创建它。

这是我成功使用其他视频类型（例如Vine，Vimeo）的解决方案，但对于FB，它只呈现图像。

<WebView source={{ uri: 'https://www.facebook.com/TheWitBible/videos/1747642252158297/' }} style={ styles.media } />

这里是文档 https://developers.facebook.com/docs/plugins/embedded-video-player

这里有一个FB SDK组件，但我认为它不支持这种用例https://github.com/facebook/react-native-fbsdk

在Web客户端中，有两个部分需要使其工作。

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml: true,
      version: 'v2.6'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

............................

render() {
    return (
      <div ref={el => el && FB && FB.XFBML.parse(el)} className="fb-media-wrapper" style={{ width: this.props.width + 'px' }}>
        <div className="fb-video" data-href={this.props.url} data-width={this.props.width}></div>
      </div>
    );
  }

- ken4z

Answer 1

它和我一起工作了

<WebView 
 style={styles.yourStyles} 
 source={{ uri: 'https://www.facebook.com/video/embed?video_id=<YOUR_ID_VIDEO>'}}  />

- Thai Ha

---

这个程序可以工作，但是控件只有在用户按下视频后才会显示。 - Sjonchhe

Answer 2

我的意思是这对我来说完全没问题

<WebView style={{width:350,height:null}} 
 source={{ uri: 'https://www.facebook.com/chris.phillips.56027281/videos/vb.100003747765310/914766415324942?type=2&theater'}}  />

- Alain Goldman

---

如何默认情况下防止在iOS上全屏播放？ - Nguyễn Anh Tuấn

在 WebView 中嵌入 FB 视频对我来说无法正常工作。相反，我显示了一个“抱歉，出了些问题”的错误（然而，YT 正确工作）。 - dfucci

@dfucci 请看一下 https://gist.github.com/alaingoldman/1d90890ec928c55ddcdb4f2b4a11f866 这里是如何让它工作的，还请点赞 :) - Alain Goldman

一个屏幕上可以显示多少个？你尝试过加载多个吗？ - Vincent Roye