如何解决在播放视频之前对本地视频显示缩略图做出反应
我正在使用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}
/>
</>
}
解决方法
我要做的是让每个视频对象都包含其URI和缩略图字段。
然后包括一个条件,当视频组件处于暂停状态时,缩略图应以较高的zIndex显示。
请注意暂停状态,并且视频组件应在同一视图中。
这是一个代码示例: `{已暂停&&(
{paused && (
<View style={{
flex: 1,backgroundColor: 'rgba(0,0.2)',position: 'absolute',resizeMode: 'cover',zIndex: 10,height: '100%',width: '100%',}>
<Image
source={{
uri:'thumbnailuri'
}}
style={{
height: '100%',}
/>
</View>
)}
希望这会有所帮助。
,视频具有海报属性,不确定视频播放器的“组件”是否支持它。
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。