Using RoyalSlider with html5 <video> tags

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