0
我目前正在運行一個使用Wordpress 4.6.1的網站並安裝了Videojs HTML5 Player插件，我可以完美地嵌入我的視頻。但是我想添加一個功能，人們可以在videojs播放器中更改分辨率，例如：320,760,1080。所以我決定使用videojs-resolution-switcher by kmoskwiak腳本來實現它的插件，我發現一個問題。這是我到目前爲止：VideoJS分辨率選擇器不能在Wordpress中工作
我已經從github頁面下載了videojs-resolution-switcher.css和videojs-resolution-switcher.js，並將其上傳到插件的/ videojs文件夾，這裏是插件的文件夾視圖：
- 語言（文件夾）
---等
- videojs（文件夾）
--- ALT（文件夾）
---實例（文件夾）
---字體（文件夾）
--- ie8（文件夾）
--- video-js.css
---視頻js.min.css
---的Video.js
--- video.js.map
--- video.min.js
--- video.min.js .MAP
--- videojs分辨率-switcher.css
--- videojs分辨率-switcher.js
- readme.txt文件
- videojs-HTML5的player.css
- videojs-HTML5播放器.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/[email protected]_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了球員，我錯過了什麼？
在此先感謝！任何幫助將不勝感激。