I've implemented a video into my website and this is how I did it: <video autoplay muted loop> (The video has no audio.)
Unfortunately, on mobile, the video does not autoplay and when I hit play the browser opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.
I really don't want this to happen. – What is happening and how can I avoid this?
The "lightbox"-problem can easily be fixed, you just have to add this attribute: playsinline to the video tag. – Great documentation here: https://css-tricks.com/what-does-playsinline-mean-in-web-video/
The video did not autoplay on my iPhone because: "Low Power Mode", was active. – Found that out here: Autoplay muted video iOS 11.2 :)
Related
I'm creating a website using wordpress and I'm trying to add a MP3 music into it.
But the music don't autoplay on mobile. And when I click on pause, the music stop, but if I scroll (on PC or mobile) the music start again and again and again.
Here the html code :
<figure>
<audio
controls
src="https://www.blog-motivation.com/wp-content/uploads/2022/04/ولنبلونكم-بشئ-من-الخوف-والجوع-ونقص-من-الاموال-والانفس-والثمرات-وبشر-الصابرين-اسلام-صبحي.mp3" autoplay>
</audio>
thank you
It is to not use autoplay because it could disturb some peoples, but if you want your audio with autoplay it is better to put source to another tag like this:
<audio controls autoplay>
<source src="https://www.blog-motivation.com/wp-content/uploads/2022/04/ولنبلونكم-بشئ-من-الخوف-والجوع-ونقص-من-الاموال-والانفس-والثمرات-وبشر-الصابرين-اسلام-صبحي.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
It is also possible that your bowser is Chrome and this browser blocs automatically autoplay. To control autoplay in Chrome go here.
Refer here : Audio Tag Autoplay Not working in mobile
Seems autoplay in chrome we need to use resume. it works in Firefox / chrome and target mobile / browser devices.
I am trying to play an mp4 file I have stored locally on my computer (when I play it with quicktime it works perfectly). For some reason however I can't get it to work with sound. If I include the 'muted' keyword, the mp4 plays, however with no sound (makes sense). However if I remove the 'muted' keyword, it doesn't play at all.
Any ideas what I am doing wrong?
Here is my code:
<video id="introVideo" width="50%" height="100%" autoplay loop muted>
<source src="../static/myvideo.mp4" type="video/mp4">
</video>
Did you tried with another web browser? Because autoplay is not allowed and even more on sounds with Chrome
This may be a little late, but starting in Chrome 66 autoplay doesn't work unless the muted attribute is included.
So in Chrome you can autoplay a muted video or autoplay won't work.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
Edit:
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html
Search for 'autoplay' in the chromium blog link.
I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I have an HTML5 video embeded in a portfolio I want to autoplay & be muted until sound is initiated, so when a user is scrolling down the page it's already playing but there isn't annoying sound for the user. It is working fine on all browsers on my desktop and tablet, however on iPhone mobile the sound is permanently muted, even when a user tries to adjust the volume. Here here's the code I am using, is there some javascript I can implement/use instead that will solve this?
<video id="cla-generic" preload="auto" onclick="this.paused?this.play():this.pause()" autoplay controls muted loop>
<source src="video.mp4"/>
</video>
Autoplay does not work on iOS and android.
Thats why you are getting no sound.
Take a look at this thread:
iPhone HTML5 Audio tag not working
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.