pupunzi / jquery.mb.YTPlayer

use a custom yutube player for a video as background on jQuery framework

Home Page:https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Timer 'YTPlayerStartPlay' already exists

luukee opened this issue · comments

Hi running into some issues on the console output, you can test it on this page.

Timer 'YTPlayerStartPlay' already exists buildPlayer @ autoptimize_eb96a56302d0cad6990498e6ba24a000.js:16
Timer 'YTPlayerInit' already exists buildPlayer @ autoptimize_eb96a56302d0cad6990498e6ba24a000.js:16

Console output

Not sure what would be causing this??

We are using Advanced Custom Fields to input the YouTube video URLs on WP Admin. And outputting the URLs link this:

<?php
       if (get_field('latest_video', $term)) {
            $videoLatest = get_field('latest_video', $term);
        } else {
            $videoLatest = get_field('video_embedd');
        }
?>
<div id="bigVideoHero" class="player" data-property="{
    videoURL:'<?php echo $videoLatest; ?>', 
    containment:'#videoHeroContainment', 
    coverImage:'<?php echo esc_url($profile_hero_lg['url']); ?>', 
    mobileFallbackImage:'<?php echo esc_url($profile_hero_lg['url']); ?>', 
    autoPlay:true, 
    mute:true, 
    opacity:1, 
    showControls:false, 
    optimize_display:true, 
    loop:true, 
    showYTLogo:false, 
    stopMovieOnBlur:true,
    playOnlyIfVisible:true }">
</div>

We are also using custom buttons to mute and unmute the player:

<button data-toggle="videoCoverOn" class="button is-active icon" onclick="jQuery('#bigVideoHero').YTPUnmute()">
    <?php get_template_part('template-parts/svg/icon-play', ''); ?>
    <strong>Watch</strong>
</button>
<button class="clear button is-active icon" data-toggle="videoCoverOn" onclick="jQuery('#bigVideoHero').YTPMute()">
    <?php get_template_part('template-parts/svg/icon-pause', ''); ?>
    <strong>Pause</strong>
</button>

Our footer.php call to the player:

  <script>
    jQuery(function() {
      jQuery("#video-header-hero").YTPlayer();
      jQuery("#bigVideoHero").YTPlayer();
      jQuery("#modal-video").YTPlayer();
      jQuery("#modal-video-container").YTPlayer();
      jQuery("#fullHeroVideo").YTPlayer();
      jQuery("#modal-hero-video").YTPlayer();
      jQuery("#modal-video").YTPlayer();
    });
  </script>

  <script>
    function onPlayerReady(event) {
      $('.bounce').click(function() {
        ytPlayer.playVideo();
      });
    }
  </script>

Let me know if we are duplicating or missing something. Thanks for your help!

  • Luke

@luukee Hi,
This issue will be fixed on the next release. the script has a debug labeled timer to verify the time needed to lad the player and to start playing. At the time this timer is initialized for each video on the page with the same label. On the next release, it will be named with the video ID suffix.

@pupunzi thats great to hear!

Thanks for letting me know. Looking forward to the update 👍

Take care!