-1

我有以下代码，我计划在 listview 中显示视频列表（假设视频列表或 src 标签的值来自 JSON）

    <body>
    <div data-url="demo-page" data-role="page" id="demo-page" data-theme="d">
        <div data-role="header" data-theme="c">
            <h1>Videos</h1>
            <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
        </div><!-- /header -->
        <div data-role="content" id="contentVideosId" class="contentVideosClass">
            <div class="video-wrapper" data-iscroll>
                <ul data-role="listview"  id="video-list" data-split-icon="star" data-theme="d">
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
                    <li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>      
                </ul>
            </div><!-- /video=wrapper -->
        </div><!-- /content -->
        <div data-role="panel" id="left-panel" data-theme="c">
            <div data-role="listview" >
                <ul data-role="listview" data-theme="d">
                    <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                   <!--  <li data-role="list-divider">PlayList</li> -->
                    <!-- <li></li> -->
                </ul>
            </div>      
            <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
                <div data-role="collapsible" id="staredPlayListDiv">
                    <h3>Stared PlayList</h3>
                    <ul data-role="listview" id="staredPlayListUl">
                    </ul>
                </div>
                <div data-role="collapsible" id="playListDiv">
                    <h3>PlayList</h3>
                    <ul data-role="listview" id="playListUl">
                    </ul>
                </div>
            </div> <!-- Collapisble-set end -->
        </div><!-- /panel -->
    </div>
</body>

我正在使用以下 js 和 css 组合

<link rel="stylesheet" href="css/plugin/normalize.css">
        <link rel="stylesheet" href="css/plugin/jquery.mobile-1.3.2.css">
        <link rel="stylesheet" href="css/custom.css">

        <!-- Scripts -->
        <script src="js/plugin/jquery-1.9.0.min.js"></script>
        <script src="js/plugin/modernizr-2.6.1.min.js"></script>
        <script src="js/plugin/jquery.mobile-1.3.2.min.js"></script>

当我在浏览器中呈现此页面时，我只能看到第一个 iframe 标记，而不能看到所有其他标记。此外，当我使用 chrome 调试器检查 DOM 中加载了哪些所有内容时，我只能看到 1 个 iframe 元素。

除了 iframe 之外，还有没有更好的方法来显示视频列表？

4

1 回答 1

1

我认为您的 iFrame 标记是问题所在，因为 iFrame 不会自动关闭。将每个 iFrame 更改为

<iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless ></iframe>

这是一个演示

于 2013-11-22T14:53:47.867 回答