Using RoyalSlider with html5 <video> tags

Hi Jerry,

It looks like the primary issue is that you're calling some of the JavaScript outside of the $(window).load() function, causing it to be executed out of order. As well, you'll probably want to add the autoplay property to the video so that it will play when the user clicks the slide's play button. It would look something like this:

<script type='text/javascript'>

$(window).load(function() {
  
  $('.royalSlider').royalSlider({
    //autoScaleSlider:false,
    controlNavigation: 'thumbnails',
    autoScaleSlider: true,
    arrowsNavHideOnTouch: true,
    fitInViewport: true,
    loop: true,
    fullscreen: {
      enabled: true,
      nativeFS: false
    },
    globalCaption: true,
    numImagesToPreload: 2,
    thumbs: {

    }
  });
  
  $('.rsGCaption').after($('.rsNav'));
      
  var slider = $('.royalSlider').data('royalSlider');
  slider.ev.on('rsOnCreateVideoElement', function(e, url) {
    slider.videoObj = $('<video autoplay="true" src=" ' + url + '"></video>');
  });

});

</script>

Let me know if that helps!

Thanks,

Hey Daniel,

I didn't expect that you'd be an expert with RoyalSlider as well. I'm impressed.

Your suggestion worked with one small tweak.

Instead of 'autoplay="true"', I used the 'controls' attribute, otherwise the video would remain playing even when advancing the slider to another slide, and would stack up playing copies of the video playing each time I returned to the video.

Here's the final code for the test html version:

<script type='text/javascript'>

$(window).load(function() {

$('.royalSlider').royalSlider({
//autoScaleSlider:false,
controlNavigation: 'thumbnails',
autoScaleSlider: true,
arrowsNavHideOnTouch: true,
fitInViewport: true,
loop: true,
fullscreen: {
enabled: true,
nativeFS: false
},
globalCaption: true,
numImagesToPreload: 2,
thumbs: {

}
});

$('.rsGCaption').after($('.rsNav'));

var slider = $('.royalSlider').data('royalSlider');
slider.ev.on('rsOnCreateVideoElement', function(e, url) {
slider.videoObj = $('<video controls src=" ' + url + '"></video>');
});

});

</script>

And here's the body code for a CMSB implementation for a single record section with an upload field that allows multiple uploads of either images or .mp4 videos (the head code does not change):

div class="royalSlider rsDefault">
<?php foreach ($exhibition_submissionsRecords as $record): ?>
<?php foreach ($record['submissions'] as $index => $upload): ?>
<?php $recNum = $upload['num'] ?>
<?php if ($upload['extension'] == 'mp4'): ?>
<div class="rsContent" > <a class="rsImg" href="http://www.your_site.com/images/video_placeholder_image.jpg" data-rsVideo="http://your_site.com<?php echo $upload['urlPath'] ?>">
<?php else:?>
<div><a class="rsImg " href="<?php echo $upload['urlPath'] ?>">
<?PHP $upload['info1'] = preg_replace("/[\"]/", "''", $upload['info1'] ); // replace all double quotes with 2 single quotes?>
<?PHP $upload['info2'] = preg_replace("/[\"]/", "''", $upload['info2'] ); ?>
<?PHP $upload['info3'] = preg_replace("/[\"]/", "''", $upload['info3'] ); ?>
<?PHP $upload['info4'] = preg_replace("/[\"]/", "''", $upload['info4'] ); ?>
<?php endif ?>
<div align='center' style='font-size:1.4em; color:#FFF' class='sub_heading_font' >
<?php if($upload['info1']):?>
Title: <?php echo $upload['info1']?>
<?php else :?>
<span style="color:#C30">No Title</span>
<?php endif ?>
<br />
<?php if($upload['info2']):?>
Medium: <?php echo $upload['info2']?>
<?php else :?>
<span style="color:#C30">No Medium</span>
<?php endif ?>
<br />
<?php if($upload['info3']):?>
Dimensions: <?php echo $upload['info3']?>
<?php else :?>
<span style="color:#C30">No Dimensions</span>
<?php endif ?>
<br />
<?php if($upload['info4']):?>
Price: <?php echo $upload['info4']?>
<?php else :?>
<span style="color:#C30">No Price</span>
<?php endif ?>
<br />
</a>
<div class="rsTmb" > <img class="rsTmb" src="<?php if ($upload['extension'] == 'mp4'): ?>http://www.your_site.com/images/video_placeholder_image.jpg<?php else :?><?php echo $upload['thumbUrlPath'] ?><?php endif ?>" /></div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</div>

Thanks again,

Jerry