WordPress.org

Ready to get started?Download WordPress

Forums

Video.js - HTML5 Video Player for WordPress
[Plugin: VideoJS - HTML5 Video Player for WordPress] Initializing JavaScript should be in wp_footer (1 post)

  1. KZeni
    Member
    Posted 2 years ago #

    I like VideoJS, but I use WP-Minify to combine & minify the JavaScript on my site and have come across an issue.

    I have the combined JavaScript be placed in the site's footer (per coding best practices), but the "VideoJS.setupAllWhenReady();" script is then left stranded in the <head> so it's being called before the rest of the site's scripts are (causing a JavaScript error).

    Rather than straying away from best practices & placing my site's JavaScript in the head to accommodate an initialization script being called in the head... I've updated this plugin so that one line of javascript is inserted into wp_footer instead of wp_head.

    function add_videojs_header(){
      echo "";
      $dir = WP_PLUGIN_URL.'/videojs-html5-video-player-for-wordpress/video-js/';
      echo <<<_end_
      <link rel="stylesheet" href="{$dir}video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
      <script src="{$dir}video.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
        VideoJS.setupAllWhenReady();
      </script>
    _end_;
    }
    add_action('wp_head','add_videojs_header');

    is now:

    function add_videojs_header(){
      echo "";
      $dir = WP_PLUGIN_URL.'/videojs-html5-video-player-for-wordpress/video-js/';
      echo <<<_end_
      <link rel="stylesheet" href="{$dir}video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
      <script src="{$dir}video.js" type="text/javascript" charset="utf-8"></script>
    _end_;
    }
    add_action('wp_head','add_videojs_header');
    
    function add_videojs_footer(){
    	echo '<script type="text/javascript">VideoJS.setupAllWhenReady();</script>';
    }
    add_action('wp_footer','add_videojs_footer');

    ... and it's working perfectly.

    I know that making hacks like these isn't the best way to go about things so I've posted this here in hopes that this update (or something to this effect) is included in the next version of the plugin.

    http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic