如何更改此嵌入式播放器的CSS？

Wex 发表于 Dev

威克斯

我正在尝试更改此嵌入式播放器的css样式表，但到目前为止我仍无法做到...

这是默认代码：

<script type="text/javascript">
    var zippywww="81";
    var zippyfile="qHe0GQdg";
    var zippytext="#000000";
    var zippyback="#e8e8e8";
    var zippyplay="#ff6600";
    var zippywidth="100%";
    var zippyauto=false;
    var zippyvol=80;
    var zippywave = "#ffffff";
    var zippyborder = "#cccccc";

    var a = navigator.userAgent||navigator.vendor||window.opera;        
    document.write("<iframe height='92' width='"+zippywidth+"' frameBorder='0' src='http://api.zippyshare.com/api/jplayer_embed.jsp?key="+zippyfile+"&server=www"+zippywww+"&width="+zippywidth+"'></iframe>");

</script>

问题在于CSS代码位于jplayer_embed.jsp文件内部，由调用iframe。

我尝试复制的源代码.jsp，将其保存到新的本地.jsp文件中，以便.css向其中注入其他内容，但播放器不会加载音频源。

这是的源代码.jsp（通过使用“查看页面源代码”）：

<html>
    <head>
        <link href="/css/jplayer.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="//api.zippyshare.com/js/jquery/jquery.js"></script>
        <script type="text/javascript" src="//api.zippyshare.com/js/jquery.jplayer.min.js"></script>
        <script type="text/javascript" src="//api.zippyshare.com/js/jquery.cookie.js"></script>
    </head>
    <body style="margin: 0; width: px;">
        <div class="center" style="text-align: center;">
            <div id="jquery_jplayer" class="jp-jplayer"></div>
            <div id="jp_container" class="jp-audio" style="width: -182px;">
                <div class="jp-type-single">
                    <div class="jp-interface">
                        <ul class="jp-controls">
                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        </ul>
                        <div class="jp-time-holder">
                            <span class="jp-current-time"></span>
                            /
                            <span class="jp-duration"></span>
                        </div>
                        <div class="jp-progress" style="width:-82px;">


                                <div onclick="toggleSDHD();" class="hdsdtoggle sd-icon"></div>

                            <div class="jp-seek-bar">
                                <img src="//.zippyshare.com/wf//file.html" style="height: 100%; width: 100%; position: absolute;">
                                <img src="//.zippyshare.com/images/jplayer/player-overlay.png" style="height: 100%; width: 100%;">
                                <div class="jp-play-bar" style="position: absolute; top: 0px;"></div>
                            </div>
                                <a href="//.zippyshare.com/v//file.html" target="_blank"><div class="dwnbtn dwn-icon"></div></a>
                        </div>
                    </div>
                    <div class="jp-download" style="width:-2px; height: 0px; border-top: none;">
                    </div>
                    <div class="jp-no-solution">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                    </div>
                </div>
            </div>  
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

                zippyhq = false || isFirefox;


                if (isFirefox) {
                    $.each($(".hdsdtoggle"), function (idx, val) {
                            $(val).removeClass("sd-icon").addClass("hd-icon"); 
                    });
                }
                $("#jquery_jplayer").jPlayer({
                    ready: function (event) {
                        if (!zippyhq) {
                            $(this).jPlayer("setMedia", {
                                m4a: "//.zippyshare.com/audio//0/file.mp3"
                            });
                        } else {
                            $(this).jPlayer("setMedia", {
                                m4a: "//.zippyshare.com/audioHQ//0/file.mp3"
                            });
                        }
                    },
                    swfPath: "//api.zippyshare.com/js",
                    supplied: "m4a",
                    wmode: "window",
                    solution: "html, flash",
                    cssSelectorAncestor: "#jp_container"
                });

                toggleSDHD = function () {
                    if (isFirefox) {
                        return;
                    }
                    if (zippyhq) {
                        zippyhq = false;
                        $.cookie('zippyhq', "0", {expires:99999, domain: 'zippyshare.com', path: '/'});
                        $("#jquery_jplayer").jPlayer("setMedia", {
                            m4a: '//.zippyshare.com/audio//0/file.mp3'
                        });
                        $.each($(".hdsdtoggle"), function (idx, val) {
                            $(val).removeClass("hd-icon").addClass("sd-icon"); 
                        });
                    } else {
                        zippyhq = true;
                        $.cookie('zippyhq', "1", {expires:99999, domain: 'zippyshare.com', path: '/'});
                        $("#jquery_jplayer").jPlayer("setMedia", {
                            m4a: '//.zippyshare.com/audioHQ//0/file.mp3'
                        });
                        $.each($(".hdsdtoggle"), function (idx, val) {
                            $(val).removeClass("sd-icon").addClass("hd-icon"); 
                        });
                    }
                };
            });
        </script>
    </body>
</html>

有什么办法可以做到这一点？

村田佳夫

您无法对其进行更改。它将从原始站点获取CSS。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。