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!
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 am using xamarin.forms webview and have implemented video tag in my html5 code to play video.
I test it on IOS and Android. None of both play the video. What I am doing wrong?, I read on some SO set hardware acceleration. Someone please help me how this thing work.
Testing code for playing video
<p>testing from 3:49</p> <video width='320' height='240' controls> <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'> Your browser does not support the video tag. </video>
<p>testing from 3:49</p> <video width='320' height='240' controls> <source src='https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm' type='video/mp4'> Your browser does not support the video tag. </video>
What is wrong in my case is I have isEnable property false in WebView. After set it True, it's working fine.
If you still have some issue, try to enable HardwareAccelerate in Mainfest of Android app.
I have a video on this page:
https://job.id/2044/telemarketing-executive-kota-bekasi
On all devices & browsers it works fine except Google Chrome on Android. The poster image does not show. Any suggestion how to get poster image to show?
Videojs viewed using Chrome on Android
Videojs viewed using other browser on Android
The video emdedded as:
<video id="video-1"
class="vjs-tech"
preload="auto"
data-setup="{fluid: true}"
poster="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/thumbs-cce3c4bb-9b00-4af9-8cb0-07b07201886c-00001.png">
<source src="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/mp4-cce3c4bb-9b00-4af9-8cb0-07b07201886c.mp4" type="video/mp4">
<source src="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/hls-cce3c4bb-9b00-4af9-8cb0-07b07201886c.ts" type="video/hls">
<source src="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/webm-cce3c4bb-9b00-4af9-8cb0-07b07201886c.webm" type="video/webm">
<p class="vjs-no-js">
blah..
</p>
</video>
Try below.
data-setup='{"fluid": true, "aspectRatio": "16:9"}'.
It's fixed in video.js 5.13 (per-release), but here fluid mode is collapsing the player on Android on cellular networks because Chrome overrides preload to node.
Had the same issue. In Chrome the poster would flash for a split second and then disappear. Fixed it by setting preload to false: preload="false"
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/
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!