Windows Media Player for IE,Firefox,Chrome的跨浏览器实现

最新推荐文章于 2021-06-17 06:50:50 发布

chenglaoshi

最新推荐文章于 2021-06-17 06:50:50 发布

阅读量741

点赞数

分类专栏： Web前端文章标签： chrome firefox 音乐播放器 ie

Web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最近网页中需要用到音乐播放器，在网上找了很多跨浏览器的兼容方案，由于大部分用户用的都是IE，因此首选Windows Media Player，下面贴出代码给各位参考，如果需要兼容FireFox、Chrome，需要用户自己安装插件，插件很小，大约300KB左右。

下面给出源码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            播放器测试
        </title>
    </head>

    <body>
        <div>
            <object id="MediaPlayer1" width="350" height="64" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
            codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6 ,4,7,1112"
            align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..."
            type="application/x-oleobject">

                <param name="FileName" value="">
                <param name="autoStart" value="true">
                <param name="invokeURLs" value="false">
                <param name="playCount" value="100">
                <param name="defaultFrame" value="datawindow">
                <embed src="" align="baseline" border="0" width="350" height="68" type="application/x-mplayer2"
                pluginspage="" id="MediaPlayer2" name="MediaPlayer2" showcontrols="1" showpositioncontrols="0"
                showaudiocontrols="1" showtracker="1" showdisplay="0" showstatusbar="1"
                autosize="0" showgotobar="0" showcaptioning="0" autostart="1" autorewind="0"
                animationatstart="0" transparentatstart="0" allowscan="1" enablecontextmenu="1"
                clicktoplay="0" defaultframe="datawindow" invokeurls="0">
                </embed>
            </object>
        </div>

            <input type="submit" name="playMp3" id="playMp3" value="Play MP3" onclick="playMP3()"
            />
            <input type="submit" name="playMp" id="playMp" value="Play MIDI" onclick="playMIDI()"
            />
            <input type="submit" name="playMp2" id="playMp2" value="Stop Play" onclick="stopPlay()"
            />




        <a href="wmpfirefoxplugin.exe">
            Windows Media Play for Firefox/Chrome 插件下载
        </a>

        <script>
            var ip = "http://192.168.1.199:8080/player/";
            function playMP3() {
                var musicFile = ip + "ily.mp3";
                startPlay(musicFile);
            }

            function playMIDI() {
                var musicFile = ip + "flourish.mid";
                startPlay(musicFile);
            }

            function startPlay(musicFile) {
                try {
                    if (navigator.userAgent.indexOf("MSIE") > 0) {
                        var obj = document.getElementById("MediaPlayer1");
                        obj.URL = musicFile;
                        //obj.FileName = musicFile;
                        obj.controls.play();
                    } else {
                        var player = document.getElementById("MediaPlayer2");

                        player.src = musicFile;
                        player.controls.play();

                    }
                } catch(error) {
                    alert(error)
                }
            }

            function stopPlay() {
                if (navigator.userAgent.indexOf("MSIE") > 0) {
                    var obj = document.getElementById("MediaPlayer1");

                    obj.controls.stop();
                } else {
                    var player = document.getElementById("MediaPlayer2");
                    player.controls.stop();
                }
            }
        </script>
    </body>

</html>