我目前正在使用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文件夹，这是插件的文件夹视图：
- 语言（文件夹）
---等
- videojs（文件夹）
--- alt（文件夹）
---例子（文件夹）
--- font（文件夹）
--- ie8（文件夹）
--- video-js.css
--- video-js.min.css
--- video.js
--- video.js.map
--- video.min.js
--- video.min.js.map
--- videojs-resolution-switcher.css
--- videojs-resolution-switcher.js
- readme.txt
- 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="{"fluid": 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="" />
</video>
<script>
videojs('my-video').videoJsResolutionSwitcher()
</script>
我从Chrome的开发者控制台获得了这个：
Uncaught ReferenceError: videojs is not defined at line 430
这是指这一行：
videojs('my-video').videoJsResolutionSwitcher()
并且分辨率选择器没有出现在videojs播放器上，我错过了什么吗？
提前致谢！任何帮助将不胜感激。
答案 0 :(得分：0)
尝试以这种方式初始化：
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)
});