Geek asks and answers

How to successfully destroy MediaElementPlayer and create a new one

Here's the script:

I have a page containing an element videothat is configured on a video. The source of this video may be HTML5 video with multiple sources (and Flash fallback) or YouTube videos. Below are a few images that serve as thumbnails for the video, clicking on them should load the corresponding video, destroying the existing MediaElementPlayer and creating a new one in the same element video.

This creates an initial player when the page loads:

$('video').mediaelementplayer({ alwaysShowControls: true });

And this is intended to change the player when you click one of the images:

$('video').mediaelementplayer({
   alwaysShowControls: true,
   success: function(media, dom, player) {
      console.log('success!');
   },
   error: function() {
      console.log('error!');
   }
});

But that will not work. A function is successnever entered (nor error), and nothing happens.

, , - , , , , :

mejs.meIndex = 0
mejs.players = []

:

window.mejs = null;
window.MediaElementPlayer = null;
window.MediaElement = null;

:)

- ? , - , , - , ! .

+5
5

, , .

, , , MediaElementJS .

, HTML5/Flash-, YouTube, .

0

remove() medialementjs, type src video, mediaelementjs, .

:

function setSource(url, type) {
    var vid = $('#video').first();
    if (vid.attr('type') != type) {
        vid.get(0).player.remove();
        vid.attr('type', type).attr('src', url);
        vid.mediaelementplayer({
            success: function(media, dom, player) {
                player.play();
            }
        })

    }
}

mp4 youtube, . .

+2

src, .

:

try(){
    player.pause();
    player.remove(ture);
} catch(err) {
    console.log(err);
}
+1

, , html , , mediaelementplayer(). , jQuery ( "parent" ). Empty() , mediaelementjs, html , :

$("#video").mediaelementplayer({
    pauseOtherPlayers: false
});

, . , ?

0

, MediaElementJS - , "src" .

Using the MediaElementJS API to access this src attribute is the best way to manage cross-browser issues with cross-sources (for example, for YouTube videos or Flash return). Here is how I did it:

player.pause();
player.setSrc(myNewSourceURL);
player.load();

I also turned this code into a MediaElementJS plugin, there will be many nice things like managing a playlist, next and prev buttons, and a playlist panel. You can find pullRequest on github .

Here is a sample code to create a playlist:

new MediaElementPlayer('#myvideo', {
    features : ['prev','playpause','next', 'progress'],
    success : function(mediaElement, domObject){
        domObject.player.loadPlaylist([
            {src: "http://domain.com/video/video1.mp4"},
            {src: "http://domain.com/video/video2.mp4"},
            {src: "http://domain.com/video/video3.mp4"},
        ]);
    }
});

Then, when the sketch is clicked:

var index = 2; // calculate the item index in the playlist
player.setItem(index);
0
source

More articles:


All Articles