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> 

이 코드, 프로모션 비디오를 시작으로

하고 있습니다 만 볼륨 조절. 끝나면 콘텐츠 비디오를 올바르게 시작하지만 "기능"속성에 설정된 다른 컨트롤은 나타나지 않습니다. 나는이 방법으로 기능을 추가 할 수도 있습니다

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

이 :

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

그러나 모든 경우에 작동하지에 있습니다. 어떠한 제안?

감사합니다. 페이지에서 당신은이 개 동영상이

: 주세페

Answer 1

한 빠른 해결책이 있습니다. 첫 번째 동영상은 즉시 프로모션 동영상을 재생합니다. 후자는 숨겨져 있으며 전자가 재생되면 콘텐츠 비디오가 재생됩니다. 프로모션 동영상 재생이 끝나면 두 번째 동영상과 관련된 다른 미디어 요소를 만들고 첫 번째 미디어 요소를 삭제 한 다음 두 번째 동영상 재생을 표시합니다.

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