I am using react-native-video to stream video in my app. The video starts with paused state.
From onLoadStart and onLoad event i see the video is started to load automatically even though it is paused. These videos are fetched from an URL, not in the assets of the app.
When i have multiple files in one screen it will take too much space in mobile. I want to keep space taken to minimal.
So i want to load files only if it is played by user by clicking the play button.
Is there a way to specify not to autoload files?
Related
What am I doing?
A react-native-video component is loaded into the screen with a source uri from my nodejs backend.
What is the problem? (Only tried on android)
My backend is working fine and the video is loaded, but extremely slow. I checked on the backend that the video component is requesting a byte-range of 1MB every ~1s. On the other hand, if I request the video ranges with axios, it takes a couple of ms to request multiple byte-ranges.
When using a video stored locally on the android device, the loading time is almost instantaneous.
I tried the default android player as well as exoplayer with no difference in loading times.
I am trying all this with only one Video component and when I comment it the app runs smoothly
Possible solution:
I don't want to load the data directly from the Video component and I am trying now to download the byte-ranges and store them locally. Later I plan to load these byte-ranges into the Video component.
import AsyncStorage from '#react-native-async-storage/async-storage';
...
await AsyncStorage.setItem(video_name, JSON.stringify(byte_range_data_from_backend))
This works fine and I can read the byte_range_data_from_backend later with:
const data_from_item = await AsyncStorage.getItem(video_name)
What is my question?
How can I get these video_ranges uris to pass them to the Video component?
I think I need to create some kind of file and update the file content every time I receive a new byte-range. Meanwhile, I would like the video to be played using the already downloaded byte-ranges.
Is this possible or is not a good approach? What would be a possible way to load videos fast? It would be nice to download some byte-ranges before even trying to play the video, so that the waiting time for the user is minimal.
I'm working on a React Native App. I need to play a beep every 500ms. I already have a mp3 file to play and can it play on click. But after clicking the button a few times, it breaks. I used the example code from expo av. I used the snack from playing audio sounds.
I also could use another mp3 file which is longer, but has to start replaying immediately after ending.
What's the best way to play the beep every 500ms? Using a longer file and replay after ending? Or frequently use the single beep? How can I achieve that?
If you are using react-native-sound library, have a look at the link below: link
I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.
I am working on a react native application where i an upload image button in the Upload screen and during the upload process if i navigate back to the previous screen the upload process is stopped but i would want to upload the image in background of the app.
I am sure where to start trying this.
how will i approach this problem. Is there is any package i could use, i am even persisting data in redux store after the image is uploaded so is there a way i can use redux to upload the image.
One way of doing would be.
You can show uploading indicator while uploading and then return promise to navigate whatever the page you want.
I have an audio tag like this:
<audio id="myAudio" msaudiocategory="BackgroundCapableMedia"></audio>
to which I set the src property to
URL.createObjectURL(file, { oneTimeOnly: true });
and then call
myAudio.play();
This works well for my personal mp3's, but songs downloaded through the Xbox Music Pass, which I assume are under DRM, simply do not play. There's no audio and the 'timeupdate' event never fires. I don't see any exception or message in the Output window.
I tried playing those same songs with VLC, and I get no audio while the progress bar advances normally.
Is it possible to play those songs outside of the official apps?
Edit: and if it isn't, can we detect if a music file is DRM'ed so as to prevent its usage in our apps?
These are DRM'd files, so they need the DRM keys, etc etc.
Since those are private to the application, it's not possible to play that DRM'd content outside of those applications.