I have a full width background video with autoplay and loop propreties and works really good on desktop but in mobile video dont show and dont start... just show a black screen
I need to fix this for mobile, if that's not possible to put video working on mobile I can put a background image on mobile
<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
adding playsinline attribute to the video tag fixed the issue for me.
according to a good google search, on mobile the Video element falls back to a poster...
be mind full of video size so they user will not encore massive data usage charges and to maintain a responsive site.
<video playsinline autoplay loop muted id="myVideo"></video>
The Autoplay tag on mobile is generally not supported - this is to avoid users incurring data transfer costs as video files are large and can eat into data limits.
The poster tag should work fine, however, as I think you noted in your last comment.
Turns out the video actually plays - but it's weird how that happens!
First of all, I'm testing on Android 5.1.1.
Alright, here's the situation:
On load, the video doesn't play but instead displays the fallback poster image.
I had given up on the video thing, but when I was navigating the site and at some point decided I wanted to go back Home, I navigated to the Homepage and the video was playing! I tried refreshing the page, and the video didn't play on load but instead got the poster image!
What could be happening?
I figured just clicking the phone's back button to navigate to the homepage still didn't play the video, but explicitly clicking the home link did!
So I gave it another shot - refreshed the page, video didn't play, clicked the home link and the video started playing on load!
This is the structure of my home link: <img src="path-to-logo" />
Can somebody explain what could be happening?
Related
I put a video as a header in my website. It looks quite OK on Chrome/Firefox desktop and Chrome mobile but... does not seem to work on firefox mobile.
I only see a fixed image on my video but the video does not play.
Is there something I can do ?
<video id="my_video" loop muted autoplay>
<source type="video/mp4" src="my_video.mp4"/>
</video>
Generally the autoplay tag is not supported on mobile. That's to avoid users incurring data transfer costs because video files are large and can use up a lot of data.
you can use the 'poster' tag so when the video doesn't play you have an image.
So I've looked over the apple docs and checked that my video will play inline (I am storing the video on s3).
My video on https://themobilecigarlounge.com will play on all devices and browsers with the exception of apple. It will play but not until you click a link and then go back to the homepage.
<video class="video-background" id="backgroundVideo" playsinline="playsinline" autoplay="autoplay" muted="muted"
loop="loop">
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium-new.mp4" type="video/mp4" />
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium.mov" type="video/mp4" />
</video>
Is the code I am inserting it with. What am I missing here? I have all the tags, I stripped the video of its audio track and I have it muted.
This turned out to be an issue with the Meteor framework I was using. I do not understand the root of the problem but it is some sort of rendering issue. I noticed where in one site this function was working perfectly the <video> tag was within a {{#if}} helper.
So I experimented and put the video within an if block that became true 100ms after the page rendered.... This solved the problem but seems hacky. Seems to be some sort of issue with the blaze templates rendering.
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
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.
i have a html5 video embedded in a web page, that appears with a fade when an user clicks on a link.
If i click on play, the timeline cursor jumps to the end, not playing anything.
If i click on the timeline (so seeking) the video starts from the point where i click and plays normally.
I already added the video formats in the .htaccess.
How can i fix this?
On chrome it works as intended.
<video width="660" height="275" controls="controls">
<source type="video/webm" src="video/nev.webm"/>
<source type="video/mp4" src="video/nev.mp4"/>
<source type="video/ogv" src="video/nev.ogv"/>
<source type="video/flash" src="video/nev.flv"/>
</video>
Roby
I fixed changing video converter, i used "Miro Converter" and it was creating this problem, "Any Video Converter" converted the video making it work in firefox.
I think that the problem is the dimension of movies, specially the format. While I was using 600 x 480 px everything play perfect, but beyond of this relation the timeline cursor doesn't works in autoplay unless I " push " the cursor 5 sec. forward .... I also use Miro video converter.