首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React-native-video不显示视频播放器

React-native-video不显示视频播放器
EN

Stack Overflow用户
提问于 2018-09-26 13:13:34
回答 2查看 16K关注 0票数 7

我正在使用react-native-video包来获取视频播放器,我可以在其中播放我的youtube视频。

我试过了,但只有一个空格,而不是一个视频播放器。

代码语言:javascript
复制
import Video from 'react-native-video';
    <Video source={{uri: 'https://www.youtube.com/watch?v=Gh2FaDqZp2g'}}
                       ref={(ref) => {
                         this.player = ref
                       }}
                     onBuffer={this.onBuffer}
                     onEnd={this.onEnd}
                     onError={this.videoError}
                     style={styles.backgroundVideo} />

风格:

代码语言:javascript
复制
backgroundVideo: {
    height:300,
    width:'100%',
  }
EN

回答 2

Stack Overflow用户

发布于 2018-09-26 14:57:36

我认为视频标签会接受以.mp4格式结尾的Uri。

请用此http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4替换您的uri

(注意:其他一些uri也可以使用相同的格式)和checkout。

但是对于Youtube流媒体视频,你必须使用react-native-youtubeYoutube API组件

Please refer this link for further

票数 5
EN

Stack Overflow用户

发布于 2018-10-25 11:53:44

我在你的代码中发现了一些问题:

1/ uri:请替换为此链接:"http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4

代码语言:javascript
复制
source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}

2/你的风格:因为我记得width: '100%不工作,你应该设置一个特定的数字。也可以使视频容器视图包裹视频视图

代码语言:javascript
复制
<View style={styles.videoContainer}>
    <Video
        source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
        ref={(ref) => {
            this._player = ref
        }}                                      
        ...
        style={styles.video}/>
</View>

视图样式:

代码语言:javascript
复制
videoContainer: {
    flex: 1,
    backgroundColor: 'black',
},
video: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
},

希望这能对你有所帮助。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52510363

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档