mediaelement.js - Mediaelements.js：覆盖特征属性

Question

我需要覆盖 mediaelements.js 组件的“功能”属性。场景是这样的： - 以小控制（仅音量）开始第一个宣传视频 - 当视频结束时，内容视频开始并且必须显示更多控制。

这是代码：

<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>

使用此代码，促销视频开始并且只有音量控制。结束后，正确启动内容视频，但“功能”属性中设置的其他控件不出现。我还必须以这种方式添加功能：

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

和这个：

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

但无论如何都行不通。有什么建议吗？

谢谢！朱塞佩

Answer 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>

Answer 2

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