我正在使用react-native-video向用户react-native-video-controls显示视频以显示控件。我的目的是在播放视频之前显示缩略图。该缩略图是存储在服务器中的图像。但是我没有得到如何在react native video组件中显示此缩略图。
有人可以帮助我吗?
提前谢谢
这是代码
从“ react-native-video”导入视频; 从“ react-native-video-controls”导入VideoPlayer;
const App = () => {
return (
<>
<VideoPlayer
source={{ uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
ref={(ref) => {
// console.log(ref)
setData(ref)
}}
style={styles.backgroundVideo}
onBuffer={onBuffer} // Callback when remote video is buffering
onError={videoError} // Callback when video cannot be loaded
fullscreen={true}
resizeMode="contain"
paused = {true}
/>
</>
}
答案 0 :(得分:0)
我要做的是让每个视频对象都包含其URI和缩略图字段。
然后包括一个条件,当视频组件处于暂停状态时,缩略图应以较高的zIndex显示。
请注意暂停状态,并且视频组件应在同一视图中。
这是一个代码示例: `{已暂停&&( <图像 来源= {{uri:'thumbnailuri'}} 样式= {{flex:1, backgroundColor:'rgba(0,0,0,0.2)', 位置:“绝对”, resizeMode:'cover', 高度:“ 100%”, 宽度:“ 100%”, zIndex:10,
{paused && (
<View style={{
flex: 1,
backgroundColor: 'rgba(0,0,0,0.2)',
position: 'absolute',
resizeMode: 'cover',
zIndex: 10,
height: '100%',
width: '100%',
}>
<Image
source={{
uri:'thumbnailuri'
}}
style={{
height: '100%',
width: '100%',
}
/>
</View>
)}
希望这会有所帮助。
答案 1 :(得分:-1)
视频具有海报属性,不确定视频播放器的“组件”是否支持它。
poster="https://somesite/thumb.png""
语法:
<video height="" width="" poster="URL of the image to be displayed">
*旁注:对于YouTube缩略图,可通过以下网址方案访问。
对于默认和正常质量的缩略图:
http://img.youtube.com/vi/<youtube-video-id>/default.jpg
对于高质量(HQ)缩略图:
http://img.youtube.com/vi/<youtube-video-id>/hqdefault.jpg