I just noticed that Chrome (Version 45.0.2454.99 m) basically reloads a video each time it loops. This occurs with even the most narrowed down version of my code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<video autoplay="autoplay" loop="loop">
<source src="myvideo.mp4" type="video/mp4" >
</video>
</body>
</html>
This occurs independently of the hosting technique (tried local, Google drive and 2 classic hosting solutions) AND is not related to cache-control HTTP headers, those only ensuring the video isn't reloaded from the source each time but from the client-cache.
As it seems to be a Chrome bug and I can make this not too visible for the user I could live with that, but still, on airbnb website, they have a header video looping and NOT being reloaded by Chrome. I tried mimicking their HTML which isn't much more complicated than the example above, video gets reloaded on each loop, so I know for sure there must be some kind of workaround for this implemented on their site. Their JS code is minified though, therefore very hard to debug and I don't have even the beginning of a clue on how they do it. So my question would be: has everybody encountered this issue and found a workaround he could share with us ?
This could be caused by having "disabled Cache" ticked in the Chrome Developer Tab.
If not, you can use the App Cache to fix or service worker to load the video from Cache.
This issue was covered here:
Why html5 video loop create request each iteration
Probably fixed in newer version of Chrome
Related
I attempted to add a Hero background video to our website. It's being served from mux.com.
I use it with HLS, but for Chrome it uses Media Source Extensions from what I gather.
I know that for HTML5 video to auto play, it has to be muted also, and I have both parameters over there.
Apparently, on Android Chrome I get behaviour where it freezes on the first frame (black), but doesn't continue and I cannot trace why.
In case of freezing, it still does load the video, just that it's not getting autoplayed.
I am out of clues.
Isolation sandbox:
https://codesandbox.io/s/32yky6x7mq
https://32yky6x7mq.codesandbox.io/
In my attempts, I have reduced this down to simple HTML app with Hls.js library and basic <video> tag where it breaks on mobiles.
How do I get the video to autoplay on mobiles?
P.S. To see exactly what I have tried, please see edit history, as I have been trying lots of things.
On my device specifically, Android Chrome, it's caused by Data Saver.
Disabling Data Saver, the video autoplays.
It's paradoxical, because with Data Saver I expect for the video to not be loaded at all, but it's getting loaded and the autoplay gets interrupted instead - resulting in more waste.
Possibly, there are other settings out there in the wild that prevent autoplay, for instance, couldn't find the exact reasons why iOS is not working. There are hints about playsinline attribute, which I have not tested yet. (Will update when I do)
Worth noting, is Feature-Policy header too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
It didn't help me in my scenario, but it can probably be related with autoplay in other scenarios.
I am creating a html page that will be distributed and run locally. It has a video which is supposed to play on the page. When I run the page though, I receive an error saying Internet Explorer restricted this webpage from running scripts or ActiveX controls.
This will happen to the end users also. What can I do to allow the video to play right away so the warning box does not have to be allowed.
The current code I am using is:
<!DOCTYPE html>
<!-- saved from url=(0024)http://www.abc-defg.com/ -->
<html>
<body>
<div style="text-align:center">
<video id="video1" width="715" autoplay="autoplay">
<source src="images\abc Movie.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
I have the abc-defg is the same length as the company name
According to this MSDN discussion, the answer is no. This is an artifact of loading locally. You'll be fine when you put this on a live web environment. Objects loaded locally are treated differently,from a security standpoint, than hosted objects, so you can expect a completely different scenario when you have this video hosted on a remote web host.
I would like to start off by first saying that I am not a web developer so I apologize if I explain thing poorly.
I am working on a simple in house digital signage solution. We create the show in power point, then save it as a video. We then loop that video on a webpage.
<video autoplay loop muted id="video-bg" preload = "auto"
style="position: fixed; left: 0; bottom: 0; width: 80%;
height: auto; z-index: -100;">
<source src="./test.mp4"
type="video/mp4">
</video>
This is the code used to play the video, extremely basic but it is all we needed.
To update the show we simply overwrite the existing video and when the page auto refreshes the new video is played. This works when the site is being displayed in Chrome. In IE we can not save the file as we receive an error it is in use.
Using process explorer I see that the file is in use by IE but not Chrome.
Is there a difference in how Chrome and IE use a file?
Thanks in advanced to anyone who can help narrow down this problem.
I did not research about this topic but probably Chrome is caching your video and playing it from the cache. However you can try to force the cache behavior, take look at: HTML CACHE and see if it works in I.E.
Add the manifest.cache in your html tag:
<!DOCTYPE HTML>
<html manifest="manifest.cache">
And include the manifest.cache file in your folder:
CACHE MANIFEST
/test.mp4
I hope that I helped you.
Rather than just opening the webpage into the browser we are using The Uniform Server and hosting the page locally on the computer.
Doing this allows us to overwrite the file regardless of the browser we are using.
I recently realized that some mp3 files causes the "seeker" slider of an HTML5 audio control to fail on Firefox and Explorer.
Specifically, I can move the slider to the desired position, but the sound jumps to an incorrect time. Therefore, when the slider comes to the end, the song is already playing, and the current time keeps incrementing.
In addition, the track length (it's supposed to be a fixed value, loaded from the metadata) has a strange behavior given that point: it starts incrementing as the current time...
I found no differences between the files that work correctly and the files that don't (Not even in the codecs), but I suspect is a browser support related issue, since I didn't experience that problem using Chrome.
Just in case, you can download the file here:
http://www.4shared.com/mp3/JzSPjx3Qba/Quartet_12_Mov_1.html
And this is the test code I'm using:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<audio controls="controls" id="player">
<source src="Beethoven - String Quartets/Quartet 12 Mov 1.mp3">
</audio>
</body>
</html>
Thanks!
The system I am working on is set up like this:
Files (in DB) <-> ContentServer <-> Webpage
Say I have a link to a video, and someone clicks that link, the contentserver finds the requested file, generates a Guid to represent that file, and then builds a page which uses the Guid for the "file". This Guid does not have a file extension (naturally).
When using VideoJS in IE and Firefox, this appears to work just fine. However in Chrome it's not working at all. The video doesn't appear to even be loading, much less loading and playing. Below is an example of how I have it set up. Anyone have any ideas how I could make this work on Chrome?
<html>
<head>
<link href="/Video/video-js.css" rel="stylesheet" type="text/css">
<script src="/Video/video.js"></script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source type="video/mp4" src="/content/7cb55f87-b240-45e0-9890-ec383fd019c9"/>
</video>
</body>
</html>
It appears the problem lies in Apple products and Google Chrome not playing nicely with ASP.Net. Chrome and Apple products first send a request for the first two bytes of content. If they don't receive these two bytes - they fail. ASP.Net does not have the capabilities to handle byte-range requests, regardless of whether or not the server it is on can. So, if you are using ASP.Net and you intend on using video, you should account for the fact that you will have to roll your own byte range request handler, or use one of a very few third party extensions that are out there.