HTML5 видео IE9 против остальных - PullRequest
Новая
       22

HTML5 видео IE9 против остальных

1 голос
/ 26 марта 2012

Вы можете просмотреть тестовую страницу здесь .

Я использую решение SO здесь .

Я также использую Modernizr javascript lib, как указано в заметке.

Проблема в следующем: страница загружается нормально, и я могу изменить видеоклип для воспроизведения, используя раскрывающиеся меню в Crome, FireFox и Safari. Но по какой-то причине в IE9, хотя видео изменяется в соответствии с выбранным, если предыдущее видео запускало новое видео, загружается в состоянии паузы, т.е. вместо кнопки «воспроизведение», оно показывает состояние кнопки «пауза».

вот мой код: HTML: 

<video id="vidScreen" width="624" height="260" preload="auto" controls="controls"></video>

Javascript: (для начальной загрузки видеоклипа)

функция doMetaphorsInitialise () { window.document.getElementById ("metaphorsStyle"). disabled = false; 

var targetMovie = window.document.getElementById("vidScreen");

targetMovie.volume = 1;

if (Modernizr.video && Modernizr.video.h264)
{
    targetMovie.setAttribute("src", "inception/inception.mp4");
}
else if (Modernizr.video && Modernizr.video.ogg)
{
    targetMovie.setAttribute("src", "inception/inception.ogg");
}
else if (Modernizr.video && Modernizr.video.webm)
{
    targetMovie.setAttribute("src", "inception/inception.webm");
}
document.forms["metaphorsMenu"].reset();
}

Javascript: (Для кликов в выпадающем меню: 

function doMetaphors()

{

var v = new Array(); 

v["what"] = [ 
        "what/what.mp4", 
        "what/what.ogg", 
        "what/what.webm" 
        ]; 
v["bullet"] = [ 
        "bullet/bullet.mp4", 
        "bullet/bullet.ogg", 
        "bullet/bullet.webm" 
       ]; 
v["seven"] = [ 
        "seven/seven.mp4", 
        "seven/seven.ogg", 
        "seven/seven.webm" 
        ];

v["anderson"] = [
        "anderson/anderson.mp4", 
        "anderson/anderson.ogg", 
        "anderson/anderson.webm"
        ];

v["smith"] = [
        "videos/video3.webmvp8.mp4", 
        "videos/video3.theora.ogg", 
        "videos/video3.mp4video.webm"
        ];

v["everything"] = [
        "everything/everything.mp4", 
        "everything/everything.ogg", 
        "everything/everything.webm"
        ];


var menuID = window.document.getElementById("metaphorsStyle");

var getDestination = menuID[menuID.selectedIndex].value;

var targetMovie = window.document.getElementById("vidScreen");

if (Modernizr.video && Modernizr.video.h264)
{
    targetMovie.setAttribute("src", v[getDestination][0]);
}
else if (Modernizr.video && Modernizr.video.ogg)
{
    targetMovie.setAttribute("src", v[getDestination][1]);
}
else if (Modernizr.video && Modernizr.video.webm)
{
    targetMovie.setAttribute("src", v[getDestination][2]);
}

//targetMovie.load();
}

Я закомментировал targetMovie.load (); это не кажется необходимым, но даже при том, что это не работает.

Я также рассмотрел: 

targetMovie.addEventListener('loadeddata', initialiseControls, false);

Так что в initialiseControls я мог переключить кнопку воспроизведения / паузы, но не нашел никакой информации в сети.

Надеюсь, мой запрос ясен и не слишком длинный.

Очень хотелось бы помочь с этим.

Большое спасибо.

NEWS: Теперь я сделал все опции в выпадающем меню функциональными, чтобы вы могли выбрать любой элемент и увидеть поведение, которое я пытаюсь исправить в IE9. Еще раз спасибо.

1 Ответ

1 голос
/ 26 марта 2012

есть атрибут, в котором вы можете проверить, находится ли игрок в паузе или нет. всегда лучше обновить элементы управления от игрока. в вашем случае я бы прослушал «загруженные данные», а затем проверил состояние видеоплеера и обновил элементы управления. так что попробуйте: 

//loadeddata = (new) video-source loaded
targetMovie.addEventListener('loadeddata', function(){    

    if(targetMovie.paused){   //get videoplayer state (true | false)
      showPlayButtonAndHidePauseButton();
    }
    else
    {
      hidePlayButtonAndShowPauseButton();
    }
});

надеюсь, что это работает. Кстати: вот хорошая живая демонстрация для всех событий / атрибутов html5 video элемента: http://www.w3.org/2010/05/video/mediaevents.html

...