I am trying to play an mp4 file I have stored locally on my computer (when I play it with quicktime it works perfectly). For some reason however I can't get it to work with sound. If I include the 'muted' keyword, the mp4 plays, however with no sound (makes sense). However if I remove the 'muted' keyword, it doesn't play at all.
Any ideas what I am doing wrong?
Here is my code:
<video id="introVideo" width="50%" height="100%" autoplay loop muted>
<source src="../static/myvideo.mp4" type="video/mp4">
</video>
Did you tried with another web browser? Because autoplay is not allowed and even more on sounds with Chrome
This may be a little late, but starting in Chrome 66 autoplay doesn't work unless the muted attribute is included.
So in Chrome you can autoplay a muted video or autoplay won't work.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
Edit:
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html
Search for 'autoplay' in the chromium blog link.
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>
I have a short video that should autoplay in Chrome. I've read plenty about this problem and tried a lot of solutions. Presently my code to play the video is
<video autoplay="true" playsinline muted >
<source src="assets/video/somevideo.webm" type="video/webm" />
</video>
This plays the video, but in an apparently random way. Sometimes the video starts, sometimes not, showing a white screen instead.
The video format is compatible with Chrome ('sometimes' it starts correctly!). The html attributes should be correct, taking into account the limitation of chrome in playing not muted videos.
What could be the problem and how can I play the video, being sure it will always be played?
I've got an autoplaying video which works well on all browsers, except Chrome - which has apparently disabled autoplay video. I've tried some work arounds, but now it just plays for 1-2 seconds and stops entirely.
Here's my code:
<video id="introduction-video" preload="auto" playsinline autoplay muted loop volume="0" poster="/images/videos/video-background.png" width="100%" height="100%">
<source src="/images/videos/Tasman10seconds.mp4" type="video/mp4">
<source src="/images/videos/Tasman10seconds.webm" type="video/webm">
Sorry, your browser does not support HTML5 video.
</video>
<script>$(window).on('load',function(){$('#introduction-video').get(0).play();});</script>
Any help would be greatly appreciated!
For anyone else having this issue, this worked for me..
$(window).bind('load',function(){
'use strict';
$('#introduction-video').trigger('play');
});
This is an old post, but as a quick followup for anyone who ends up here on a search: make sure to check your browser extensions. I was banging my head against this issue in Chrome as well. Then I tried it in incognito mode (where extensions were disabled) and the video played just fine.
I'm not sure which extension was causing the issue. But, that seemed to be the culprit.
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 just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
The video plays without any problems in Safari (haven't tested against earlier versions of iOS, but my only concern there is the autoplay issue?), but on Chrome the only thing I see is the cover image and a play button that doesn't trigger anything. Am I missing something? Do I really need to use JS to get it to work?
Update: It seems there's an issue with playing Webm files with iOS Chrome - I've tried several files from different locations and they seem to be needed to be downloaded first before being able to play.
Google Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. Try to use a code published here.
Build an HTML5 video as usual:
<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
<source src="aurora.webm" type="video/webm"> </source>
<source src="aurora.mp4" type="video/mp4"> </source>
</video>
If previous advise does not help, try to use scripted playback examples video.js and simpl on Github.
Also, read this post dedicated to muted autoplay in mobile browsers. And it must be useful to read Stack Overflow post as well – Efficiently detect if a device will play silent videos.
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
...Update: It seems there's an issue with playing Webm files with iOS
Chrome.
The simplest and best fix is to make sure you declare the mp4 file first and then declare webm in second place (the reverse of your shown order). I believe iOS expects an mp4 as first file in HTML5 video tags. All iOS sees is src="sample.webm" which is not a valid expected MPEG codec so leads to your "...play button that doesn't trigger anything". You got a silent error somewhere.
Try :
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/mp4" src="sample.mp4"></source>
<source type="video/webm" src="sample.webm"></source>
</video>
Side note: Just my opinion but, I think having webm here is redundant since the main supporting system (Google-based tech) can already handle mp4 anyways.
Better to offer those video decoders in browsers [of end-users] a choice of mp4 or ogv (just in case of Firefox).
PS: Auto-play is disabled on most mobile systems due to SIM data allowances. The end-user must choose to play that video. Likely there are clever workarounds on the net, just remember though, this is expected behaviour so is not an issue with your current code.