Autoplay Vimeo video added to homepage with Avia Video block

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

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

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

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

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