0

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

しかし、いずれにしてもうまくいきません。なにか提案を？

ありがとう！ジュゼッペ

4

2 に答える 2

0

1 つの簡単な解決策は次のとおりです。

あなたのページには 2 つの動画があります。最初のものはすぐにプロモーションビデオを再生します. 後者は非表示になっており、前者の再生が終了するとコンテンツ ビデオが再生されます。プロモーション ビデオの再生が終了したら、2 番目のビデオに関連する別のメディア要素を作成し、最初のメディア要素を破棄して、最終的に 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>
于 2013-02-18T21:17:25.883 に答える