WebM video doesn't play on Safari browser IOS iPhone - iphone

<video autoPlay={true} loop={true} controls={false} muted playsinline id="video">
<source src={`${...}`} type="video/webm"></source>
</video>
I tried usng playsinline but didn't work.

Related

Why is Autoplay video not working on iphone

Hi,
I have this video embedded onto my index
<video style="width:100%;" muted="" autoplay="">
<source src="video.webm" type="video/webm">
<source src="video.mov" type="video/mp4" codecs="hvc1">
</video>
it starts playing automatically on desktops and android phones, even ipads but not iphone for some reason. Why is that? Is the iphone browser blocking it or something?
Thank you.

Cannot open embedded mov file in Safari

I want to play an embedded .mov video in Safari on an iPad.
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="1.mov" type="video/mov">
</video>
If I test that code in Chrome using my desktop, it will works perfectly.
Using iPad and iPhone, it won't play it at all.
Please change file extension from .mov to .mp4 and you can add its embedded movie file. Therefore, you can play the movie file.

HTML5 Audio - Detecting a click on iPad/iPhone, iOS 7

I cannot get an audio tag to detect a click when it is running in iOS 7 (haven't tried earlier versions of the OS).
It works fine in a browser. Here is my code:
<audio id="myAudioPlayer" controls>
<source src="audio/myTrack.ogg" type="audio/ogg">
<source src="audio/myTrack.mp3" type="audio/mpeg">
<source src="audio/myTrack.acc" type="audio/acc">
Your browser does not support the audio tag. </audio>
Jquery:
$("#myAudioPlayer").mouseup(function(){
// DO STUFF
});
iOS 7 uses it's own styling for the HTML5 player so I am wondering if this is the issue? I can use the player controls as normal, but my custom functions do not work.
I couldn't find a fix for this so I ended up building a custom player with SoundManager2.
http://www.schillmania.com/projects/soundmanager2/
This allowed more control over my play/pause buttons and worked on iOS devices.

How to play a video inside mobile safari

I'm using a simple HTML5 video tag to reproduce an mp4 video in the iphone browser but it always open the video player on the iphone.
Is there a way to play the video inside the browser?
<video src="http://video-js.zencoder.com/oceans-clip.mp4"
autoplay="autoplay" <!-- Boolean attribute. Omit to prevent autoplay. -->
start="00:00:00.00"
loopstart="00:00:00.07" <!-- 7 seconds -->
loopend="00:00:00.19"
end="00:00:00.27"
playcount="4" <!-- play 4x -->
controls="true"
width="640"
height="480"
>
This is my code I'm using, and works well in a normal browser but in the iphone it allways opens in the video player.
Thanks!
To the best of my knowledge, iPhones always open HTML5 video in the native player (to avoid postage-stamp sized videos). iPads will play it within Safari using the same code. I don't believe there's a way to override this.
Use playsinline
<video … playsinline />

Looping HTML5 audio on the iPhone

I'm trying to make a HTML5 webapp that simply plays a sound over and over and over again, on my iPhone. I don't know any Obj-C to do it natively.
What I have works fine, but the sound only plays once:
<!DOCTYPE html>
<html>
<head>
<title>noisemaker!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<audio src="noise.mp3" autoplay controls loop></audio>
</body>
</html>
Is there a way to either bypass the QuickTime audio screen and loop it in the webpage, or get the QuickTime audio screen to loop the sound?
I found that the "loop" attribute does not seem to fully work in the latest implementation of the HTML5 audio element on the iPhone (iOS 4.0). I found this to be a workaround:
<audio src="noise.mp3" onended="this.play();" controls="controls" autobuffer></audio>
I found that you have to not put "loop" in the above, or the "onended" event seems not to trigger (i.e. "loop" is partially implemented).
Note that "autoplay" is intentionally disabled on the iPhone.
It also seems that the "volume" attribute is not fully implemented at this time as well.
Note that with iOS 4 audio is played without the full-screen QT player.
Have you tried using key/value pairs for the attributes. I know you SHOULD be able to just specify the attr, but just to play devil's advocate.
Try:
<audio src="noise.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
iPhone OS 3.0 doesn't support the <audio> tag completely - all it will do with it is play it in full in the QuickTime style.
What about:
<audio src="noise.mp3" autoplay="" controls="" onended="this.play()"></audio>
You can do it with an old-fashioned embed tag, but I have no idea if Mobile Safari will honor its loop attribute.
Playing media like video or sounds are not allowed (so far). If you want to play video or audio, the iPhone will open it in an external (default) player.
When the player is open, you do not have any control over the webpage untill the user shut-down the external player or the video/sound has stopped by itself.