javascript - How to get videojs to unload automatically - Stack Overflow

admin管理员组

文章数量:1406926

I'm currently using VideoJS in a Rails application (where there is a video player on every page) to display videos and I'm encountering a very strange problem:

The player works perfectly fine on the first page I visit but if I play the video and visit another page, the video from the first page keeps playing in the background even though the page isn't open anymore (you can hear the audio) and the video on the page you visited doesn't initialize properly (options aren't applied which means the video can't be played because controls are an option) and the console reads VIDEOJS: WARN: Player "player" is already initialised. Options will not be applied.

How to I get VideoJS to unload itself when the user leaves the page and why does it keep playing in the first place, the HTML5 video player didn't do that before.

Is the best way around this to get VideoJS to reload itself manually on page load? If so, how can that be done?

Note: If I navigate to any other page within the website the videos continue to not initialize, but if I reload the page, any page, the video on said page works again.

Note 2: Turns out that the onbeforeunload javascript event doesn't even fire if I click a link to another page, it only fires if you're going to a whole different website, so I can't even use that to .dispose() VideoJS on page unload.

Note 3: .reset() doesn't seem to be working either.

I'm currently using VideoJS in a Rails application (where there is a video player on every page) to display videos and I'm encountering a very strange problem:

The player works perfectly fine on the first page I visit but if I play the video and visit another page, the video from the first page keeps playing in the background even though the page isn't open anymore (you can hear the audio) and the video on the page you visited doesn't initialize properly (options aren't applied which means the video can't be played because controls are an option) and the console reads VIDEOJS: WARN: Player "player" is already initialised. Options will not be applied.

How to I get VideoJS to unload itself when the user leaves the page and why does it keep playing in the first place, the HTML5 video player didn't do that before.

Is the best way around this to get VideoJS to reload itself manually on page load? If so, how can that be done?

Note: If I navigate to any other page within the website the videos continue to not initialize, but if I reload the page, any page, the video on said page works again.

Note 2: Turns out that the onbeforeunload javascript event doesn't even fire if I click a link to another page, it only fires if you're going to a whole different website, so I can't even use that to .dispose() VideoJS on page unload.

Note 3: .reset() doesn't seem to be working either.

• javascript
• html
• video.js

Share Improve this question Follow edited Sep 8, 2017 at 17:49 Mark Kramer asked Apr 5, 2017 at 1:11 Mark KramerMark Kramer 3,21477 gold badges3737 silver badges5353 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can check to see if the player already exists and unload it, then reload it.

I was actually able to figure out a fairly simple and elegant solution:

if (player) {player.dispose()} else {var player}
player = videojs('player', {
    //options
});

First it checks to see if the player exists. If it does, it destroys the VideoJS instance. If it doesn't, it creates the variable. Then it initializes the player.

By Referring this issue : https://github./videojs/video.js/issues/2904

We can re-write the above solution to something like this:

const playerId = 'video-player';
const videoOptions = {
        controls: true,
        sources: [{
            src: 'test-file.mp4',
            type: 'video/mp4',
        }]
      };
let player;
let players = videojs.players;
const imaOptions = { adTagUrl };
if (players && Object.keys(players).length) {
   player = players[playerId];
   player.dispose();
} 
player = videojs(playerId,videoOptions);
player.ima(imaOptions); 

I found this one to be the solution:

var oldPlayer = document.getElementById('my-player');
videojs(oldPlayer).dispose();

it's in the docs actually

本文标签： javascriptHow to get videojs to unload automaticallyStack Overflow