Question

您可以查看测试页here。

我使用解决方案SO here。

我也正在使用Modernizr javascript lib，如上所述。

问题是：页面加载正常，我可以使用Crome，FireFox和Safari中的下拉菜单更改要播放的视频片段。但出于某些原因，在IE9中，如果视频在前一个视频运行时选择更改为新视频加载处于暂停状态，即没有“播放”按钮，则显示“暂停”按钮状态。

这是我的代码：HTML：

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

Javascript :(用于初始视频剪辑加载）

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

希望我的查询清晰，不会太长。

真的很想得到一些帮助。

非常感谢。

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

Answer 1

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

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

HTML5视频IE9与休息

1 个答案: