mediaelement.js에서 비디오가 변경되지 않습니다

Question

javascript를 사용하여 mediaelement.js에서 비디오를 변경하려고합니다.

내 기능은 선택한 비디오를 처음 시작할 때 완벽하게 작동합니다. 그러나 함수를 다시 호출하면 새 경로가 올바르지 만 호출을 무시하는 것처럼 보입니다. HTML5를 직접 사용하면 동영상이 다시로드되지만 (player1.src 등의 댓글이 표시됨), 대체 및 대체 형식으로 mediaelement.js의 이점은 사용되지 않습니다.

무엇을 잊어 버리시겠습니까? 이전 인스턴스를 삭제해야합니까? 그렇다면 어떻게해야합니까?

은 ... 당신이 player2 때마다 새로 생성 할 객체 재사용해야

제이

<script type='text/javascript'> 

function playVideo(videopath) 
{ 
    var myVideo = document.getElementById(videopath).value; 
    var myVideopath = “/Library/"+encodeURIComponent(myVideo); 
    // player1.src = myVidiopath; 
    // player1.load(); 
    // player1.play(); 


     var v = document.getElementsByTagName("video")[0]; 
    var player2 = new MediaElementPlayer 
    (v, 
     { 
     success: function(media, domObject) 
     { 
      media.setSrc(myVidiopath); 
       media.load(); 
       media.play(); 
     } 
     } 
    ); 
} 

</script> 


<table> 
    <tr><td width="500"> 
     <div id="avplayer" class="container"> 
    <video id="player1" width="480" height="320" poster="/acds/files/logo_cube.png" 
     controls="controls" preload="none"> 
     <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
     <source type="video/mp4" src="" /> 
     <!-- Flash fallback for non-HTML5 browsers without JavaScript --> 
     <object width="480" height="320" type="application/x-shockwave-flash" 
      data="/acds/scripts/videoPlayer/flashmediaelement.swf"> 
      <param name="movie" value="/acds/scripts/videoPlayer/flashmediaelement.swf" /> 
      <param name="flashvars" 
       value="controls=true&poster=/acds/files/logo_cube.png" /> 
      <!-- Image as a last resort --> 
      <img src="/acds/files/logo_cube.png" width="480" height="320" title="No video 
     playback capabilities" /> 
     </object> 
    </video> 
     </div> 
    </td><td width="200"> 
     <table> 
      <tr><td><button id='PlayA' style='WIDTH: 160px; HEIGHT: 24px' type='button' 
      onclick='playSound("ShowVidA")' >Play Lesson VideoA</button></td></tr> 
      <tr><td><button id='PlayB' style='WIDTH: 160px; HEIGHT: 24px' type='button' 
      onclick='playSound("ShowVidB")' >Play Lesson VideoB</button></td></tr> 
      <tr><td><button id='PlayC' style='WIDTH: 160px; HEIGHT: 24px' type='button' 
      onclick='playSound("ShowVidC")' >Play Lesson VideoC</button></td></tr> 
      <tr><td><button id='PlayD' style='WIDTH: 160px; HEIGHT: 24px' type='button' 
       onclick='playSound("ShowVidD")' >Play Lesson VideoD</button></td></tr> 
     </table> 
    </td></tr> 
</table> 

Answer 1

감사

<script type='text/javascript'> 
var player2=false; 
    function playVideo(videopath) 
    { 
     var myVideo = document.getElementById(videopath).value; 
     var myVideopath = “/Library/"+encodeURIComponent(myVideo); 

     var v = document.getElementsByTagName("video")[0]; 
     if (typeof(player2)!='object') 
     { 
     player2 = new MediaElementPlayer(v, { 
      success: function(media, domObject) 
      { 
       media.setSrc(myVidiopath); 
        media.load(); 
        media.play(); 
      } 
     }); 
     } 
     else 
     { 
      player2.setSrc(myVidiopath); 
      player2.load(); 
      player2.play(); 
     } 
    } 
</script>