javascript - 如何从 xml 中提取特定内容(在页面加载时)？

Question

我正在处理如下所示的 html/js 代码，属于以下 url其中所有黑色的内容均来自xml

<div class="container-wrap background--gray-light-2 cf">
    <div class="section container container--mid container--margbot background--white entry-content cf">
        <script src="https://content.jwplatform.com/libraries/FZ8yNTef.js"></script>
        <center>
            <div id="podcast" align="center"></div>
        </center>
        <script>
            var PodcastplayerInstance = jwplayer("podcast");
            PodcastplayerInstance.setup({
                playlist: "//www.cpac.ca/tip-podcast/jwplayer.xml",
                androidhls: true,
                preload: "auto",
                height: 200,
                width: 400,
                visualplaylist: false,
                stretching: "fill",
                "plugins": {
                    "http://www.cpac.ca/tip-podcast/listy.js": {},
                    'viral-2': {'oncomplete': 'False', 'onpause': 'False', 'functions': 'All'}
                }
            });
        </script>
    </div><!-- .entry-content -->
</div><!-- .container-wrap -->

问题陈述:

我想知道我需要在上面添加什么 php/javascript 代码，以便它只获取 2019 年 4 月 3 日 或 2019 年 4 月 1 日 或仅获取一个content(如下所示)ON PAGE LOAD 来自此处的垂直矩形框 http://www.cpac.ca/en/episode/

此时，正在从 xml 中拉取 5 个内容(在黑色矩形框中)。

为了从 xml 中提取特定内容，使用了以下逻辑:

 $context  = stream_context_create(array('http' => array('header' => 'Accept: application/xml')));
 $url = 'http://www.cpac.ca/tip-podcast/jwplayer.xml';

 $xml = file_get_contents($url, false, $context);
 $xml = simplexml_load_string($xml);
 $itemarray = $xml->xpath("/rss/channel/item[1]");

我想知道如何将它与上面的 html/js 代码集成。项目数组的值(1、2、3、4、5)可以根据需要随机播放。

Answer 1

JavaScript 解决方案

您可以使用 JW 播放器 playlist API ，你会在哪里使用 jwplayer().getPlaylistItem()仅检索播放列表中的特定项目。在您的例子中，jwplayer() 是 PodcastplayerInstance，请注意索引是从 0 开始的。因此，您可以在调用PodcastplayerInstance.setup() 之后添加:

var item = PodcastplayerInstance.getPlaylistItem(0);
console.log( item.title, item.description, item ); // for debugging/testing purposes

您可以使用 jQuery(在撰写本文时用于 page)来更新位于 div#podcast_listy_pl_panel< 内的“垂直矩形框”(基于当前标记)/:

var $item = jQuery( '#podcast_listy_pl_panel .listy-item' );
$item.find( '.listy-title' ).html( item.title + ' <span class="listy-duration"></span>' );
$item.find( '.listy-description' ).html( item.description );

要获取第二个、第三个等项，只需更改索引即可:

var item = PodcastplayerInstance.getPlaylistItem(1); // get the second item; index = 1

PHP 解决方案

您已经有了获取远程 XML file 内容的代码，因此您可以将其添加到 $itemarray 定义的正下方(即之后以下行:$itemarray = $xml->xpath("/rss/ channel /项目[1]");):

$item = $itemarray ? (array) $itemarray[0] : null;
if ( $item ) :
?>
<div class="listy-textwrapper">
    <span class="listy-title">
        <?php echo $item['title']; ?>
        <span class="listy-duration"></span>
    </span>
    <span class="listy-description">
        <?php echo $item['description']; ?>
    </span>
</div>
<?php
endif; // end $item

要获得第二个项目，只需像这样使用 item[2]:

$itemarray = $xml->xpath("/rss/channel/item[2]"); // get the second item; index = 2, not 1

但是这里的$item总是指向$itemarray[0]:

$item = $itemarray ? (array) $itemarray[0] : null;