MP3 audio player HTML - html

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.

Related

Prevent a video to open in the apple video player

On iPhones when playing a video in safari the standard is that apple opens a fullscreen video player and plays the video there like here:
In my case i dont want that, i just want to let the video play in the html in safari without opening the videoplayer:
How do you prevent a video to open in the apple standard video player?
Is it possible?
This is the video:
<video id="video-m-1" class="video" preload="none" poster="dist/Images/Weltkugel_Initial_Mobile_v2.png">
<source src="dist/Videos/Kugel-Ganz-1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Apple has finally enabled the playsinline attribute on iOS 10, so this will work:
<video src="file.mp4" playsinline>
the video will not be opened in the video player, it will lay inline in the html

HTML5 video webOS

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>

HTML Video plays double when autoplay is enabled

On my wordpress site, when adding a video via the standard HTML Video tag, and then adding autoplay to it - when i then reload the page it sure autoplays but after a few seconds another instance starts the audio and then the audios are overlapping each other. How can i prevent this? This is my simple code.
<video width="400" controls autoplay>
<source src="/uploads/2018/04/ML_video-converted-with-Clipchamp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Whats going on here?

HTML5 video I want autoplay & muted until sound is initiated, but is permanently muted on iPhone Mobile

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

Latest IOS10 Autoplay Enable

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.