I'm having trouble making an MP4 video autoplay in my HTML5 page in IE9.
From reading other stack overflow posts on the subject I know that it should autoplay, especially as I've already used qt-faststart on the video to move the file info to the headers, but all I'm getting is the fallback image when I look at the page in IE9 (XP).
I'm wondering if the fact that there is no audio track at all on the video could be causing IE9 to not want to autostart it? Wouldn't be the quirkiest thing IE had ever done...
The code for my video element is as follows:
<video autoplay loop preload width="1200" height="510" poster="/path/to/header-video-poster.png" class="hero__subsection__image">
<source src="/path/to/video.mp4" type="video/mp4">
<img src="/path/to/header-video-poster.png" alt="Fallback">
</video>
Related
I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
On my wordpress site, when adding a video via the standard HTML Video tag, and then adding autoplay to it - when i then reload the page it sure autoplays but after a few seconds another instance starts the audio and then the audios are overlapping each other. How can i prevent this? This is my simple code.
<video width="400" controls autoplay>
<source src="/uploads/2018/04/ML_video-converted-with-Clipchamp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Whats going on here?
I just finished reading this article on why autoplaying video is bad http://www.punkchip.com/autoplay-is-bad-for-all-users/. I knew autoplaying was a bad practice but this video gave me good, tangible reasons why its not a best practice.
My question, sites like YouTube, KickStarter and ProductHunt DO have autoplaying video, the catch is the audio is muted.
I'm working on a site for a client now, more specifically a page in which the client might request the video be autoplayed. Obviously this behavior would not be acceptable on with sound, but how about if I muted the sound by default and provided a volume button like ProductHunt?
And just replaced the video with a poster image on mobile? Thoughts?
Thanks.
If you will be using the HTML5 player native to the browser. HTML5 video does provide the ability to mute a video and autoplay it. You simply have to include the 'muted' and 'autoplay' properties in your video tags in addition to the 'controls' property so that users have the ability to play,pause, unmute etc, as an example, the code would look like this:
<html>
<body>
<video width="320" height="240" autoplay controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The muted attribute of the video tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
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'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.