You can simply do this:
<video style="width:100%" controls autoplay>
<source src="content/Vik_Virt_Video_30fps_slow.mp4" type="video/mp4">
<source src="content/Vik_Virt_Video_30fps_slow.webm" type="video/webm">
</video>
Video tag can be used and it works absolutely fine on iPhones
your HTML is fine:
this is an issue with IOS
disable battery saver of your phone and try if this works,
also, check this doc: safari allows autoplay with some conditions :
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
i embed a Video Tag on a Website. The Video works fine on all devices and Browsers (Windows, Android) exept of IPhones.
This is my Code:
<div class="player" id="video">
<video onloadeddata="this.play();" playsinline="" loop="" muted="">
<source src="content/example.mp4" type="video/mp4">
<source src="content/example.webm" type="video/webm">
</video>
</div>
And this is my CSS for the Div and Video Tag:
video {
width: 100%;
height: auto;
}
.player {
max-width: 930px;
margin: auto;
}
Does someone can help me with this? I can post more Informations if you need.
Thank you!