为不同的浏览器更改媒体播放器对象

Question

我在asp.net web应用程序上有一个媒体播放器对象。Chrome和firefox显示为vlc播放器，IE显示为microsoft windows media player。

这使得嵌入的音频播放器对象的宽度不同。我想使用css调整不同浏览器的媒体播放器的宽度。我该怎么做呢?

音频播放器代码:

<div CssClass="media_player">
            <object name="MMPlayer1" id="MMPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
                height="68" width="680" standby="Loading Media Player components..." type="application/x-oleobject"
                codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=6,4,7,1112">
                <param name="fileName" value="ding.wav">
                <param name="autoStart" value="false">
                <param name="showControls" value="true">
                <param name="AllowChangeDisplaySize" value="false">
                <param name="ClickToPlay" value="true">
                <param name="ShowDisplay" value="0">
                <param name="ShowDisplay" value="false">
                <param name="ShowStatusBar" value="1" />
                <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
                    src="http://localhost:50451/ding.wav" autostart="false" width="680" height="68">
                </embed>
            </object>
        </div>

css:

    .media_player
{
    margin-left:0;
    margin-top:0;
    width:680px;
    height:70px;
    background-color:White;
}

Answer 1

您可能希望在HTML标头中使用不同的浏览器特定的CSS选择器。使用这个站点，它会给你:

<style type="text/css">
    /* Default */
    .media_player {
        width:500px;
    }
    /* Firefox */
    body:last-child .media_player, x:-moz-any-link {
        width:600px;
    }
    /* Chrome (and Safari) */
    .media_player:not(*:root) {
        width:700px;
    }
</style>
<!--[if IE]><style type="text/css">
    /* Internet Explorer */
    .media_player {
        width:800px;
    }
</style><![endif]-->

但是，您可能希望确保包含了所有浏览器，而不仅仅是这三个浏览器。为了确保这一点，您可能需要使用像这样的JavaScript插件。