HTML5 视频 IE9 与其他视频

Question

您可以查看测试页面here。

我使用解决方案 SO here。

我也在使用Modernizr javascript 库，如注释中所述。

问题是这样的：页面加载正常，我可以使用 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：（下拉菜单中的canges：

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 中，我可以切换播放/暂停按钮，但在网络上没有找到任何信息。

希望我的问题是明确的，不要太长。

真的很想得到这方面的帮助。

非常感谢。

新闻：我现在已经使下拉菜单中的所有选项都可以正常工作，因此您可以选择任何项目并见证我在 IE9 中尝试纠正的行为。再次感谢。

Answer 1

有一个属性可以检查播放器是否暂停。从播放器更新控件总是更好。在你的情况下，我会听“加载数据”，然后检查视频播放器状态并更新控件。所以试试：

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

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

希望它有效。顺便说一句：这里有一个很好的现场演示，用于 html5 视频元素的所有事件/属性：http://www.w3.org/2010/05/video/mediaevents.html