我基本上需要加载我的应用程序,并向用户展示视频供稿,然后他们将在视频上的任意位置单击并向其展示他们单击放大的区域,并将整个视频显示在右上角。小型视频可以像以前一样进行交互,因此缩放视图相对于他们想要看到的区域而改变。他们还可以返回到主视图,并再次显示整个视频供稿。
我目前大部分工作都在工作,但是它正在加载2个视频标签,我找不到一种减少资源消耗的方法。另一个问题是视频同步,因为即使我同时开始播放两个视频,也可能有或没有延迟,这是不可接受的。
我基本上是在玩这样的事情:
import Video from 'react-native-video';
import {Component} from react-native;
class VideoFeedComponent extends Component {
render(){
let vidStrm = {
uri: 'https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/ElephantsDream.smil/playlist.m3u8'
};
return (
<Video id='featured'
source={vidStrm}
ref={ (ref) => { this.player = ref }}
style={styles.video}
format='m3u8-aapl'
rate={1.0}
volume={0.3}
paused={false}
playInBackground={false}
playWhenInactive={true}
onLoad={this.onLoad}
/>
);
}
}
缩放和其他功能可能必须更改,理想情况下,有一种方法可以简单地操作一个从前景开始的单个对象,然后移至右上角,并根据用户的拍打将其放大然后在用户完成操作后返回覆盖整个屏幕。
我当时正在考虑缓存视频,但我担心这样做会耗尽用户的内存(因为这将主要用于实时流)。另外,我在使用react-native-fetch-blob时遇到了重大问题,因此放弃了。
任何提示/建议/信息将非常欢迎和帮助!这是我对React Native的首次尝试!