I have a website which shows some movies online. I'm using hls.js version 0.12.4 for streaming my videos and every thing works fine most of the time, but occasionally when our users use chrome, the movie's audio goes out of sync with the right frame of video and this asynchronism get worse and worse till refresh the browser. how can I fix this issue?
does anybody know that upgrading to last hls.js version solve the problem or not?
It may be a problem with the version of Chrome that you are using. Google has documented this problem happening with the embedded media player in Chrome(Google Chrome bug= 1018904, Chrome version 78.0.3904.90)
Due to a fairly recent update, Chrome no longer will autoplay media content such as video if it tries to start in a tab or window which does not have focus.
There are a few sites, including my own - which rely on switching then playing videos in the background as a music player. This has been broken by Chrome, with their idea being that it prevents annoying videos from playing.
I'm reluctant to even consider building a chrome extension to circumvent this (if that would even work), but would like to hear how if possible. Is there any way to get around this annoying issue?
edit: according to this reddit post it may not be Chrome, but YouTube's chrome specific implementation...
edit2: this Chrome issue states that “Once a tab / RenderFrame has ever played media before, it’s allowed to continue to autoplay/autoload indefinitely; this is to support playlist type applications.” - Perhaps if somehow a 'RenderFrame' contains all future media which is also loaded by AJAX this will work... whatever a render frame is (Since as noted in the comments, a page reload/change does not count as the user having allowed autoplay.)
We created a little chat client in our office that runs in the browser. It handles people posting pictures and gifs and embeds them. Recently we added support for imgur and gfycat's html 5 video (it auto converts gifs to mp4/webm). An unintented side effect of this is now anyone using chrome or firefox will find that their monitor will never turn off.
You can see in powercfg the culprit is these videos:
C:\WINDOWS\system32>powercfg /requests
DISPLAY:
[PROCESS] \Device\HarddiskVolume2\Program Files (x86)\Google\Chrome\Application\chrome.exe
Playing video
[PROCESS] \Device\HarddiskVolume2\Program Files (x86)\Mozilla Firefox\firefox.exe
If you pause the videos, the entries in powercfg disappear. Switching to another tab, minimizing chrome, even locking the screen don't allow the system to turn the monitor off. Internet Explorer seems to be the only browser that behaves like you'd expect and only prevents sleep when a video is fullscreen.
Is there some way to mark a video tag as 'unimportant' and basically tell the browser that it's OK to let the computer sleep while this video is playing?
It seems there is a bug in Google Chrome 38 (current release as of this writing) that causes the screen saver to be suppressed when playing HTML5 video. Normally, screensaver suppression should only occur when the video is playing in full-screen mode.
This issue appears to be resolved in the beta release of Google Chrome version 39 as it looks like a temporary fix was made.
I'm having issues with firefox 17.0.1 on a Windows OS on loading multiple Vimeo videos.
It's a weird bug that I cannot figure out, it only seems to be able to replicated using this operating system and browser.
The problem is there are many videos embedded using Vimeo, and it only seems to load the first two videos, then a little more down the page it loads some black boxes.
Just wondering if anyone else has the same issue, and a possible fix.
AFAIK, Firefox intentionally runs only Flash objects that are visible (and runs other ones when they become visible during scrolling). This is for performance reasons.
I'm using jQuery to dynamically write <video> objects, and running videojs to init them. After I play a video, SOMETIMES when I try to play it again, it just won't play, and from that point on, even after refreshing the page, no videos will play. Each time, the <video> object renders, but the video just doesn't play. Nothing is written to the console. There don't appear to be any errors. Restarting Chrome resolves the issue, but only momentarily. After playing a few videos, the issue comes back again.
I found that closing other tabs in Chrome does indeed fix the problem, so it appears to be some kind of memory issue.
I'm running Chrome 19.0.1084.46
Exactly how many video tags to you have? What do they look like? Do they include preload='none' attribute? Are the source videos all on the server?
I ask because if you have more than six video tags on a single page pointing to the same source server then you could be experiencing "connection starvation":
Chrome allows only six open connections to a single server (based on DNS name in the URL)
the html5 video tag's preload attribute default value is 'auto'
Chrome's auto behavior is to preload some data and leave the connection open ready to pull more data for the video
So, with more than six video tags on a single page pointing to a single server, the videos will not play. To resolve this particular problem, set the preload attribute to 'none'
Stu is correct. But sometimes, in my experience, Chrome ignores the preload="none" attribute and goes ahead and opens a connection anyway. I've had much problem with this when developing a site which had many smaller videos on it. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text does not even render)) My solution was to build an own preloader which loads the images. This made sure I could control at least when the images (which was the most crucial aspect from a design point of view) was loaded.
That solved the problem with images not showing but the problem still remained. So the best solution is to set up subdomains pointing to the same server, like: v1.server.com, v2.server.com, and so on. This means you won't have to move your files and you get the benefit from enabling browsers to have more open connections. Watch out for increased dns lookup time though.
There is a known bug with Chrome. It will not play the same video in multiple tabs at the same time. This is probably what you are running into if you are a developer and happen to have your page open in two tabs at the same time.
The bug has been known for almost 5 years as of this writing. Feel free to visit the Chromium bug report and star the issue. Hopefully it will increase in priority for the Chrome devs.
In the meanwhile, a workaround is to use a random query parameter in your video src. For example, instead of <video src="vid.mp4">, use <video src="vid.mp4?_u=1253412">. This will break Chrome's caching mechanism and allow the same video to be streamed to two different tabs at the same time.
I had a similar but related issue which I can expand on slightly here.
I had 14 different small videos on a page but only 2 were available at a time. Setting preload = 'none' didn't fix the issue so I also used a data attribute to store the src, and remove the src for all videos that aren't currently being viewed.