iframe bug with audioplayer

當打開一個直接指向audioplayer的鏈接時，所有瀏覽器都會播放它們。 Audioplayer是嵌套divs嵌入元素指向瑞士法郎。iframe bug with audioplayer

但是，當寫入並嵌入到某個頁面時會顯示播放器，但它不會在IE8中播放。適用於所有其他主流瀏覽器，包括IE9。

順便說一句，它沒有在Safari的工作，但分配寬度和高度足夠大的值固定它的Safari，但不是IE8。

<iframe width="500" height="50" src="http://localhost/getAudio?id=DB04DDA8-C7C9-46E6-B0B3-7A0E0B5C9A55" frameBorder="0" scrolling="no"> 

<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" xmlns="http://www.w3.org/1999/xhtml"> 

<HEAD> 
<STYLE class=iepp-printshim media=print></STYLE> 
<TITLE>Bethoven symphony # 9</TITLE> 
<META charset=utf-8> 
<SCRIPT type=text/javascript src="/celenium/scripts/libs/jquery-latest.js"></SCRIPT> 


<SCRIPT type=text/javascript src="/celenium/scripts/ClientCompatibility.js"></SCRIPT> 

<STYLE type=text/css>BODY { 
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
} 
</STYLE> 
</HEAD> 
<BODY> 
<DIV id=asset01> 
<SCRIPT type=text/javascript> 
      $.ajax({ 
       url: '/celenium/audioplayer_html5/getPlayer.asp?o=DB04DDA8-C7C9-46E6-B0B3-7A0E0B5C9A55', 
       dataType: 'jsonp', 
       cache: true, 
       jsonpCallback: 'sdlaudioplayer', 
       success: function (data) { 
        $('#asset01').append($(data.html)); 
       } 
      });  
     </SCRIPT> 
<LINK rel=stylesheet href="http://localhost/celenium/audioplayer_html5/css/defaultplayer.css" media=screen> 
<DIV id=sdlaudioplayer class=player_container> 
<DIV class=player_metabar></DIV> 
<DIV class=player_controls> 
<DIV style="DISPLAY: block" class=player_controls_play jQuery1707536265854468271="1"></DIV> 
<DIV style="DISPLAY: none" class=player_controls_pause jQuery1707536265854468271="2"></DIV> 
<DIV style="DISPLAY: none" class=player_controls_prev jQuery1707536265854468271="3"></DIV> 
<DIV style="DISPLAY: none" class=player_controls_next jQuery1707536265854468271="4"></DIV> 
<DIV style="WIDTH: 297px; DISPLAY: block" class=player_controls_scrubber jQuery1707536265854468271="5"> 
<DIV class=player_controls_scrubber_loading jQuery1707536265854468271="13"> 
<DIV class=player_controls_scrubber_loaded></DIV> 
<DIV class=player_controls_scrubber_playhead></DIV></DIV></DIV> 
<DIV style="DISPLAY: block" class=player_controls_timing jQuery1707536265854468271="6"><SPAN class=player_controls_timing_position>0:00</SPAN>/<SPAN class=player_controls_timing_total>0:00</SPAN></DIV> 
<DIV style="DISPLAY: block" class=player_controls_volume jQuery1707536265854468271="7"> 
<DIV class=player_controls_volume_mute jQuery1707536265854468271="8"></DIV> 
<DIV class=player_controls_volume_slider jQuery1707536265854468271="12"> 
<DIV style="WIDTH: 50%" class=player_controls_volume_marker jQuery1707536265854468271="11"></DIV> 
<DIV style="LEFT: 28px" class=player_controls_volume_knob jQuery1707536265854468271="10"></DIV></DIV> 
<DIV class=player_controls_volume_max jQuery1707536265854468271="9"></DIV></DIV></DIV></DIV> 
<DIV id=sm2-container class="high_performance movieContainer swf_loaded"><!-- SM2 flash goes here --> 
<DIV></DIV> 
<DIV class=sm2-object-box> 
<OBJECT id=sm2movie title="JS/Flash audio component (SoundManager 2)" codeBase="download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 data="/celenium/audioplayer_html5/swf/soundmanager2_flash9.swf" width=auto type=application/x-shockwave-flash height=auto></OBJECT></DIV></DIV></DIV></BODY>

來源

2012-04-08 Nickolodeon

過帳代碼始終是必需的。這就好比讓一個技工修理你的車，但是把車停在沒有汽油和點火鑰匙的車庫裏。 :) – jmort253 2012-04-08 20:12:24

在這裏，你走了。我們有兩個電話。首先由iframe，第二由ajax。 ajax爲下面的div填充innerHTML。 – Nickolodeon 2012-04-08 20:31:53

IE8不被視爲現代瀏覽器，因爲它不支持許多HTML5功能，如音頻和視頻標記。

這個HTML5 Tutorial網站有一個如何在IE8中使用Object標籤來支持音頻的例子。請參閱下面的示例：

<audio controls> 
    <source src="vincent.mp3" type="audio/mpeg"/> 
    <source src="vincent.ogg" type="audio/ogg"/> 
    <object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" 
     width="225" height="86"> 
     <param name="movie" value="media/OriginalMusicPlayer.swf"/> 
     <param name="FlashVars" value="mediaPath=vincent.mp3" /> 
    </object> 
</audio>

請記住，這需要IE8客戶端安裝Flash，因爲它使用Flash來加載播放器。

如果沒有安裝客戶端的Flash，你最後的努力是簡單地提供一個下載鏈接，讓用戶使用操作系統的默認播放器播放音頻文件：

<audio controls> 
    <source src="vincent.mp3" type="audio/mpeg"/> 
    <source src="vincent.ogg" type="audio/ogg"/> 
    <object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" 
     width="225" height="86"> 
     <param name="movie" value="media/OriginalMusicPlayer.swf"/> 
     <param name="FlashVars" value="mediaPath=vincent.mp3" /> 
    </object> 
    <a href="vincent.mp3">Download this lovely song and wish you all the best!</a> 
</audio>

作爲注意，你面臨的問題很可能源於你的HTML缺少html5文檔類型幷包含驗證錯誤。你可能想要檢查W3C規範。我相信你的所有屬性都應該有引號。

儘管許多瀏覽器都擅長讓HTML語法和語義錯誤發生，但有時候這些驗證問題可能會反過來困擾着你。我強烈建議您針對W3C validator運行您的網站，以確保沒有任何HTML錯誤阻止IE8正確解釋您的標記。

來源

2012-04-08 20:47:21 jmort253

感謝您的全面解答。我需要至少幾個小時來重新編碼腳本。我們的播放器也支持調試模式。打開後，它抱怨說沒有檢測到HTML5音頻支持。我不明白html5在哪裏（如

iframe bug with audioplayer

回答

相關問題