javascript - VideoJS 分辨率选择器在 Wordpress 中不起作用

Question

我目前正在使用 Wordpress 4.6.1 运行网站并安装了 Videojs HTML5 Player插件，我可以完美地嵌入我的视频。但我想添加一个功能，人们可以在 videojs 播放器中更改分辨率，例如:320,760,1080。所以我决定使用 videojs-resolution-switcher by kmoskwiak脚本来实现它到插件，我发现了一个问题。这是我到目前为止得到的:

我已经从 github 页面下载了 videojs-resolution-switcher.css 和 videojs-resolution-switcher.js 并将其上传到插件的/videojs 文件夹，这是插件的文件夹 View :

- 语言(文件夹)
---等等
- videojs(文件夹)
--- alt(文件夹)
--- 例子(文件夹)
---字体(文件夹)
--- ie8 (文件夹)
--- video-js.css
--- video-js.min.css
--- 视频.js
--- video.js.map
--- video.min.js
--- video.min.js.map
--- videojs-resolution-switcher.css
--- videojs-resolution-switcher.js
- 自述文件
- videojs-html5-player.css
- videojs-html5-player.php

之后，我修改了位于插件文件根目录的videojs-html5-player.php。

if (!defined('ABSPATH')) {
    exit;
}
if (!class_exists('VIDEOJS_HTML5_PLAYER')) {

    class VIDEOJS_HTML5_PLAYER {

        var $plugin_version = '1.1.0';

        function __construct() {
            define('VIDEOJS_HTML5_PLAYER_VERSION', $this->plugin_version);
            $this->plugin_includes();
        }

        function plugin_includes() {
            if (is_admin()) {
                add_filter('plugin_action_links', array($this, 'plugin_action_links'), 10, 2);
            }
            add_action('plugins_loaded', array($this, 'plugins_loaded_handler'));
            add_action('wp_enqueue_scripts', 'videojs_html5_player_enqueue_scripts');
            add_action('admin_menu', array($this, 'add_options_menu'));
            add_action('wp_head', 'videojs_html5_player_header');
            add_shortcode('videojs_video', 'videojs_html5_video_embed_handler');
            //allows shortcode execution in the widget, excerpt and content
            add_filter('widget_text', 'do_shortcode');
            add_filter('the_excerpt', 'do_shortcode', 11);
            add_filter('the_content', 'do_shortcode', 11);
        }

        function plugin_url() {
            if ($this->plugin_url)
                return $this->plugin_url;
            return $this->plugin_url = plugins_url(basename(plugin_dir_path(__FILE__)), basename(__FILE__));
        }

        function plugin_action_links($links, $file) {
            if ($file == plugin_basename(dirname(__FILE__) . '/videojs-html5-player.php')) {
                $links[] = '<a href="options-general.php?page=videojs-html5-player-settings">'.__('Settings', 'videojs-html5-player').'</a>';
            }
            return $links;
        }
        
        function plugins_loaded_handler()
        {
            load_plugin_textdomain('videojs-html5-player', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/'); 
        }

        function add_options_menu() {
            if (is_admin()) {
                add_options_page(__('Videojs Settings', 'videojs-html5-player'), __('Videojs HTML5 Player', 'videojs-html5-player'), 'manage_options', 'videojs-html5-player-settings', array($this, 'options_page'));
            }
        }

        function options_page() {
            $url = "http://wphowto.net/videojs-html5-player-for-wordpress-757";
            $link_text = sprintf(wp_kses(__('For detailed documentation please visit the plugin homepage <a target="_blank" href="%s">here</a>.', 'videojs-html5-player'), array('a' => array('href' => array(), 'target' => array()))), esc_url($url));
            ?>
            <div class="wrap"><h2>Videojs HTML5 Player - v<?php echo $this->plugin_version; ?></h2>
            <div class="update-nag"><?php echo $link_text;?></div>
            </div>
            <?php
        }

    }

    $GLOBALS['easy_video_player'] = new VIDEOJS_HTML5_PLAYER();
}

function videojs_html5_player_enqueue_scripts() {
    if (!is_admin()) {
        $plugin_url = plugins_url('', __FILE__);
        wp_enqueue_script('jquery');
        wp_register_script('videojs', $plugin_url . '/videojs/video.js', array('jquery'), VIDEOJS_HTML5_PLAYER_VERSION, true);
        wp_enqueue_script('videojs');
        wp_register_script('vjs-resolution-button', $plugin_url . '/videojs/videojs-resolution-switcher.js', array('jquery'));
        wp_enqueue_script('.vjs-resolution-button');
        wp_register_style('videojs', $plugin_url . '/videojs/video-js.css');
        wp_enqueue_style('videojs');
        wp_register_style('videojs-style', $plugin_url . '/videojs-html5-player.css');
        wp_enqueue_style('videojs-style');
        wp_register_style('vjs-resolution-button', $plugin_url . '/videojs/videojs-resolution-switcher.css');
        wp_enqueue_style('vjs-resolution-button');
    }
}

function videojs_html5_player_header() {
    if (!is_admin()) {
        $config = '<!-- This site is embedding videos using the Videojs HTML5 Player plugin v' . VIDEOJS_HTML5_PLAYER_VERSION . ' - http://wphowto.net/videojs-html5-player-for-wordpress-757 -->';
        echo $config;
    }
}

function videojs_html5_video_embed_handler($atts) {
    extract(shortcode_atts(array(
        'url' => '',
        'webm' => '',
        'ogv' => '',
        'width' => '',
        'controls' => '',
        'preload' => 'auto',
        'autoplay' => 'false',
        'loop' => '',
        'muted' => '',
        'poster' => '',
        'class' => '',
    ), $atts));
    if(empty($url)){
        return __('you need to specify the src of the video file', 'videojs-html5-player');
    }
    //src
    $src = '<source src="'.$url.'" type="video/mp4" />';
    if (!empty($webm)) {
        $webm = '<source src="'.$webm.'" type="video/webm" />';
        $src = $src.$webm; 
    }
    if (!empty($ogv)) {
        $ogv = '<source src="'.$ogv.'" type="video/ogg" />';
        $src = $src.$ogv; 
    }
    //controls
    if($controls == "false") {
        $controls = "";
    } 
    else{
        $controls = " controls";
    }
    //preload
    if($preload == "metadata") {
        $preload = ' preload="metadata"';
    }
    else if($preload == "none") {
        $preload = ' preload="none"';
    }
    else{
        $preload = ' preload="auto"';
    }
    //autoplay
    if($autoplay == "true"){
        $autoplay = " autoplay";
    }
    else{
        $autoplay = "";
    }
    //loop
    if($loop == "true"){
        $loop = " loop";
    }
    else{
        $loop = "";
    }
    //muted
    if($muted == "true"){
        $muted = " muted";
    }
    else{
        $muted = "";
    }
    //poster
    if(!empty($poster)) {
        $poster = ' poster="'.$poster.'"';
    }
    $player = "videojs" . uniqid();
    //custom style
    $style = '';   
    if(!empty($width)){
        $style = <<<EOT
        <style>
        #$player {
            max-width:{$width}px;   
        }
        </style>
EOT;
        
    }
    $output = <<<EOT
    <video id="$player" class="video-js vjs-default-skin"{$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{"fluid": true}'>
        $src
    </video>
    $style
EOT;
    return $output;
}

我刚刚将其添加到文件中:

wp_register_script('vjs-resolution-button', $plugin_url . '/videojs/videojs-resolution-switcher.js', array('jquery'));
wp_enqueue_script('.vjs-resolution-button');
wp_register_style('vjs-resolution-button', $plugin_url . '/videojs/videojs-resolution-switcher.css');
wp_enqueue_style('vjs-resolution-button');

这是我的嵌入代码:

<video id="my-video" class="video-js vjs-skin-flat-red" poster="https://images-na.ssl-images-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_SY1000_CR0,0,674,1000_AL_.jpg" preload="auto" controls="controls" width="640" height="264" data-setup="{&quot;fluid&quot;: true}">
<source src="https://lh3.googleusercontent.com/BzW8i4Ph6tZPKCTLaUwf1Mcg0sCNXbcfpTvgylU54-e_klkGlse1M-GB20iDV8htL7iCYCCxxxx" type="video/mp4" label="HD" />
<source src="https://lh3.googleusercontent.com/BzW8i4Ph6tZPKCTLaUwf1Mcg0sCNXbcfpTvgylU54-e_klkGlse1M-GB20iDV8htL7iCYCCxxxx" type="video/mp4" label="SD" />
<source src="https://lh3.googleusercontent.com/BzW8i4Ph6tZPKCTLaUwf1Mcg0sCNXbcfpTvgylU54-e_klkGlse1M-GB20iDV8htL7iCYCCxxxx" type="video/mp4" label="TS" />
<track kind="captions" src="/wp-content/uploads/2016/11/myvideo.vtt" srclang="id" label="Indonesia" default="" />&nbsp;

</video>
<script>
  videojs('my-video').videoJsResolutionSwitcher()
</script>

我从 Chrome 的开发者控制台得到了这个:

Uncaught ReferenceError: videojs is not defined at line 430

这是指这一行:

  videojs('my-video').videoJsResolutionSwitcher()

分辨率选择器没有出现在 videojs 播放器上，我是不是错过了什么？

提前致谢!任何帮助将不胜感激。

Answer 1

尝试以这种方式初始化它:

videojs('my-video', {
            plugins: {
                videoJsResolutionSwitcher: {
                    default: 480,
                    dynamicLabel: true
                }
            }
        }, function() {
            this.updateSrc([{src="https://lh3.googleusercontent.com/BzW8i4Ph6tZPKCTLaUwf1Mcg0sCNXbcfpTvgylU54-e_klkGlse1M-GB20iDV8htL7iCYCCxxxx" type="video/mp4" label="HD"},{src="https://lh3.googleusercontent.com/BzW8i4Ph6tZPKCTLaUwf1Mcg0sCNXbcfpTvgylU54-e_klkGlse1M-GB20iDV8htL7iCYCCxxxx" type="video/mp4" label="SD"},{source src="https://lh3.googleusercontent.com/BzW8i4Ph6tZPKCTLaUwf1Mcg0sCNXbcfpTvgylU54-e_klkGlse1M-GB20iDV8htL7iCYCCxxxx" type="video/mp4" label="TS" }])
            this.on('resolutionchange', function() {
                console.info('Source changed to %s', this.src())
            })
            this.autoplay(true)
        });