I really only need this for a video, I'm using the video component https://github.com/yamill/react-native-videoplayer and I want to use a local asset video rather than an mp4 stored on the web, how would I locate the video? e.g. http://local/my-asset/video.mp4 (This is obviously made up for demo purposes).
I'd recommend switching to react-native-video. It has better support
https://github.com/react-native-community/react-native-video
Then, the video component's source can be passed as follows:
<Video source={{uri: "http://local/my-asset/video.mp4"}
...
</Video>
Related
I've searched a bit here on SO to find a way to show instagram video using the public api ?__a=1 method. I've found a question that have pointed me into the right direction but not at all.
after I get the user media, I'm checking in my vue app if the resource is a video or an image and if is a video I show an html5 player where I'm binding the url that is obtained form the public json api. What I'm facing is that the player will not reproduce the video, but if I use the url into the browser, an html5 player is loaded with the related video that will start playing.
The video urls returned are something like this one:
"https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
I've tried to remove all the part after the .mp4 file extension but this will not work, so I suspect that all the url is needed. Is there a way that I can use to reproduce video in my app?
After many tryes unfortunately I didn't figured out how to use my own HTML5 player so I've used a simple solution. An <iframe> with the url set will let the vido play into the app, this exclude me from the ability to remove the download button or controls from the player but at the moment it's the only way I can implement to achieve my scope.
(1) Your link works okay for me in a video tag:
<video width="640" height="480" >
<source src="https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
type="video/mp4">
</video>
(2) It even works okay in this random demo that uses vue.js.
With no demo page of your problem the solution is a guess...
Make sure that your own site URL starts https:// or else change the video src to http://...etc.
Make sure your server (settings?) isn't somehow blocking you from loading the file.
If still failing, show us the problem via some link to your testing page.
I am working on React-Native application. I have to play Audio using URL(podcast) source.
The UI should be like following.
I have tried react-native-video library, But, The UI is different.
https://www.npmjs.com/package/react-native-video
Is there any other library available to achieve this?
I have to show Progressbar(Slider), Play/Pause/Stop, Title. And I have to play audio in background state too.
Any suggestions?
You can use this library,
it has everything like Play audio files, stream audio from URL
https://www.npmjs.com/package/react-native-sound-player
react-native-track-player provides almost all features a audio player, you can also use it to play audio in background, used it for this app
Is there a way to create App in react native which can be used to record audio and video and save same file on both Android and iOS Devices using App?
Please help me as I am stuck.
Thank You.
I guess you can use 3 library maintained by the React Native community.
react-native-camera (for recording videos)
react-native-video (for playing video)
react-native-audio-toolkit (for recording and playing audio)
To record an audio
import {
Recorder,
} from 'react-native-audio-toolkit';
// function to start recorder
this.recorder = new Recorder(‘filename.mp4’).record();
To record video and play it, there is a really good blog post in medium
https://medium.com/react-native-training/uploading-videos-from-react-native-c79f520b9ae1
For more example, please check examples in the github pages for each library
https://github.com/react-native-community/react-native-camera
https://github.com/react-native-community/react-native-video
https://github.com/react-native-community/react-native-audio-toolkit
The autoplay do not working in mobiles (Android, iOS). The autoplay work in mobiles? Exist another plugin in html5 to show videos and start automatically in mobiles?
There is a workaround for this. What I've done is dynamically append the video element, and have the autoplay setup option set to true.
The trick is to place an element in front of the video player that initiates the action to append the video element. You can't use video.js's poster since that isn't available until videojs is instantiated. I haven't tried to trigger that event manually in javascript, but that might be worth a try.
Relevant Question
As of January 24th, 2017
HTML5 video tags can autoplay on android if the video is muted. You would need to include the muted and autoplay attributes in the tag to make it work as intended.
Here is a link to the article: Autoplay on Chrome for Android as of version 53
No, autoplay does not work in mobile devices. A user action (click, etc) is required in order to begin playback in order to avoid excessive bandwidth use.
I am planning to build a system to broadcast public events (trials, meetings, conferences).
A key request will be the insertion of live subtitles to the A/V stream.
The subtitles will be "live" since they will be produced by an operator while the event will happen.
I suppose the HTML5 "track" element is not yet implemented by any of the major browsers, but: can I expect to eventually use it for live subtitles? Will I be able to inject the subtitle to the page while the stream is playing?
Please Look at the following links. Looking at the link i am having to believe it should be possible as they are using Js to show subtitles
http://www.storiesinflight.com/js_videosub/
http://cuepoint.org/
You may also consider http://mozillapopcorn.org/ which is to show content on timing of the video. So technically u can use this with ajax to show/stream subtitles
There are HTML5 video JS libs that support subtitles (eg: VideoJS supports the .srt format, there are several easily Google-able others), however to the best of my knowledge none of them support streaming subtitles.
I think you may have to build your own solution for this. If I were to do it, I'd probably try doing something with Socket.IO's broadcast functionality that can push data out to all connected clients at once, and have your client-side JS listen for new subtitle events and render them on screen as they come in. You can use plain ol' CSS to overlay the text over the HTML5 video.