How do I add video to a page

437 Posts

distant_smile Reply #1, 14 years, 6 months ago

Hi all, how do I add video to a page. I want to have a series of small thumbnail images (similar to when you embed a You-Tube video) in sizes I can manipulate. I have a few AVI files I want to show on a modx (Evolution) page. Any suggestions welcome
Thanks

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #2, 14 years, 6 months ago

This may help for simple embedding: http://www.joshua19media.com/tutorials/2012/04/12/videos-in-modx-revolution/

You could also look at VidLister: http://modx.com/extras/package/vidlister

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

387 Posts

whistlemaker Reply #3, 14 years, 6 months ago

I recently used jplayer to add audio files to a page - jPlayer is a jquery based html5 based audio and video player - it works very well.

jPlayer - http://jplayer.org/

And there is a write up of one way to add into modx here: http://www.webandflowdesign.com/blog/html5-player

edit: I should have added that jplayer uses flash as a backup as needed and that the write up was for modx revo [ed. note: whistlemaker last edited this post 14 years, 6 months ago.]

1,098 Posts

microcipcip Reply #4, 14 years, 6 months ago

I used JWplayer for a similar project, it is really cool. It works with flash and HTML5, and is really well documented. Here is a sample of the code I used:

<script type="text/javascript" src="assets/templates/default/js/jwplayer.js"></script>

<div id="player">The video is loading ...</div> 
    <script type="text/javascript"> 
        jwplayer("player").setup({
        flashplayer: "assets/templates/default/player/player.swf", 
        file: "[*slideshow-video-url*]", 
        autostart: false,
        volume: 80,
        height: 400, 
        width: 592,
        'skin': 'assets/templates/default/skins/glow.zip',
        plugins: { 
            sharing: { link: true } 
        }									
    }); 								
</script>

The best way though would be to upload the video on youtube or vimeo because they have very fast servers. Here are some snippets that can output both thumbnails and resize the video as you wish:
http://www.jertix.org/en/blog/modx-cms/modx-evolution-snippet-youtube-video-resizer.html
http://www.jertix.org/en/blog/modx-cms/modx-evolution-snippet-bliptv.html
http://www.jertix.org/en/blog/modx-cms/modx-evolution-snippet-vimeo.html

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

67 Posts

mmcglynn Reply #5, 14 years, 6 months ago

The best way that I have found is to use a service like Vimeo or YouTube. This way, you can establish a template variable that contains the ID of the particular video and use the vendor's embed code.

Then, the admin user can control which video to display.

Make sure that your video is permissioned to be publicly viewable, otherwise you will go crazy trying to understand why it won't load.