视频在本机反应（android）中不起作用

Posted 2023-03-14

【中文标题】视频在本机反应（android）中不起作用

【英文标题】：Video is not working in react native(android)

【发布时间】：2016-11-06 08:48:01

【问题描述】：

import React,  Component  from 'react';

import AppRegistry,StyleSheet,Text,Alert,TouchableOpacity,View,ScrollView,Image,WebView,ListView,Linking  from 'react-native';

import Video from 'react-native-video';

 class SampleRow extends React.Component

 constructor(props) 
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
 

 state = 
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
  ;

 onLoad(data) 
this.setState(duration: data.duration);
  

 onProgress(data) 
this.setState(currentTime: data.currentTime);
 

  render() 
return (
  <View >
   <Video source=uri:"https://www.youtube.com/watch?v=gQOaYQs07fc"
   style=styles.backgroundVideo
 rate=this.state.rate 
 volume=this.state.volume
 muted=this.state.muted 
 resizeMode=this.state.resizeMode 
 onLoadStart=() => console.warn("loading started"); 
 onLoad=() => console.warn("loading done"); 
 onProgress=this.onProgress 
 onEnd=() =>  this.refs.myVideo.refs.node.seek(0)  repeat=true
   />
   </View>

    );
   
  

  var styles = StyleSheet.create(
  backgroundVideo: 
   position: 'absolute',
     top: 0,
    left: 0,
   bottom: 0,
  right: 0
   
  );

 AppRegistry.registerComponent('smart', () => SampleRow);

尝试了本地和远程视频。没有任何效果。输出中的空白页。

以上代码引用自https://github.com/react-native-community/react-native-video/blob/master/example/index.android.js

在这里推荐https://github.com/react-native-community/react-native-video/issues/174，但没有任何帮助

期待这样的输出https://www.youtube.com/watch?v=TPGNgovQlRc

【问题讨论】：

'react-native-video' 不支持 youtube 视频网址。你可以试试这个库github.com/inProgress-team/react-native-youtube，它支持播放youtube视频。

@Jickson 本地视频也没有显示

播放本地视频时传递的 url 是什么？

source=uri:"./Videos/Videoname"

尝试使用 source=require('./Videos/Videoname') 。这应该有效。

【参考方案1】：

您应该在样式中插入width 和height。