Mediaelements.js: override features attributes

问题:

I need to override "features" attribute of mediaelements.js component. The scenario is this: - start first promotional video with small control (only volume) - when video is ended, content video starts and more control must be shown.

This the code:

<video width="640" height="360" src="promo.mp4" type="video/mp4"  
id="player1" poster="../media/echo-hereweare.jpg" 
controls="controls" preload="true"></video>

<script>

$(function () {
   promoVideo();
});

function promoVideo() {

 $("#player1").mediaelementplayer({

    features: ['volume'],       
    success: function(player, node) {

        // add event listener
        player.addEventListener('ended', function(e) {
            contentVideo(e.target);         

        }, false);
    }
 });
}   

function contentVideo(player) {

 var contentVideoSrc = "content.mp4";

 player.features = ['playpause','progress','fullscreen','current','duration'];

 player.pause();
 player.setSrc(contentVideoSrc);
 player.play();     
}       

</script>

With this code, the promo video starts and have only volume control. When ended, start the content video correctly but the other controls set in "features" attribute don't appear. I have also to add the features in this way:

$("#player1").mediaelementplayer({              
    features: ['playpause','progress','fullscreen','current','duration']
});

and this:

var player = new MediaElementPlayer(
    "#player1"
    ,
    {           
        features: ['playpause','progress','fullscreen','current','duration']            
    }
);

But in all case not work. Any suggestion?

Thanks! Giuseppe

回答1:

One quick solution is this:

You have 2 videos in your page. The first one immediately plays the promo video. The latter is hidden and will play the content video when the former ends playing. When the promo video ends playing, you create another mediaelement that is now related to the second video, you destroy the first mediaelement and eventually show the second video playing.

<video width="640" height="360" src="promo.mp4" type="video/mp4"  
id="player1" poster="../media/echo-hereweare.jpg" 
controls="controls" preload="true"></video>

<video style="display: none;" width="640" height="360" src="content.mp4" type="video/mp4" id="player2" controls="controls" preload="true"></video>

<script>

$(function () {
   promoVideo();
});

function promoVideo() {

$("#player1").mediaelementplayer({

    features: ['volume'],       
    success: function(player, node) {

        // add event listener
        player.addEventListener('ended', function() {
            contentVideo();         

        }, false);
    }
 });
}    

function contentVideo() {

$("#player2").mediaelementplayer({
features : ['playpause','progress','fullscreen','current','duration'],
    success: function(player, node) { player.play(); }
});

mejs.players[0].remove(); 
$('#video:eq(1)').show();

}  

</script>

回答2:

 $(function(){
                    $('#audio-player').mediaelementplayer({
                        alwaysShowControls: true,
                        features: ['playpause','progress','volume'],
                        audioVolume: 'horizontal',
                        audioWidth: width,
                        audioHeight: 70,
                        iPadUseNativeControls: true,
                        iPhoneUseNativeControls: true,
                        AndroidUseNativeControls: true
                    });
                });