We Keep Coding

Video autoplay not working in iphone using Reactjs

I am working on Reactjs and i using nextjs,I have video (in website) which is working/display fine in android phone but not working in Iphone, How can i fix this issue ? I tried with following cdoe
<video loop autoplay='' muted>
<source src= { 'https://xxxxxxxxxxxx.vercel.app/img/video.mp4
' } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src={ 'https://xxxxxxxxxxxxxxxxx/img/video.mp4
' } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

Does playsinline attribute help?
Here's what I have:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Set start time in HTML Video going back to 0 instead of value

I tried both
<video id="Video" preload autoplay loop>
<source src="video.mp4#t=00:00:37" type="video/mp4">
</video>
and
<video id="Video" preload autoplay loop>
<source src="`+EpisodeURL+`#t=37" type="video/mp4">
</video>
But nothing works.
I also tried in JS:
video.currentTime = 37.0;
or
video.currentTime = 37;
or
video.currentTime = "37";
or using video.js
and setting the HTTP header Accept Ranges: bytes.
I also tried to use a different video..
No errors in the console, just goes back to 0 seconds.
Nothing works, please help

Can you show the whole js code?
Because video.currentTime is working fine in my system
const video=document.getElementById('video')
const setTime=()=>{
video.currentTime=0.3;
}
button.addEventListener('click',setTime)

Force video to play before poster loads

On firefox the poster image completely loads before video starts. Is it possible to force it to play video first with either pure JS or jquery? Doesn't matter if it stops to buffer, i just don't want to see the poster first.
Using standard code:
<video class="myvideo" width="500" height="700" poster="" autoplay muted>
<source src="" type="video/webm">
</video>
Super easy fix just needed a preload="none"

You could try to play the video per JavaScript when it has been loaded. To do that, you will have to add an id to the video.
<video id="myivdeo" class="myvideo" width="500" height="700" poster="" autoplay muted onload="javascript:this.play();">
<source src="" type="video/webm">
</video>
~ MarvMan

Just needed to include preload="none".
<video class="myvideo" width="500" height="700" autoplay muted preload="none" poster="" >
<source src="" type="video/webm">
</video>

Display Video Inline

I have video embedded in a webpage.
I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.
I've tried
adding webkit-playsinline
<video width="400" controls webkit-playsinline>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I've tried added in JSFiddle <-- Please View it use your Phone/Tablet
Any hints ?

You have to set the following in Obj C as well.
webview.allowsInlineMediaPlayback = YES;
Your existing attribute is right like below.
<video id="player" width="480" height="320" webkit-playsinline>
Other - Use HTML5 FullScreen API
http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Below are the Webkit Fullscreen properties to play around.
document.webkitCurrentFullScreenElement
document.webkitCancelFullScreen
document.webkitFullScreenKeyboardInputAllowed
document.webkitIsFullScreen

Play html video when its in viewport, pause on leave viewport

I'm trying to play my video as soon as it's in the viewport and when it's not in the viewport anymore it's supposed to pause.
I've tried this so far:
HTML code:
<video id="video" width="320" height="240" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support the video tag.
</video><br>
<video width="320" height="240" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
jQuery code:
$("#video:in-viewport").play();
$(window).scroll(function(){
$("#video:in-viewport").play();
});
I'm using this plugin for the in-viewport check
http://www.appelsiini.net/projects/viewport
This is my jsfiddle:
http://jsfiddle.net/hytpm3xe/2/
Does anyone have an idea how to get this working correctly?
Thanks!

Two issues:
1) You want to refer to the tag, not the id, so no "#"…
$("video:in-viewport")
2) To use the video API, you have to use the DOM object, not jQuery object, so the final call would look something like…
$("video:in-viewport")[0].play();