How to display video in a slider

iframe, javascript, jquery, jwplayer, php

Solution

It is a bit strange, another user posted an extremely similar question here: Having trouble using iframes

Anyway, I will try to post a solution close to your code. I presume you want one slider with multiple videos.

You need two files: `video.php`, a page showing a video according to a certain filename and `gallery.php`, the page containing the slider.

`video.php`:

<?php
    $v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);
?>

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

`gallery.php`:

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

     <div id="galleriavideo" style="width:500px; height:300px; background:#000;">
         <?php
             foreach($arrVideoFile[$key] as $v) { 
                 $vurl = "/path/to/video.php?v=".rawurlencode($v);?>
                 <a href="<?php echo $vurl; ?>"><img class="iframe"></a>
         <?php } ?> 
     </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('#galleriavideo');
    </script>

<?php } ?>

Problem

I am using galleria slider as a jquery slider nd jwplayer to display videos. Problem is that it does not display the jwplayer in the slider, it just displays a black square. I got it working for images but can't get it working for the video player jwplayer. Can somebody who knows how to do this modify the code below so it is working in my app? Galleria: http://galleria.io/docs/ jwplayer: http://www.longtailvideo.com/jw-player/ ``` <?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) { ?> <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++; ?> </script> </div> <?php } ?> </div> <script type="text/javascript"> Galleria.loadTheme('jquery/classic/galleria.classic.min.js'); Galleria.run('#galleriavideo_<?php echo $key; ?>'); </script> <?php } ?> ```

Original source