MediaElement.js音频标记没有动态添加样式

时间:2014-02-03 11:38:31

标签: javascript html5 jquery-mobile html5-audio mediaelement.js

大家好问一个问题......

我想使用MediaElement.js来包装我的音频标签,这样我就可以在所有浏览器上拥有相同的播放器...... 我使用JQM 1.4 ......

当我添加静态元素时,它可以工作

<audio id="audio_element" preload="none" controls="controls">
      <source src="ClassicMelody.mp3">
      <source src="ClassicMelody.ogg">
    </audio>

但是当我像这样动态添加它时,它没有MedialElement样式:

var content =$('<div data-role="collapsible" id="set"' + naslov + '"><h3><img class="imgg" style="vertical-align: middle;margin-right:30px" src="images/'+slika+'" width="150" height="150"  /><span class="titleg" style="display: inline-block; vertical-align: middle">'+ stevilka +'Sectionit ' + naslov + '</span></h3><p>' + kratek + '</p><audio id="audio_element" preload="none" controls="controls"><source src="'+ posneteki +'"><source src="'+ posneteka +'"></audio><a data-ajax="false" href="#" onclick="poslinapri(\''+niz+'\')" class="ui-btn ui-shadow ui-corner-all"><div class="prostor1tr">More</div></a></div>')

        $('#set').append(content);
        content.collapsible();

有什么可以解决这个问题?

由于

1 个答案:

答案 0 :(得分:2)

更新

动态添加视频音频标签应在追加后初始化。

$('#set').append(content).collapsibleset().find('video,audio').mediaelementplayer();

您有两种解决方案可以实现这一目标。

  1. 解决方案一:

    使用.collapsible()将内容附加为对象增强

    var content = $( $("<div/>").collapsible() );
    $("#parent").append(content);
    
  2. 解决方案二:

    div上调用增强功能,使用.enhanceWithin()增强所有内容。

    var content = $("<div/>");
    $("#parent").append(content).enhanceWitin();
    
  3.   

    <强> Demo