Question

我需要在我的react本机应用中播放vimeo视频。我正在使用Webview播放视频，正在播放视频，但是我在屏幕上看不到任何东西，有音频输入，但屏幕空白。下面是我的代码。我做错了什么吗，还是有其他玩vimeo的方法吗？任何帮助，将不胜感激。

<AutoHeightWebView
                                    startInLoadingState
                                    style={{ width: "100%", height: '100%', borderColor: 'white', borderWidth: 2 }}
                                    source={{
                                        uri: 'https://player.vimeo.com/video/299264098?autoplay=1' //'this.state.videoUrl'
                                    }}
                                    onError={() => console.log('on error')}
                                    onLoad={() => console.log('on load')}
                                    onLoadStart={() => console.log('on load start')}
                                    onLoadEnd={() => console.log('on load end')}

                                    bounces={false}
                                />

Answer 1

我找到了一种在React Native中运行vimeo视频的方法。只需您请求URL即可通过vimeo id获得其详细配置。在配置内部，您会找到videoUrl，可以轻松地在react-native-video-controls上运行。

以下是示例

const VIMEO_ID = '179859217';
fetch(`https://player.vimeo.com/video/${VIMEO_ID}/config`)
      .then(res => res.json())
      .then(res => this.setState({
        thumbnailUrl: res.video.thumbs['640'],
        videoUrl: res.request.files.hls.cdns[res.request.files.hls.default_cdn].url,
        video: res.video,
      }));

在渲染中

<VideoPlayer
        ref={ref => {
          this.player = ref;
        }}
        source={{uri: this.state.videoUrl}}
        navigator={this.props.navigator}
        fullscreen={true}
        resizeMode={'cover'}
      />

Answer 2

我在尝试在我的应用中显示嵌入的 Vimeo 视频时遇到了同样的问题。使用 html 内容的解决方案，如 Juliano 所示，对我来说效果很好

Answer 3

尝试使用react-native-video包在React Native项目中播放Vimeo个视频。

要安装npm

npm install --save react-native-video

或使用yarn：

yarn add react-native-video

值得注意的是，以下链接中可能出现的问题。

https://stackoverflow.com/a/52976151/5519329

https://stackoverflow.com/a/39982973/5519329

代码：

import Video from 'react-native-video';

<Video source={{uri: "your url"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onEnd={this.onEnd}                      // Callback when playback finishes
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Answer 4

我找到了一个在 webview 上嵌入 iframe 的解决方案。

import React from 'react';
import { string, func } from 'prop-types';
import WebView from 'react-native-autoheight-webview';

const VimeoPlayer = ({ videoId, onError }) => {
  return (
    <WebView
      style={style}
      onError={onError}
      allowsFullscreenVideo
      scrollEnabled={false}
      automaticallyAdjustContentInsets
      source={{
        html: `
          <html>
            <body>
              <iframe src="https://player.vimeo.com/video/${videoId}" width="100%" height="200px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
              <script src="https://player.vimeo.com/api/player.js"></script>
            </body>
          </html>
        `,
      }}
    />
  );
};

const style = {
  height: 200,
  maxWidth: '100%',
};

VimeoPlayer.propTypes = {
  videoId: string,
  onError: func,
};

export default VimeoPlayer;

如何在React Native中播放vimeo视频？

4 个答案: