【发布时间】：2020-02-29 01:48:04
【问题描述】：
我正在尝试更改此嵌入播放器的 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>
有什么办法可以做到吗？
【问题讨论】：
-
您能否让您的自定义 .jsp 文件代码指向音频源的 URL，就好像它只是在 zippyshare.com/api 上运行一样？
-
您应该发布
jplayer_embed.jsp文件的代码以提供更多信息。 -
@iJamesPHP2 这就是我正在尝试的，但它似乎不起作用......我只是将 .jsp 文件的源代码添加到我的帖子中。是的，我确实已将域添加到脚本源 URL 中。他们被装载了。但由于某种原因，它没有加载音频文件。
-
@Rico 刚刚做到了！
-
@Wex 您在测试页面时是否在 devtools 中遇到了跨源错误。因为你是在本地下载和服务的，我想你可能会遇到这个错误，请检查一下。
标签： javascript css jplayer