Видео не изменится на mediaelement.js - PullRequest
Новая
       25

Видео не изменится на mediaelement.js

1 голос
/ 08 сентября 2011

Я пытаюсь изменить видео в mediaelement.js, используя javascript.

Моя функция работает отлично при первом запуске выбранного видео.Однако, если я снова вызываю функцию, она игнорирует вызов, хотя новый путь верен.Когда я делал это при непосредственном использовании HTML5, видео перезагружалось (см. Закомментированный player1.src и т. Д.), Но это не использовало бы преимущества mediaelement.js для восстановления и форматирования.

Что я забыл?Нужно ли очистить предыдущий экземпляр, если так? Как?

Спасибо,

Джей 

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

1 Ответ

0 голосов
/ 27 октября 2011

Вы должны повторно использовать объект player2, а не создавать новый каждый раз ... 

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