I am loading and autostarting a couple of video's on a webpage. They are embedded using the HTML5 video tag. When I click on one of the video's, they are opened again, but now in a bigger screen. Firefox plays the second video fine, but Chrome doesn't load the second one.
I guess the problem is that Chrome doesn't want to play one video twice simultaneously. What is the reason, and is there a workaround?
Chrome only opens one connection to the server to download a resource. Once the first video is opened all subsequent connections will be ignored until that connection is closed. And it seems it leaves connections to mp4's (and possibly other video types) open for some reason, maybe for streaming?
Even on separate tabs or websites, if the resource is the same it will not load. One method may be to destroy the video on the current page, then open it in the new window.
Related
I have a PHP webpage I created for our office and it automatically refreshes every minute looking for new changes in a bunch of different databases. There are many different notifications I play in the form of wav files to our end users when changes are made.
For example I notify the employees on these events:
Their AM Break
Their Lunch
Their PM Break
When a new article is posted to our KB
BUT, most importantly:
I have an IFrame within this same page and the IFrame refreshes every 5 seconds looking for changes in a special table called "override_request".
When someone clicks a button requesting for an override a sound will alarm for a large group of employees to accept the override. The sound will repeat every 5 seconds until someone accepts the override. This may sound annoying but this is a call center and every 5 seconds that someone waits while a customer is on the phone is crucial.
In earlier versions of chrome background audio would play no matter what tab or application you were in. Around version 54.X Chrome disabled the background audio by default and later provided a flag called (disable-gesture-requirement-for-media-playback)
With the latest release of Google Chrome version 60.X up they have removed the (disable-gesture-requirement-for-media-playback) and provided another flag called (Autoplay Policy). There are two big differences between the new flag and the old flag.
First, the new flag allows for background audio to play only if background audio is played prior to switching tabs. That's not the problem, I created a blank audio file to load upon logging into the site and it resolved that issue.
Now, the problem:
Once the new flag (Autoplay Policy) recognizes the background audio the first time upon login, it allows the audio to play in the background until the page performs a refresh! Once the page automatically refreshes it resets the flag that was allowing the background audio. Chrome is recognizing the fact that the page refreshed and the user wasn't on the page at time of refresh so it blocks any further background audio from that tab until it is brought back into the foreground.
Does anyone know of another flag or javascript that will allow the page refresh and keep the background audio notifications alive?
I had very similar problem. I don't have a solution but my work around involved running a portable version of chromium 53.0.2767.0. It allows me to have background audio play in any open tab without any focus. I imagine you had to do something similar.
IE at its best:
There is a USB stick with an HTML document on it. When the user opens it in IE11 and scripts are blocked, a prompt appears to allow those scripts to run.
When you click on allow, the site seems to get reloaded, but it also looks like a new tab is opened/ closed.
As soon as JS is enabled, you get redirected to an online version of the site.
Now, on the site there is a video which starts autoplaying after 10 seconds. But in IE11, a few seconds later the same video starts playing parallely so you here the sound twice.
When you check the DOM and remove the <video> tag (there is only 1), one video stops playing. The one that started later though keeps playing. Even when I visit another website the video keeps playing.
Only closing the browser stops the video.
This behaviour does not occur when I allow scripts to be executed directly.
Using video.js and jQuery.
Any ideas?
HTML Elements do not require JavaScript and/or ActiveX for serving their content. They are automated.
After the page is loaded and rendered as plain HTML, allowing JavaScript, will trigger DOM construction and re-render the content. However, DOM may duplicate the instance of media object and start running a parallel stream, that is, a dupe of the stream already initiated by HTML automation. !Not visible by DOM.
So, there's no new tab being opened or failing to close, it's simply an HTML Automated instance handling the initial stream.
And this will happen only when running HTML pages locally.
Finally:
The best way of avoiding this - expected but unwanted behavior - would be to:
Set the Video Element "autoplay" property to "false".
p.s.:
About the following issue of which you say: "As soon as JS is enabled, you get redirected to an online version of the site."
That's something no browser can or will do for you on its own. So you'll have to remove the code that is triggering the browser navigation to the online content yourself.
Good luck.
On my website, I'd like to be able to stop the video loading. Can I do it with jquery? What're my options?
The need is that my website has many videos, when a user with a limited internet connection wanna see a one-hour video then decides that he wants quit the video page (ajax only is performed), the video continues its loading anyway, so if does this with two or three videos his browser will freeze to death. So unless he refreshes the page, the video loading goes on til it's done.
Given that my web's based on apache2, symfony2/php5, projekktor/jquery
Check this answer - HTML5 Video: Force abort of buffering
Apparently removing the value of the src attribute will cause the video to stop loading/buffering
The OP also suggested stopping the video first to prevent any errors in the Browser console
One way would be to split the page into multiple single video pages. It still doesn't solve the problem completely but at least user's resources are used in to a smaller extent.
Another idea that I've had is to set the source of the video to an empty string when the user stops the video. As far as I've read online it frees up the space and leaves the video blank. There should also be a button to set the source to the original path should the user want to play the video once again.
The second idea provokes minor issues such as being unable to continue the video from the moment the user stopped it but I recon it's still better than taking up user's connection to load it.
Why don't you use the API to play&pause the video: API
player.setPlayPause():Boolean
Sets the player to pause if its playing or vis versa.
Ore one of these:
player.setPlay():Boolean
Sets the player to play. If its already playing no changes apply.
player.setPause():Boolean
Sets the player to pause . If its already paused no changes apply.
player.setStop():Boolean
Sets the player to stop . Will cause the playback component to stop immediately and displays the current item´s poster image. Furthermore the start-button shows up.
Say I want to make a chrome extension that plays audio or video that you can play/pause. Extension page is being open from a popup.
It should be available on any tab that you go to.
As I understand chrome limits you to the background page that is being run like a separate tab, but cannot be visible and a popup page that gets displayed once you click on the icon.
So I wanted to know how would you go on about it.
Insofar I see it in hackish ways like:
background -> event -> popup (audio context + "fake" audio buffer player)
background -> localStorage -> popup (same thing)
Are there alternative solutions to this?
Not really. If you want to run an audio independently of any open tab, you have to run it in the background page.
Then you can show any kind of UI, for instance in the popup, with your custom controls. Then, use Messaging to control the background page / update your controls in the UI.
I'm developing an HTML5 application (a game), that automatically preloads 5 video files. I'm able to do so correctly on Safari for PC, so there are no overlooked problems with file formats, codecs or such. The load fails on an iPad. As an official guide for video on iOS puts it:
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
Does this mean, that I have no means to initiate the loading of video after a user initiated action, if that action hasn't been tied to a video element (user clicked on a regular div — I request loading and displaying of a video, compared to the user actually clicking on a video element to load and play that particular element)?
It means that if a user has not pressed play, you can't use the methods.
After further inspection, it turns out, that video.load() and video.play() methods can be called from any onClick handler for any <div> element (that probably stays true throughout every html element, that can receive click events.
The problem with preloading 5 video files on iPad is that it can only preload 1 and will flush any video data, if new video.load() request for a different video is issued, thus you cannot preload 5 videos, but you can make them into single one and then preload that single video.