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.
Related
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
I have been using the following code on my webpage for several years, but it has recently stopped working in Firefox (haven't checked other browsers):
<img src="video.MP4" onerror="this.src='vid.png';"/>
Whenever the src was a video instead of an image the onerror was triggered which displayed a standardized video image in place of the video. Most items were images and still loaded correctly, I just wanted videos to display an image instead.
Now, the browser hangs with the loading icon spinning. The network tab says loading complete, but this element does not load at all, either a placeholder or the video. Possibly it is still trying to download the video and the network tab is incorrect.
Is there any way to fallback on all non-image (particularly video) files to a default image? Thanks.
I'm pretty sure the following code will do what you want it to do, albeit I'm not sure which browsers don't support the video tag, so I haven't tested it.
The img element should be displayed as a fallback if a browser does not support the video tag. The caveat is that I'm not entirely sure whether or not the img element can be used as a fallback, although I'm not sure why it wouldn't.
<video poster='image.jpg'>
<source src='video.mp4' type='video/mp4'>
<img src='image.jpg' />
</video>
I have a question about an embedding a video with a clickable thumbnail. I was about to modify a video tag to display a poster image that is click-to-play:
<video width="569" height="569" controls="controls" poster="images/thumbnail.png" onclick="this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>
However, the video control bar appears overlayed on the poster image when it loads. Is it possible to modify this code so that the control bar only appears once the video starts playing? I could omit the control tag all togeter, but then it would not appear at all.
Let me know if anyone has any ideas or if I could try an alternate approach.
Thanks!
Simply exclude the controls attribute, and then use the onclick event to set it true. If you want to remove them later you would set the attribute to false
<video width="569" height="569" poster="images/thumbnail.png" onclick="this.controls=true;this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>
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.
I am having an issue with getting HTML5 video to autoplay on load into Fancybox.
I have an HTML5 video loaded into a div that is hidden and therefore can't have autoplay enabled in the tag. I then call it one an image click with a Fancybox inline and a ref to the div.
Everything works as it should except I just want the video to play when then Fancybox opens it?? Any ideas would be appreciated.
You can autoplay the video as soon as it is opened in fancybox. The problem with the inline video is that if you close it then it will pause and the next time you open it in fancybox, the video will be open in the same place/track it was when closed ... and it won't "auto-resume" (the action is autoplay on start).
Anyway, this option should do the trick:
'onComplete': function(){
$("#myVideo").find('video').attr('autoplay','autoplay');
}
#myVideo is the ID of the DIV, which contains the video tag.
Since you are using the inline method, it would worth to have a look at one existing bug and its workaround here.
Eventually, you may prefer to use the API option 'content' instead, to avoid the inline type issues:
'content': '<video autoplay="autoplay" preload="none" poster="path/image.jpg" width="640" height="360" controls="controls"><source autoplay="autoplay" src="path/video.ogg" type="video/ogg">your browser does not support the HTML 5 video tag</video>'