Question

在使用iframe时，我失败了，我需要一些帮助。我之前从未使用过iframe，这是我的第一次。

以下是关于我要使用galleria滑块生成iframe的注意事项：http://galleria.io/docs/references/data/

我拥有的是一个jwplayer，我想使用iframe访问视频以检索video.php页面中的视频。如果只有一个视频，那么只需从video.php页面中检索正确的视频，但如果有多个视频，则检索正确的多个视频并将其显示在galleria滑块中。但我的问题是如何让iframe工作才能做到这一点？

下面是video.php页面，其中显示了jwplayer：

   <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的简短示例。您可以尝试使其适应您的代码。

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

<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文件应该采用一些参数：

$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>

无法使用iframe

1 个答案: