The same way you would on any HTML page. MODx doesn’t care what javascript you use.
You can use snippets, TVs and chunks to automate the loading of the playlist items.
For example, on one site I needed a different video played in the sidebar for each page. I had a radio-button TV for the user to select from the available videos for each resource (this could also be a file upload type TV and work in much the same way), then in the sidebar I have this chunk, which is pretty much a standard Flowplayer setup:
<div id="rightFlash">
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a href="assets/flash/videos/pages/[*PageVideos*].flv" id="player"> </a>
<!-- this will install flowplayer inside previous A- tag. -->
<script type="text/javascript" src="assets/js/rightmovie.js"></script>
</div>
Then I wrote a snippet to check for valid .flv files and load the above chunk if the file is OK, and load a default image in case there is no valid .flv file:
<?php
$movie = $modx->getTemplateVar('PageVideos');
if (!empty($movie['value'])) {
if(is_file('assets/flash/videos/pages/' . $movie['value'] . '.flv')) {
$chunk = $modx->getChunk('rightflash');
return $chunk;
}
}
$output = '<img id="noVideo" src="assets/js/images/flash_bkg.png" width="250" height="261" alt="" />';
return $output;
?>
The included javascript file to configure the player and run it is basically what the Flowplayer demos have:
flowplayer("player", "assets/flash/flowplayer.commercial-3.1.5.swf", {
key: 'xxxxxxxxxxxxxxx',
logo: {
url: '../js/images/flash_bkg.png',
fullscreenOnly: false,
zIndex:0,
top: '45%',
left: '50%'
},
splash: {
backgroundColor: '#ffffff'
},
canvas: {
backgroundColor: '#ffffff'
},
screen: {
backgroundColor: '#ffffff'
},
clip: {
autoPlay: true, autoBuffering: true,
// let screen fade in gradually so Acme logo can be seen below it
fadeInSpeed: 3000,
// on last second, fade out screen
onLastSecond: function() {
this.getScreen().animate({opacity: 0}, 3000);
},
// if screen is hidden, show it upon startup
onStart: function() {
this.getScreen().css({opacity: 1});
}
},
plugins: {
controls: {
autoHide: 'true',
hideDelay: 1000,
}
}
});
For a gallery playlist, you can use a snippet to scan a directory and generate the appropriately formatted list of videos for Flowplayer to work with; you would embed the snippet in the spot where normally the playlist would be in the javascript, which in this case would be inline rather than loaded from an external file so the snippet can do its thing.
☆ A M B ☆
