I'm adding video to my website and this works perfect on desktop and on Android Chrome browsers. On iOS Safari however, the video is not shown, it only shows a play button, and not a preview of the video like other browsers.
If I click the play button, it will play the video appears and plays as expected. I am unsure why iOS safari won't show a preview of the video like other browsers and I'd like to resolve it. I have tried disabling and enabling controls, getting rid rid of the jQuery click function entirely and trying a different video. If I were to decide remove the controls, it would look like an empty box and would only work if I clicked in the space the video would be.
Help is appreciated.
HTML
<div class="row video-row">
<div class="col-sm-12">
<div class="vid-wrapper">
<video class="video" controls playsinline>
<source src="/public/video/grapevine.mp4" type="video/mp4">
<source src="/public/video/video/grapevine.ogg" type="video/ogg">
Sorry, your browser does not support this video.
</video>
</div><!-- END WRAPPER -->
</div><!-- END COL -->
</div><!-- END ROW -->
I know this sounds counterproductive, but if you add autoplay the iOS browser will add an "image". Basically autoplay on iOS will initiate the play (like you've clicked play), but won't actually play (like it's paused on the first frame). This may only work in some contexts, for instance if the video API is being called to load the video with an eventlistener, it will actually autoplay.
UPDATE:
Actually, I believe you are looking for poster="../img.jpg" where you are simply defining the poster image in an attribute on the video tag. I'll have to define, create and host the images one way or another.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes
Related
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/
MIME type is accepted, I've checked.
Here is how it is looking like: https://trello-attachments.s3.amazonaws.com/5441bde46b6fcb86daf55d73/594x351/122b8cad9f5824c44fa25fb242569312/upload_5_14_2015_at_5_10_18_PM.png
Here is the website in question (go to animation in menu): www.ivocunha.com
Here is the code I'm using:
<video width="100%" height="100%" controls autoplay loop class="bl-box fancybox-effects-d" title="Walk">
<source src="img/animation/walk.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Why doesn't it autoplay?
Firstly you are using section tags to wrap your video in you should not use sections for content that does not have a heading. It is not a wrapper.
as for your video remove auto play because they are auto playing by the looks of it but using auto play within your video tag triggers auto play from page entry and they are all playing at the same time.
you then want to use your jquery and create an on hover that will play your video and pause it on exit. your code doesnt seem to be doing that at all on your site instead its only trigering for points.
I would give this a read over so you can see how to use the api properly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
I am currently making a static site that makes use of a .mp4 video. I am using Middleman and hosting with Heroku (free plan). On my local server everything works wonderfully, but in the deployed Heroku version the video appears as a black box. In Safari and Firefox there is no container at all. All my other assets seem to be loading nicely. The video is 5.9 mb. Any idea what is going on here? Thank you in advance!!
<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video>
In theory, if you do not specify a 'poster' image to display before the video starts, the browser should display the first frame of the video:
http://www.w3schools.com/tags/att_video_poster.asp
In practice browsers seem to implement this inconsistently, and I have seen some mobile devices cases where certain videos display the first frame and others a black box, even for the same video types.
To avoid the issue you can specify your own image to be displayed using the mechanism mentioned in the link above - this should work consistently across browsers. The HTML will look something like:
<video class="vid-home" controls poster="yourImage.png" autoplay loop muted>
<source src="/videos/home.mp4" type="video/mp4">
Your browser does not support the video tag or format.
</video>
My video poster appears in Chrome / Firefox but is not displaying in Safari. My play button appears and I can play the video, but the poster is a no show. Mark up is below. Any thoughts?
<video id="video" controls poster="/assets/img/background/simon.jpg">
<source src="/assets/img/video/want-it.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="/assets/img/video/want-it.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<object data="" type="" class="simon">
<img src='/assets/img/background/simon.jpg' title="Your browser does not support video">
</object>
</video>
Thats coz its the default safari behaviour they load the video as soon as its first frame is ready to play. one thing that temporarily shows the poster is to set the preload attribute to none on the video tag. preload="none" but again the poster will go away as soon as the video disappears. Following is a hacky way I did it in React but you can adjust it for any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.