videojs / videojs-youtube

YouTube playback technology for Video.js
1.12k stars 548 forks source link

VIDEOJS: ERROR: TypeError: this.ytPlayer.getDuration is not a function && this.ytPlayer.getPlaybackRate #577

Open stefanomonteiro opened 3 years ago

stefanomonteiro commented 3 years ago

Hi.

I am getting the following errors on the console:

VIDEOJS: ERROR: TypeError: this.ytPlayer.getDuration is not a function && VIDEOJS: ERROR: TypeError: this.ytPlayer.getPlaybackRate is not a function.

Here is where they can be seen live: https://wordpress-513216-1628950.cloudwaysapps.com/

I have created a WP shortcode plugin to add them to the page. Here is my code:

function display_sm_videojs($atts)
{
    $a = shortcode_atts(array(
        'class' => '',
        'autoplay' => '',
        'preload' => 'auto'
    ), $atts);

    $id = get_the_ID();
    $videoType = get_post_meta($id, 'upload-video-from', true);
    $postThumbnail = get_the_post_thumbnail_url($id);
  .
  .
  . 
  .

    if ($videoType === 'YouTube') {
        $videoURL = get_post_meta($id, 'from-youtube', true);
        $dataSetup = '{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "' . $videoURL . '"}], "youtube": { "rel": 0 } }';

        // Add YouTube VideoJS Plugin 
        if (!wp_script_is('sm-videojs-youtube', 'enqueued')) {
            wp_enqueue_script('sm-videojs-youtube');
        }
  .
  .
  . 
  .
  .
  .
  . 
  .

    $video = "
        <div class='video-js-responsive-container vjs-hd " . esc_attr($a['class']) . "'>
            <video
            id='my-video'
            class='video-js'
            controls
            " . esc_attr($a['autoplay']) . "
            preload=' " . esc_attr($a['preload']) . "'
            controlsList='nodownload'
            poster='$postThumbnail'
            data-setup='$dataSetup'
        >
                $videoSource
                <!-- <source src='MY_VIDEO.webm' type='video/webm' /> -->
                <p class='vjs-no-js'>
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href='https://videojs.com/html5-video-support/' target='_blank'
                    >supports HTML5 video</a
                >
                </p>
            </video>
        </div>";

    //! Enqueue Style / Scripts
    // Styles
    if (!wp_style_is('sm-videojs-css', 'enqueued')) {
        wp_enqueue_style('sm-videojs-css');
    }
    // Scripts
    if (!wp_script_is('sm-videojs-js', 'enqueued')) {
        wp_enqueue_script('sm-videojs-js');
    }

    return $video;
}

function register_sm_videoJS()
{

    // Register Style/Scripts
    wp_register_style('videojs-css', 'https://vjs.zencdn.net/7.10.2/video-js.css', [], '1.0.0');
    wp_register_style('sm-videojs-css', plugin_dir_url(__DIR__) . 'sm_videojs/css/sm-videojs.min.css', ['videojs-css'], '1.0.0');

    wp_register_script('sm-videojs-js', plugin_dir_url(__DIR__) . 'sm_videojs/js/video.min.js', ['elementor-frontend'], '1.0.0', true);
    wp_register_script('sm-videojs-youtube', plugin_dir_url(__DIR__) . 'sm_videojs/js/Youtube.min.js', ['sm-videojs-js'], '1.0.0', true);

    // Add Shortcode
    add_shortcode('sm-videojs', 'display_sm_videojs');
}

add_action('init', 'register_sm_videoJS');
stefanomonteiro commented 3 years ago

Hey devs, if I could have a reply here please. I have a week left to finish this project and would like to know if this can be solved. Should I be able to have multiple youtube videos on the same page? Is it why I am having the issue? Thanks