I have enabled controls in my video tag so that users can unmute the video when it is playing on Desktop, the issue I have having is that on Android it continues to play muted with control option to unmute, also on iOS, it plays unmuted by default.
My code is:
<video id="player" width="430" height="236" style="position:absolute; top:7px; left:52px;" poster="movie.jpg" muted autoplay controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<img width="430" height="236" style="position:absolute; top:7px; left:52px;" src="movie.jpg" />
</video>
I can't find any answer anywhere. Desktop works fine.
on iOS devices you can't mute or change volume HTML video (:
http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/
Related
I come today with a 'fairly easy' question around using video.
I have used this before and it seems to be working on Android devices. However, I just recently realised that the same video won't work on any Apple device.
My initial thought was around the video format (which is currently MP4), so I added a 'webm' back-up. MP4 should be enough, but I just wanted to give it a try (unsuccessfully)
Am I missing something? Do I need an specific format to be able to display a video on Apple devices?
<video class="intro-header-mobile" playsinline autoplay loop muted preload="auto" width="100%" height="100%">
<source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.mp4" type="video/mp4">
<source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.webm" type="video/webm">
</video>
Thank you everyone!
Diana
I encountered a problem while trying to use a background video on mobile. Everything works just fine on Chrome and Opera but whenever I try to open the webpage on firefox for android it won't start. It's there but autoplay won't start for some reasons. Can you help me figure out why?
<video width="100%" height="100%" autoplay muted loop>
<source src="images/ECLYPSODark_Side.mp4" type=video/mp4>
<source src="images/ECLYPSODark_Side.ogv" type=video/ogg>
<source src="images/ECLYPSODark_Side.webm" type=video/webm>
</video>
I found a solution to it. If you put the video on mute it autoplays, otherwise it doesn't!
This is driving me NUTS!
I have simple HTML5 video player that won't autoplay on Android.
Here a sample. This WON`T autoplay
<video autoplay muted loop>
<source src="./image/stories/boomerang_stories.mp4" type="video/mp4">
<p>Your browser does not support the video element.</p>
</video>
http://franco.gcj.io/index2.html
The bizarre thing is, it's the same code from here, and this one works.
<video autoplay muted loop>
<source src="chrome-clip.mp4" type="video/mp4">
<p>Your browser does not support the video element.</p>
</video>
https://googlechrome.github.io/samples/muted-autoplay/
Am I missing something really obvious? The only variable I can think about is the video size.
Could any one point me to a working cordova plugin that plays hls/m3u8 streams on android ? I tried using JW Player and html5 video tag and both didn't work!Thanks in advance.
<video id="myVideoTag" width="320" height="250" onerror="playbackFailed(event)" poster="http://www.freeiconspng.com/uploads/video-play-icon-26.gif" autobuffer controls autoplay>
<source id="mp4" src="http://www.nacentapps.com/m3u8/index.m3u8" type="video/mp4">
On my website (ryancreason.com) my VideoJS player at the top of the page works to play Youtube videos with YouTubeJS, unless I'm on my mobile device (android). The loading icon happens, but the player just stays blank. I've tried searching for a reason & fix, but to no avail. Any ideas? Here is the code for my player:
<video id="videoSamples" class="video-js video-js-small vjs-default-skin" autoplay muted loop preload="auto" playsInline quality="" width="100%" height="auto" data-setup='{ "techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=nNpg1LD1t_Y" }'>
</video>
Thanks in advance for any advice!