Mediaelements.js：覆蓋要素屬性

Question

我需要覆蓋mediaelements.js組件的「features」屬性。情景是這樣的： - 以小控件（僅音量）開始第一個宣傳視頻 - 當視頻結束時，內容視頻啓動並且必須顯示更多控制。

此代碼：

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

有了這個代碼，該宣傳片的開始和只有音量控制。結束時，請正確啓動內容視頻，但不會顯示在「features」屬性中設置的其他控件。我也有添加這樣的特徵：

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

這：

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

但在所有情況下無法正常工作。任何建議？

謝謝！ 朱塞佩

Answer 1

一個快速的解決方案是這樣的：

你有2個視頻，請頁。第一個立即播放宣傳視頻。後者是隱藏的，當前者播放時將播放內容視頻。 當促銷視頻結束播放時，您將創建另一個與第二個視頻相關的媒體元素，並銷燬第一個媒體元素並最終播放第二個視頻。

<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 
        }); 
       });