how to create video gallery, like example on your website

buellresearch's Avatar

buellresearch

13 Apr, 2018 03:00 AM

I've just purchased Royal Slider this evening, so I hope you won't mind a newbie question. Basically, I'd like to create galleries that are similar in look and functionality to http://dimsemenov.com/plugins/royal-slider/video-gallery/ . This would be with .mp4 videos that are hosted on my own site. (This is for use by a small number of users as part of a learning management system, so self-hosting is a better option than using Vimeo or Youtube.)

So far, I've been able to get started with RoyalSlider by creating a slider with 2 slides, each of which I have linked to a different .mp4 file on the same server that is hosting my wordpress installation. For each slide, I've pasted the URL of the video source file into the "Link" line in the "Image and Video" tab of the slide's edit screen, and I've selected a cover image from the Wordpress Media Library. Similar to the look of your example, in the "General Options" area for the slider I've selected the template that shows linking text on the right side (right-hand option, second row). I've saved the sllder, and I have pasted its new_royalslider shortcode into the Wordpress post in which I want it to appear.
Wnen viewing the post, I am able to see the slider as expected, and to click on the navigation at right to change the static image that appears in the main window. So far, so good. However, unlike in your example, there is no right-triangle Play button overlaid on the image. And when I click on that image, instead of playing the attached video within the same play area as the slider, the entire page disappears and is replaced by a bare Wordpress html5 player on an empty page, where the video proceeds to play.
How can I fix this so that my site's slider, like the one in your example, plays the video source file in the slider's own play area, instead of switching to a player on an empty page when the static image is clicked?

Thanks,
Jim

  1. Support Staff 1 Posted by Dmitry Semenov on 13 Apr, 2018 04:30 AM

    Dmitry Semenov's Avatar

    Hello,

    The slider supports only YouTube and Vimeo videos, you may:

  2. 2 Posted by buellresearch on 13 Apr, 2018 05:07 AM

    buellresearch's Avatar

    I'll try your JavaScript API. But am I right in understanding that there
    are just about no html5 player plugins that can create video galleries?

    I guess the best functionality I've seen is actually WordPress media
    library's own 'create gallery' feature, that lists names and durations of
    mp4 files under a player. Is there nothing better? Seems surprising as well
    as unfortunate, if so. Is there something about WordPress or html5 making
    this more difficult to accomplish than it seems like it should be?

    I'd been hoping for something that would do even more. Namely, to change a
    bit of html elsewhere in the same post/page when the video's slide changes,
    such as a transcript or a question set. Would Royal help to make that
    happen? That doesn't seem too different from what can happen when image
    slides change in your slider.

    Thanks for making a great plugin. Fingers crossed, we can make it work for
    the kind of needs I've got.

    Best,
    Jim

  3. Support Staff 3 Posted by Dmitry Semenov on 13 Apr, 2018 08:48 AM

    Dmitry Semenov's Avatar

    But am I right in understanding that there are just about no html5 player plugins that can create video galleries?

    WordPress has a built-in feature to show videos https://wphowto.net/how-to-embed-video-in-wordpress-861 However it's not dynamic and can not be added to RoyalSlider without additional JS code.

    I'd been hoping for something that would do even more. Namely, to change a bit of html elsewhere in the same post/page when the video's slide changes

    RoyalSlider has event rsAfterSlideChange that triggers each time slides are switched http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

  4. 4 Posted by buellresearch on 13 Apr, 2018 08:17 PM

    buellresearch's Avatar

    I've been trying your javascript code (from
    http://help.dimsemenov.com/kb/royalslider-javascript-api/adding-support-for-third-party-video-player#example-of-usage-in-wordpress-version-of-slider-)
    in
    my theme's functions.php, but haven't been able to get it to work. In fact,
    I crashed my site and had to go into the back-end via ftp, to remove the
    problematic code. Probably just my mis-typing a quotation mark while I was
    hacking around.

    Would you happen to know if Wordpress square-bracketed shortcodes for
    video, embed, or iframes can successfully be used in this line:

    > slider.videoObj = $('<h1>Hello world. You should put here your code for video player. Video URL is:' + url + '</h1>');
    >
    >
    I'd really appreciate if you could suggest a complete line for this that
    would work in WordPress. Something like this just hasn't done the job for
    me:

     slider.videoObj = $('[video src = ' + url + ']');

    This still acts the same as if the custom function was not in functions.php
    -- that is, clicking on the static image in the slide opens the video on a
    new page, rather than in the Royal Slider.

    Many thanks,
    Jim

  5. Support Staff 5 Posted by Dmitry Semenov on 14 Apr, 2018 04:50 AM

    Dmitry Semenov's Avatar

    If you're looking for HTML5 video element, you need something like:

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

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac