使用iframe时遇到问题

Question

使用iframe时，我的工作非常失败，我需要一些帮助。 我以前从未使用过iframe，这是我第一次。

这是有关要尝试使用Galleria滑块生成iframe的说明： http : //galleria.io/docs/references/data/

我拥有的是jwplayer，我想使用iframe访问视频以检索video.php页面中的视频。 如果只有一个视频，则只需从video.php页面中检索正确的视频，但是如果有多个视频，则检索正确的多个视频并将其显示在Galleria滑块中。 但是我的问题是，如何才能使iframe正常运行？

以下是显示jwplayer的video.php页面：

   <div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...

    <script type="text/javascript">


    jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
        file: "<?php echo 'VideoFiles/'.$v; ?>",
        width: 480,
        height: 270
    });

    <?php $i++; ?>

以下是用于检查视频是单个还是多个的代码，如果多个则显示Galleria滑块，这是放置iframe的位置：

if(count($arrVideoFile[$key]) == 1){
    foreach ($arrVideoFile[$key] as $v) { ?>

var data = [
    {

     iframe: 'video.php'

     }
];  


<?php
}
}else if(count($arrVideoFile[$key]) > 1){
?>

<style>
    #galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>

 <div id="galleriavideo_<?php echo $key; ?>">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>

<script type="text/javascript">

var data = [
    {

     iframe: 'video.php'

     }
];
</script>
</div>
<?php } ?>
</div>

         <script type="text/javascript">

            Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
            Galleria.run('#galleriavideo_<?php echo $key; ?>');

          </script>

<?php

        }
    }
        //end:procedure video

编辑：video.php

<?php

$key = filter_input(INPUT_GET, "key", FILTER_SANITIZE_STRING);
$i = filter_input(INPUT_GET, "i", FILTER_SANITIZE_NUMBER_INT);
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);

?>
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...

<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
    file: "<?php echo 'VideoFiles/'.$v; ?>",
    width: 480,
    height: 270
});

</script>

</div>

Assessment.php：

if(count($arrVideoFile[$key]) > 1){
?>

<style>
    #galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>

 <div id="galleriavideo_<?php echo $key; ?>">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>

<a href="video.php?key={$key}&i={$i}&v={$v}"><img class="iframe"></a>

<?php $i++; ?>
<?php } ?>
</div>

         <script type="text/javascript">

            Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
            Galleria.run('#galleriavideo_<?php echo $key; ?>');

          </script>

<?php

        }

Answer 1

这是有关如何在jwplayer中使用Galleria的简短示例。 然后，您可以尝试使其适应您的代码。

首先，有一个包含jwplayer的video.php文件：

<div id="container"></div>
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
    jwplayer("container").setup({
        file: "http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4",
        image: "http://content.bitsontherun.com/thumbs/3XnJSIm4-640.jpg"
    });
</script>

然后，有gallery.php文件，其中包含滑块：

<div id="galleria" style="height:350px; width:550px;">
    <a href="/path/to/video.php"><img class="iframe"></a>
</div>

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/galleria.js"></script>
<script type="text/javascript">
    Galleria.loadTheme('/path/to/galleria.classic.min.js');
    Galleria.run('#galleria');
</script>

如果要在滑块中显示多个视频，可以想像一个解决方案，其中video.php使用参数并根据该参数加载视频，即video.php?id=xx

编辑：澄清一下

您的video.php文件应video.php一些参数：

$key = filter_input(INPUT_GET, "key", FILTER_SANITIZE_STRING);
$i = filter_input(INPUT_GET, "i", FILTER_SANITIZE_NUMBER_INT);
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);

<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
    file: "<?php echo 'VideoFiles/'.$v; ?>",
    width: 480,
    height: 270
});

然后在gallery.php文件中：

<div id="galleria" style="height:350px; width:550px;">
    <a href="/path/to/video.php?key=xxx&i=xxx&v=xxx"><img class="iframe"></a>
    <a href="/path/to/video.php?key=xxx&i=xxx&v=xxx"><img class="iframe"></a>
    <a href="/path/to/video.php?key=xxx&i=xxx&v=xxx"><img class="iframe"></a>
    ...
</div>