Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #1037834

    Hi there,

    I have added a video to my homepage and it looks great. However, I want it to autoplay upon page load and I don’t see any controls for this. I tried a code block with embed code from Vimeo and it looked horrible and still didn’t auto play! Can you help? I want it to look exactly as it does now, but with autoplay.

    #1038583

    Hey 1lizcollins,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    #1038599

    Thanks for your help! I prefer not to use this plugin – credentials below.

    #1040143

    Hi,

    It’s possible to enable autoplay but you have to mute the video. This is in accordance with the browsers’ autoplay policy.

    // https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

    Chrome’s autoplay policies are simple:

    Muted autoplay is always allowed.
    Autoplay with sound is allowed if:
    User has interacted with the domain (click, tap, etc.).
    On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    On mobile, the user has [added the site to their home screen].
    Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

    Best regards,
    Ismael

    #1040401

    Thanks for the response. Unfortunately I’m still stuck here. I added a string to the URL of the video which mutes it, and the Enfold video player still isn’t working. Your response did outline Chrome’s rule, which I appreciate, but you’ve left out how to make your video element function as it should. I’ve tried adding the embed code from Vimeo and it autoplays but none of the code that is supposed to control it’s size seems to be working.

    I either need the Enfold video player to autoplay or help getting the embed code to fit the full width of the content area. Can you please help? You’ll see the video player first, with the embed code underneath on the link below. Thanks in advance.

    #1040470

    I’ve just tested the embedded video on another staging site that is running PHP7.2 (the current install is running PHP5.6), but it still won’t auto-play. Link below.

    #1040484

    I’ve decided to use full-width easy slider as I really need a solution asap, and I’m testing on a new page (link below, credentials are the same). It autoplays if muted but there are no visible controls so the user cannot hear the script for the video which is essential. I’ve selected various controls for the slider in the settings panel but none are visible to a site visitor. Please help! I’m open to using any of the options available with the theme, but none are working as expected. I just need full-width, autoplay, and the ability to adjust volume, etc. Thanks in advance.

    • This reply was modified 1 year, 4 months ago by  1lizcollins.
    #1041065

    Hi,

    Thanks for the update. Add the following script in the functions.php file to set the volume to 100 when the video starts to play.

    add_action('wp_footer', 'ava_custom_vimeo_api');
    function ava_custom_vimeo_api(){
    	?>
    	<script type="text/javascript">
                var iframe = document.querySelector('.av-video-slide .mejs-mediaelement iframe');
                var player = new Vimeo.Player(iframe);
    
                player.on('play', function() {
                    console.log('playing');
                    player.setVolume(100);
                });
    	</script>
    	<?php
    }
    

    Best regards,
    Ismael

    #1041072

    Thanks Ismael. I added the code, cleared my cache several times and reloaded, and the video still autoplays silently. What else can we try?

    #1041568

    Hi,

    Add this code above the previous script tag.

    <script src="https://player.vimeo.com/api/player.js"></script>
    

    That should fix the error in the console:

    ReferenceError: Vimeo is not defined
    

    Best regards,
    Ismael

    #1041667

    Hi Ismael,

    Thanks again for your reply. I’ve added that script but there is still no sound on autoplay. Is this order correct?

    add_action(‘wp_footer’, ‘ava_custom_vimeo_api’);
    function ava_custom_vimeo_api(){
    ?>
    <script src=”https://player.vimeo.com/api/player.js”></script>
    <script type=”text/javascript”>
    var iframe = document.querySelector(‘.av-video-slide .mejs-mediaelement iframe’);
    var player = new Vimeo.Player(iframe);

    player.on(‘play’, function() {
    console.log(‘playing’);
    player.setVolume(100);
    });
    </script>
    <?php
    }

    Thanks in advance for your help here. My client is getting quite antsy to get their video up on the homepage – what else can we try?

    #1041988

    Hi,

    Looks like you can’t play the video with sounds unless the user interact with the video first. This script sets the volume to 100% but then the browser automatically pause the video because there’s no interaction.

    add_action('wp_footer', 'ava_custom_vimeo_api');
    function ava_custom_vimeo_api(){
        ?>
        <script src="https://player.vimeo.com/api/player.js"></script>
        <script type="text/javascript">
            document.addEventListener( "DOMContentLoaded", () => {
                var player = null;
                let slide = document.querySelector('.av-video-slide'); 
                let iframes = slide.getElementsByTagName('iframe'); 
    
                for (var i = 0; i < 1; i++) { 
                    player = new Vimeo.Player(iframes[i]);
                }
    
                player.on('play', function() {
                    console.log('playing');
                    player.setVolume(1);
                });
    
                // player.on('pause', function() {
                //     console.log('paused');
                //     player.play();
                // });
            });      
    	</script>
    	<?php
    }

    This is what you’ll get after setting the volume:

    player.js:2 Unmuting failed and the element was paused instead because the user didn't interact with the document before. https://goo.gl/xX8pDD
    

    If you listen for the “pause” event and call the play method there, the browser will pause the video infinitely.

    One workaround is to disable the autoplay and then add a caption > button to the slider. Users will then be able to play the video manually. Use this code to trigger the play method when the user click on the slider button.

    add_action('wp_footer', 'ava_custom_vimeo_api');
    function ava_custom_vimeo_api(){
        ?>
        <script src="https://player.vimeo.com/api/player.js"></script>
        <script type="text/javascript">
            document.addEventListener( "DOMContentLoaded", () => {
                var player = null;
                let slide = document.querySelector('.av-video-slide'); 
                let iframes = slide.getElementsByTagName('iframe'); 
    
                for (var i = 0; i < 1; i++) { 
                    player = new Vimeo.Player(iframes[i]);
                }
    
                player.on('play', function() {
                    console.log('playing');
                    player.setVolume(1);
                });
    
                slide.querySelector('.avia-slideshow-button').addEventListener( 'click', () => {
                    player.play();
                });
            });      
    	</script>
    	<?php
    }

    Best regards,
    Ismael

    #1042864

    Hi Ismael,

    Thanks again for bearing with me. I replaced the old code with the last bit you sent, but there is no button. There is sound when i click the image, thankfully, but without a button users will have no idea it’s a video. What else can we try to get a play button?

    #1042909

    Hi,

    but there is no button.

    You have to add the button manually. Edit the slide and then go to the Captions panel. You’ll be able to add a button there.

    Best regards,
    Ismael

    #1043494

    Thanks Ismael – I missed this in your previous post. I’ve taken a look a the options on the caption tab, and I see the ability to add a button. I did so, with no link and I get a blank page, and I can’t figure out what url would be appropriate. Can you please spell this out for me? What exactly do I need to do to get a play button that works?

    #1044477

    Hi again – any update on this? My client cannot understand why I can’t get a simple video in place with a play button, and honestly, neither can I. I need this video in place by tomorrow – can someone please help me get this sorted out?

    #1044711

    Hi,

    Sorry for the late response. Just add a hashtag symbol in the url field, so the button doesn’t link anywhere. I’ve already edited the button url, so you can test the play button now. It’s working properly on my end.

    Best regards,
    Ismael

    #1045026

    Thanks, Ismael. We still have a problem – that button does not disappear when the video plays, so it’s obscuring the center of the video the whole time. What can we do about this?

    #1046170

    Hi,

    Replace the script with this, so it hides the button on play and render it back on pause.

    add_action('wp_footer', 'ava_custom_vimeo_api');
    function ava_custom_vimeo_api(){
        ?>
        <script src="https://player.vimeo.com/api/player.js"></script>
        <script type="text/javascript">
            document.addEventListener( "DOMContentLoaded", () => {
                const player = null;
                let slide = document.querySelector('.av-video-slide'); 
                let iframes = slide.getElementsByTagName('iframe'); 
                const button = slide.querySelector('.avia-slideshow-button');
    
                for (var i = 0; i < 1; i++) { 
                    player = new Vimeo.Player(iframes[i]);
                }
    
                player.on('play', function() {
                    button.style.display = 'none';
                    player.setVolume(1);
                });
    
                 player.on('pause', function() {
                    button.style.display = 'block';
                });
    
               button.addEventListener( 'click', () => {
                    player.play();
                });
            });      
    	</script>
    	<?php
    }

    Best regards,
    Ismael

    #1050127

    Thanks Ismael. Unfortunately it looks like we are going backwards here. The button doesn’t work (It actually seems to be obscuring the play button embedded in the video) and when I finally get the video to play once again there is no sound. My client needed this video live weeks ago, and we seem no closer to a fix. I am desperate for a fix here.

    On the demo page you will see first the full-width video that is not working, but the smaller video below is actually not bad. Could you please help me get it formatted to span the full-width of the page? Or can we get the full-width video working as expected? I’ve had nothing but positive experiences with you, your team and Enfold until this video issue – please help!

    #1050904

    Hi,

    There’s a minor error in the console. Please look for this line:

    const button = slide.querySelector('.avia-slideshow-button');
    

    Replace it with:

    let button = slide.querySelector('.avia-slideshow-button');
    

    Best regards,
    Ismael

    #1050935

    Ismael, I made this change but the button does not work; I still cannot play the video. Help!

    #1051150

    Hi,

    Odd. Please post the WP and FTP details in the private so that we can modify and test the code.

    Best regards,
    Ismael

    #1051160

    Thank you! See below.

    #1051801

    Hi,

    Thanks for the info. I adjusted the code a bit. Clicking on the button will play or pause the video and set the volume to 1 or 100%. I also adjusted the button’s position, so it doesn’t cover the video.

    add_action('wp_footer', 'ava_custom_vimeo_api');
    function ava_custom_vimeo_api(){
        ?>
        <script src="https://player.vimeo.com/api/player.js"></script>
        <script type="text/javascript">
            document.addEventListener( "DOMContentLoaded", () => {
                let player = null;
                const slide = document.querySelector('.av-video-slide'); 
                let iframes = slide.getElementsByTagName('iframe'); 
                const button = slide.querySelector('.avia-slideshow-button');
    
                button.classList.add('paused');
    
                for (var i = 0; i < 1; i++) { 
                    player = new Vimeo.Player(iframes[i]);
                }
    
                player.on('play', () => {
                    console.log('played');       
                    player.setVolume(1);
                    button.classList.replace('paused', 'playing');   
                });
    
                player.on('pause', () => {
                    console.log('paused');   
                    button.classList.replace('playing', 'paused');       
                });
                
                if( slide ) {
                    button.addEventListener( 'click', (e) => {
                        e.preventDefault();
                        if( button.classList.contains('playing') ) {       
                            button.textContent = 'Play Video';
                            player.pause();
                        }
    
                        if( button.classList.contains('paused') ) {                       
                            button.textContent = 'Pause Video';
                            player.play();
                        } 
                    });
                }  
            });      
    	</script>
    	<?php
    }

    CSS code:

    .avia-slideshow-button.paused, .avia-slideshow-button.playing {
        position: absolute;
        right: 0;
        bottom: -50px;
    }

    Best regards,
    Ismael

    #1055323

    Hi Ismael,

    This looks good and works on desktops, but it doesn’t look right on smaller screens. On the desktop version you see no progress bar, etc, but on smaller screens you can see the progress bar and play button half-way peeking up underneath the play button you have added. Can you remove them, please? I’m fine without them, but having both makes the video player look a bit broken. Thanks.

    #1057285

    Hi,

    The thread is getting a bit too long. Please create a new thread or ticket then we’ll continue there.
    You can also hide that element on mobile view and display an image with a link to the vimeo video.

    Best regards,
    Ismael

Viewing 27 posts - 1 through 27 (of 27 total)

You must be logged in to reply to this topic.