Javascript-how does one enable the video player to play the second tab when two tabs are opened?

I added a webpage player to my blog footer. Because my blog has AJAX, it will not cause music interruption when switching pages. But today I found a new problem, that is, when I opened my blog (that is, the music has started playing... I added a webpage player to my blog footer.

Because my blog has AJAX, it will not cause music interruption when switching pages.

But today I found a new problem, that is, when I have opened my blog (that is, music has started playing), I open a new tab, after loading my blog, the music player will still play. that is to say, the two tabs are playing the music on my blog. it sounds messy, you must manually pause the music on the second tab.

I want to enable the player to play music automatically when I open the second tab, just like Netease Cloud Music. But I can't think of what method to use... Latency _> latency

Beginners said they would not ask for answers via qwq

Reply content:

I added a webpage player to my blog footer.

Because my blog has AJAX, it will not cause music interruption when switching pages.

But today I found a new problem, that is, when I have opened my blog (that is, music has started playing), I open a new tab, after loading my blog, the music player will still play. that is to say, the two tabs are playing the music on my blog. it sounds messy, you must manually pause the music on the second tab.

I want to enable the player to play music automatically when I open the second tab, just like Netease Cloud Music. But I can't think of what method to use... Latency _> latency

Beginners said they would not ask for answers via qwq

The principle is to use localstorage.
But this is not enough, and the most important thing is that.How do I know when another page is opened and the page immediately stops music?
Let's test:
Simulate a normal process. open the page first.A.html. Assume that this is playing music ....

    
      PageScript window. onload = function () {window. addEventListener ('store', function () {console. log (arguments) ;}, false);} scriptPlaying music...

Then, when we open a new page,B.html

    
      Page BScript window. onload = function () {localstorage.setitem('open', 'B .html');} scriptNow I am playing music on this page...

At this time, you will find that the pageA.htmlAObject. That's right.

In this way. According to the obtainedkey,valueAnd the new pageurl.A.htmlYou can immediately know what you want to do.

The core of this issue is how to know how to open a new page in time? How can I close the music of this page in time while opening a new page? The difficulty lies in the "timeliness.

Make a flag in sessionStorage.

Use cookies or Html5 localStorage to make a local tag

When a user opens your blog and plays music, the browserlocalStorageOrcookiesThe status of the current player.
When you open your blog in the same browser, you canlocalStorageOrcookiesTo determine whether to play again.

Simply add an event to window, $ (window). on ('blur', function (){
Console. log ('Stop music );
})
$ (Window). on ('focal ', function (){
Console. log ('Start music ');
})