I've got my small react web app that runs with no problem with five low quality video.
But once I add multiple large high quality video files and I start the app, my laptop freezes and I need to manually shut it down.
<video width="90%" height="90%" margin="auto" controls>
<source src={require(('../videos/' + props.movie + ".mp4"))} type="video/mp4" alt= "video" />
</video>
My videos folder is on my src folder, Any advice?
Thanks in advance to anyone who can help!
You have to load you video files inside componentDidMount() lifycycle method when component is mounted.
Related
The video is playing properly on any desktop or laptop, but when on mobile, specifically mobile Safari, the video is not playing. However the video is showing as an element with the correct styling. I have applied the playsInline and dangerouslySetInnerHTML solutions, but cannot get the video to play. The video is also 3.3mb and in the assets folder. Does anyone have any ideas on how to get the video to show and autoplay on mobile?
JSX:
<div
dangerouslySetInnerHTML={{
__html: `
<video
loop
muted={true}
autoPlay
playsInline={true}
id="video"
>
<source autoPlay muted={true} src="${video}" type="video/mp4" />
</video>`,
}}
/>
Solved The Issue!
I checked the original mp4 codecs and it was AAC, H.264. I used HandBrake to decode the mp4 file and took the audio out as well. I am not too sure if the muted function was working correctly, but decoding the file seemed to do the trick.
I'm working on a create-react-app project, the project is supposed to show a background video on landing page.
It is working perfectly on localhost:3000 but when I upload to amplify hosting, video stop showing.
I already tried to call the same video directly from this url http://ormuxwater.com/MobterVideo.mp4 on the DOM by modifying it on developer console and it is still not showing anything, so my guess is that is not a folder file location problem
I also tried calling it from different places.
first try: import MobterVideo from "../../assets/MobterVideo.mp4";
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="{MobterVideo.mp4}" type="video/mp4" />
</video>
second try:
// calling it directly from public folder
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="/MobterVideo.mp4" type="video/mp4" />
</video>
Is there something we need to take care for videos to work when uploading to aws amplify?
console is not returning errors and I don't know what else to look
You can see working demo in https://mobter.mx
You have to upload the video to an AWS S3 bucket (cloud hosting) and then you can src the file, that's the only way that worked for me; although I guess you could use a different cloud hosting service, but I guess it's probably better to us S3 if you're using Amplify. Here are the instruction on how to do it:
https://docs.sumerian.amazonaws.com/tutorials/create/beginner/s3-video/
You should only need steps 1 & 2
What are the possible solutions this problem: I need to include various sound files to a react app (build into a kiosk with nwjs) on app startup.
Let me explain the expected behavior - I have a nwjs kiosk react app that will run on a Windows machine.
It should grab some UNC paths for sounds over rest api on app startup.
I need to include these paths as resources (located outside the src folder) in the app in order to play the sounds.
Is it even possible?
Linking from the project's src folder is clear to me. But how to link paths outside the src folder when I don't even know the paths beforehand?
import OKSound from "./OK.wav";
Thank you!
Looks like there is no issue with playing sounds from "outside" with the audio tag, but it's really playing a sound only after creating an exe with nwjs!
const url = "http://example.com/sound.wav";
<audio autoPlay>
<source src={url} type="audio/wav" />
Your browser does not support the audio element.
</audio>
I am trying to add a video 2mb to my evoq web site. I get a error says video.mp4 - Extension not allowed. I have added mp4 to Allowable File Extensions part. I tried to add mp3 and i got the same error. I am trying to add the video to HTML Pro module. Do I need to select another module for adding videos?
I have just done it. I went to Site Assets,uploaded the mp4. Then I clicked on the mp4 to get the url.
<video width="1056" height="594" autoplay="autoplay" loop="loop">
<source src="https://test.windows.net/portals-sandbox2/1/Images/yourvideo.mp4?sr=b&si=DNNFileManagerPolicy&sig=0HYBH1YbfYIZr3h2tGgsiRMY66YW0YJsVtMF9EIMq0k%3D×tamp=1526412367032" type="video/mp4">
</video>
As per title, I am trying to render a Jinja2 template with an html5 tag using a Flask backend on Google App Engine. It works with no problems of chrome/firefox (windows/android) but no luck on safari for iOS (tested on iphone 7).
<video id="media-video" width="100%" muted controls>
<source src="{{url_for('static', filename = 'test.mp4')}}" type="video/mp4">
Not supported
</video>
I have searched and read about it (e.g.
HTML5 Video tag not working in Safari , iPhone and iPad) but my case seems somehow different ... no errors are displayed but the video does not seem to be loaded (the video is h.264).
Any idea on why?
Are flask/google-app-engine adding complexity to the problem?
Try a different tag structure:
<video id="media-video"
width="100%"
src="{{url_for('static', filename = 'test.mp4')}}"
type="video/mp4"
muted controls
>
</video>