I have an autoplay background video that doesn't play when the page loads in Microsoft Edge. The poster is loaded instead. As soon as you click refresh it then starts playing.
The autoplay works in Chrome, Firefox and Safari.
The url is: www.obel-logistik.com
I have un-minified the source for this question.
Any ideas?
Fixed in later versions of Microsoft Edge browser.
Related
Take a video like this:
<video autoPlay controls muted preload="metadata" height="100%" width="100%" playsInline>
<source src="https://video.dailymail.co.uk/video/1418450360/2015/02/1418450360_4056782948001_nerdist--1424015378606.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
It has autoPlay, controls, muted, preload, and playsInline.
On Chrome and Safari, the video will not start until some portion of it enters the user's viewport.
On Firefox, the video plays immediately, regardless of whether or not it is in the viewport.
Why?
Here is a codepen that demonstrates this. You'd have to try it on the various browsers to get a sense of what I'm talking about.
From the support of mozilla:
Some kinds of video can be played by Firefox directly. That uses the built-in HTML5 video player, in combination with the Windows Media Foundation (to decode MP4/H.264 video).
So it is default Firefox. I suggest that you could stop all the videos (mutch better user experience) and start when it is visible with JS or change it to <iframe> so the firefox don't mess it. The support suggest you to change hidden settings that help you control when videos start but this will only affect your browser not the others.
code solution with JS to play only when is visible.
Try Incognito Mode · 2. Disable Hardware Acceleration · 3. Allow Websites to AutoPlay Video · 4. Disable Add-Ons · 5. Clear Browser Cache
I´m trying to autoplay and inline an html5 video on a web page. This works fine in all browsers and all devices (except for some Android devices). However, if you place the video on the lower parts of the page (outside the viewport) and scroll down to it, the video does not autoplay anymore in OSX Safari (version 11). Other browsers like Firefox and Chrome don´t show this problem.
When you scroll down, having the video visible, and refresh the page, the video will autoplay however.
<video id="videoheader" playsinline autoplay="autoplay" muted loop data-flashblockwhitelisted="true" poster="posterimage.jpg">
<source src="video.mp4">
</video>
The website is still in development (and not online yet), but a good example of a page which shows this problem too, is:
http://www.pixomondo.com/
The video's in the lower parts of the page, won´t autoplay in Safari.
It seems that Apple has disabled autoplay feature for html5 video outside the viewport. In older versions of Safari (version 6.1.6) it performed well.
Any suggestions or code examples how to get around this problem?
It looks like your video is autoplay and muted - there is a known issue which is addressed in one of the later Safari release which may addresses this [my bolding]:
Media
Implemented HTMLMediaElement dispatch of the onencrypted event
Fixed autoplay muted videos not playing when outside the viewport
Fixed HTMLTrackElement behavior to match standards
More info on the preview releases here: https://developer.apple.com/safari/technology-preview/release-notes/
You can download the preview releases here to verify if this solves your issue: https://developer.apple.com/safari/download/
Why doesn't my audio tag play in Internet Explorer 11?
It works just fine in Google Chrome.
Here is my HTML:
<audio autoplay src="fail.mp3" type="audio/mpeg"></audio>
According to html5test for IE 11 the audio element should be fully supported, though the Web Audio API is not, which might be the problem in your case.
Appears to me that Firefox has withdrawn support for HTML5 video. Doing a Drupal site, I integrated the Video-js library. Works OK in IE, Chrome, etc. Firefox appears to not throw an error, and attempts to play. If I set autoplay to true, it will play the audio, but the video is missing. You will see a flash of the video content which is a screen half covered with green raster. I have found this display on several other sites that purport to demo HTML5 Video. There are plenty of docs that say FF supports open format but I cannot find one that plays properly, so I have to assume FF has changed.
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_HTML5_audio_and_video
For instance if I put this snippet from the above page in a Web page:
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
The clip apparently loads and there is no error event on the source, but the clip doesn't play and the alternate content is not shown either.
I am wondering if this may be because I am outside of the U.S. or possibly if there is a problem with my Firefox setup.
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).