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.
Related
ir71fyvt5ltkxntpahpb.mp4:1 Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR
list:1 GET https://res.cloudinary.com/sandy59/video/upload/v1617774459/videos/ir71fyvt5ltkxntpahpb.mp4 net::ERR_HTTP2_PROTOCOL_ERROR 206
I am using MERN stack with cloudinary for storing videos.
<video height="250px" width="250px" onMouseOver={(e)=>this.handleMouseover(e,index)} onMouseOut={(e)=>this.handlemouseout(e,index)} poster={data.imageurl}
onCanPlay={
(e)=>this.handlecan(e,index)
} muted="muted" loop preload="auto" onError={console.log("error occureed",index)}>
<source src={data.videourl} type="video/mp4"/>
Your browser does not support the video tag.
</video>
I am using above code to get the video from cloudinary website using url but sometimes some videos get the above error and the video doesn't load. Why is it happening? How can I retry the failed video tags?
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.
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>
I have downloaded a MP4 video for testing purposes but I am not able to watch it even after adding the crosswalk plugin. This is what I get:
Cannot GET /media/big_buck_bunny.mp4
This is my code, which is running fine for a youtube hosted video:
<div class="card">
<ion-item>
<div class="video-container">
<iframe ng-src="media/big_buck_bunny.mp4" frameborder="0" width="560" height="315"></iframe>
</div>
</ion-item>
</div>
Test video was downloaded from here:
http://www.quirksmode.org/html5/tests/video.html
And this is the tutorial I have followed:
https://www.thepolyglotdeveloper.com/2015/01/embed-video-ios-android-ionicframework-app/
EDIT: It seems I was placing videos in the wrong directory (not sandboxed). Nevertheless, it now complains about broken or corrupt file (message is in spanish so I don't know if translation is correct).
Finally I managed to do it using the "video" tag and tested it on different Android (which seems to be the problematic plattform) and everything works fine:
<video width="100%" autoplay="autoplay" controls style="margin-top: 50px; margin-bottom: 20px;">
<source src="media/sample.mp4" type="video/mp4">
<p>Your browser does not support H.264/MP4.</p>