IE中的Colorbox - 加载外部页面,尝试下载内容,而不是播放

时间:2011-10-13 14:18:15

标签: jquery internet-explorer colorbox

简单项目:http://mannyllerena.com/

当您在IE中并点击“实时访谈”时,它会提示您下载媒体,而不是允许它从被叫URL播放...

更多的是设计师而不是编码员。需要一些帮助!

这是JQuery:

$(document).ready(function(){
        //Examples of how to assign the ColorBox event to elements
        $("a[rel='example1']").colorbox();
        $("a[rel='example2']").colorbox();
        $("a[rel='example3']").colorbox();
        $("a[rel='example4']").colorbox();
        $("a[rel='example7']").colorbox();
        $(".example7").colorbox({width:"40%", height:"25%", iframe:true});

        //Example of preserving a JavaScript event for inline calls.
        $("#click").click(function(){ 
            $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
            return false;
        });
    });

这是HTML:

<a class="projects example7" href="http://www.floordaily.net/UploadedFiles/RadioInterviews/MP3/Manny_2-15-08.mp3"  title=" " rel="example7">Live<br />Interviews</a>
<a class="example7" href="http://www.floordaily.net/UploadedFiles/RadioInterviews/MP3/Manny%20from%20Mohawk%27s%20Floorscapes%20meeting%20in%202008.mp3"  title=" " rel="example7"></a>
<a class="example7" href="http://www.floordaily.net/UploadedFiles/RadioInterviews/MP3/Manny%20Llerena%20Discusses%20the%20Highlights%20of%20Mohawks%20Aligned%20Retailer%20Meeting.mp3"  title=" " rel="example7"></a>

1 个答案:

答案 0 :(得分:2)

这里的问题不在于IE中的colorbox,而在于IE处理视频和音频文件的方式。它还取决于每个人如何设置IE。通常,浏览器会内置播放音乐和视频文件的内容。但是,微软假设您使用其他产品并打开媒体播放器会更开心。

为防止出现这种情况,您需要将音乐或视频文件嵌入预先构建的播放器中。雅虎提供了一个非常简单的解决方案,所有这些都是用javascript完成的 - 或者说,你用播放器做的一切都是用javascript完成的。以下是将其集成到colorbox中需要采取的步骤:

1)设置一个单独的页面,其中包含播放器的所有代码。这是:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Click blocker test</title>
<script type="text/javascript">
    var YWPParams = {
        autoplay:true,
        volume:0.5
    };
</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>
</head>

<body style="font-size:200%">
    <a id="test1" href="http://www.floordaily.net/UploadedFiles/RadioInterviews/MP3/Manny_2-15-08.mp3" style="display:none">Video</a><br />
</body>
</html>

2)然后在包含mp3文件链接的页面中:

$("#playerLink").colorbox({
    iframe: true,
    width:"50%",
    height:"50%" //or whatever dimensions you like
});

基本上它的工作方式(使用这些设置)是雅虎脚本搜索具有.mp3扩展名的任何链接并将它们加载到播放器中。有关雅虎玩家设置的更多信息可以在here找到。

这只是一个玩家的例子,那里有一堆玩家。有一个jquery mp3 player here,但只是搜索嵌入式MP3播放器会给你带来很多结果。