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>

Javascript setting / replacing source src="" on html5 video

In my HTML for each source I wanted to use javascript to insert the correct video to the matching source as follows.
<script type="text/javascript">
var 1_video = '1.mp4';
var 2_video = '1.webm';
var 3_video = '1.ogv';
</script>
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" type="video/ogg" />
</video>
All the examples I find keeping using jquery and I don't want to use jquery or any external library.
What is the best way to do this.
I would do something like this but I want to achieve this without using HTML id="idname" tags on my video and source element.
document.getElementById('video').src = 1_video;
Thanks for reading and any help / guidance that can be given.

you try to select an object with "video" id so try to add id to your sources:
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" id="source-mp4" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" id="source-webm" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" id="source-ogg" type="video/ogg" />
</video>
document.getElementById('source-mp4').src = 1_video;
document.getElementById('source-webm').src = 2_video;
document.getElementById('source-ogg').src = 2_video;

You could could have a video container, and every time you selected a new video, you could create a new element inside the container and destroy the old by using removeChild
/*Destroy current element inside the container*/
container.removeChild(element);
/*Create new element in the container*/
var element = container.createElement("VIDEO");
element.src = XYZ-video;

if you gave the video an id say equal to "webVideo" or something, you could get the id, then use query selector to target the source tag within that id.
var videoSource = document.getElementById("webVideo").querySelector("source");
videoSource[0].src = "1_video";
Then use the videoSource[0] for mp4 videoSource[1] for webm and [2] for ogg

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

IOS Cordova/Phonegap offline video source tag not working

On IOS When I download some video using cordova filetransfer plugin it doesn't plays(absolute url like: file:///var/mobile../videos/1.mp4), however when I wrap the video into the app it works(relative url like: "videos/1.mp4").
On android both works.
Script:
var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/download.php");
fileTransfer.download(
uri,
fileURL,
function(entry) {
generateMarkup(entry);
},
function(error) {
handleError(error);
},
);
The generateMarkup() function creates the markup as it recommends by w3c http://www.w3schools.com/html/html5_video.asp
<video width="320" height="240" controls>
<source src="file:///var/mobile/.../movie.mp4" type="video/mp4">
<source src="file:///var/mobile/.../movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I have written helpers to print out all the files stored inside the app sandbox, so the files are there, the path is correct, but it doesn't play.

After two days of digging found this page: https://issues.apache.org/jira/browse/CB-6051
what helped to figure out that iOS 7.x? can't handle local absolute path in the source element. (Mine: iOS 7.0.4) It just gives a play icon crossed with a line.
This is not working:
<video width="320" height="240" controls>
<source src="file:///var/mobile/.../movie.mp4" type="video/mp4">
<source src="file:///var/mobile/.../movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
However this one works finally...
<video width="320" height="240" src="file:///var/mobile/.../movie.mp4" controls>
Your browser does not support the video tag.
</video>
Hope it helps someone.

Flash fallback not working in case HTML video is not supported

I am using HTML video with flash fallback on my site but the flash doesnt seem to work in case HTML video is not supported. Do I need to include any javascript file to make this work ?
<video width="800" height="400" preload=""
onloadeddata="document.getElementById('videoLoadImg').style.display = 'none';"
poster="/admin/config/header_files/top.jpg" autoplay="">
<source src="/admin/config/header_files/top.mp4" type='video/mp4;' />
<source src="/admin/config/header_files/top.webm" type='video/webm;
codecs="vp8, vorbis"' />
<source src="/admin/config/header_files/top.ogv" type='video/ogg;
codecs="theora, vorbis"' />
<embed src='/admin/config/header_files/top.swf'
type='application/x-shockwave-flash' width='800' height='400'
allowscriptaccess='always' allowfullscreen='false'></embed>
<img src='/admin/config/header_files/cake.jpg' />
</video>
The HTML video is not working on my iMac with Safari 5.0.6.

Could it be the video is not auto played? because when I open WebKit Inspector and try
document.querySelector('video').play()
and it works. This case you could the code above to jQuery DOMReady, or add the autoplay attribute like this:
<video autobuffer autoplay>
FYI: I have Safari 5.1.2, however I believe Safari has support for HTML5 video around 4.0.