HTML5 video won't play in Chrome only
With some help from another person, we figured out it was an issue of ordering the source files within the HTML file. I learned that browsers accept the first usable format, and their seems to be an issue with the .m4v file, so I started with the .mp4, then .webm. Here's the order that works in Safari (even on my iPhone 5), Firefox, and Chrome:
<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
<!-- M4V for Apple -->
<source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
<!-- Subtitles -->
<track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
<track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
<!-- Image as a last resort -->
<img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
Now, I'll have to re-check the encoding on the m4v file (perhaps an issue of Baseline vs Main, High, etc.).
html5 video issue with chrome
This is a solution I found That worked for my case,
First, embed the video in your html:
<video id="videoId" width="100%" autoplay loop>
<source src="main.webm" type="video/webm">
<source src="main.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Then detect if the Browser is chrome:
var isChrome = !!window.chrome;
var isIE = /*@cc_on!@*/false;
If its chrome, replace the video with webm version.
(For those who haven't faced the problem themselves:
if you embed both mp4 and webm , chrome will not play any of them, so you have to embed "webm" only)
if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}
And as for IE:
In my case I replaced the html5 video with an image:
if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}
HTML5 video not playing only in chrome
well, the problem really was ssl.
I just activated ssl on my download host and the video played nice and easy.
thank you so much for your hint rank. if this link was not: https://w3schools.com/html/tryit.asp?filename=tryhtml5_video
i still was searching for the problem on my website.
Html5 Video Not Working Chrome
If your img
folder is inside the same folder where your HTML is. You should remove the first slash. Try this out:
<video width="1920" height="1080" controls autoplay id="video-background">
<source src="img/reel.mp4" type="video/mp4">
<source src="img/reel.webm" type="video/webm">
Sorry, your browser doesn't support HTML5 video.
</video>
Hope it helps!
HTML5 video problems on Safari
This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.
You could workaround that issue by either
- Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
- On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
- On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its
appendStream()
method. But no browsers supports it yet...
*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.
Related Topics
Is It Ok to Have Multiple HTML Forms with The Same Name
Download Webpage and Dependencies, Including CSS Images
Make a List Item Clickable (HTML/CSS)
What Are All The Differences Between Src and Data-Src Attributes
How to Create Chat Bubbles Like Facebook Messenger
How to Prevent Text from Overflowing in CSS
How to Replace Radio Buttons with Images
CSS: Outline-Offset Alternative for Ie
Slant The Top of a Div Using CSS Without Skewing Text
How Organize Pagination with a Large Number of Pages in Django Project
How to Squircle an App Icon Image with Just CSS
How to Create a Curved Speech Bubble
Insert HTML with Scripts That Should Run
How to Play Shoutcast Internet Radio Streams with HTML5
Svg Animation Delay on Each Repetition