Question

我有以下代码，我计划在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之外，还有更好的方法来显示视频列表吗？

Answer 1

我认为你的iFrame标记是问题，因为iFrames不能自动关闭。将每个iFrame更改为

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

这是 DEMO

使用iframe显示listview中的视频列表

1 个答案: