更改不同浏览器的媒体播放器对象宽度答案

【问题标题】：Change media player object witdh for different browsers更改不同浏览器的媒体播放器对象宽度
【发布时间】：2014-07-31 06:43:15
【问题描述】：

我在 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;
}

【问题讨论】：

标签： css asp.net browser cross-browser

【解决方案1】：

您可能希望在 HTML 标头中使用不同的浏览器特定 CSS 选择器。使用this site，这会给你：

<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 插件，例如 this one。

【讨论】：