Video shortcode outside WordPress not working with IE and mediaelement's Flash fallback

I'm using WordPress shortcodes outside the installation folder (specifically the video shortcode) to play locally hosted videos, but I have a problem with IE.

The videos are loading fine with HTML5 on all major browsers and even with Firefox when using only Flash, but when testing with Flash on IE I see nothing even though the page is loading the code.

mediaelement's fallback works fine when accesing a WordPress page directly with a video embedded in it, but on my php page outside the install folder it just doesn't work.

Here's my code:

?php 
    define('WP_USE_THEMES', false);
    require('../wp-load.php');

    echo 'link rel="stylesheet" type="text/css" href="../wp-includes/js/mediaelement/mediaelementplayer.min.css" /';
    echo 'link rel="stylesheet" type="text/css" href="../wp-includes/js/mediaelement/wp-mediaelement.css" /';
    echo 'link rel="stylesheet" type="text/css" href="sample.css" /';

    echo 'script src="../wp-includes/js/jquery/jquery.js"/script';
    echo 'script src="../wp-includes/js/mediaelement/mediaelement-and-player.min.js"/script';
    echo 'script src="../wp-includes/js/mediaelement/wp-mediaelement.js"/script';

    echo do_shortcode('[video src="//leandroperez.com.ar/sample/08-2014_002.mp4" width="640" height="360" autoplay="true" loop="true"]');
?

Any ideas?

Topic video-player flash shortcode Wordpress

Category Web

1
answered at

I figured out the issue. I'm leaving the answer for future reference.

Turns out IE needs you to include all the HTML tags for the video to load correctly when using flash. This is my working code now:

<?php 
    define('WP_USE_THEMES', false);
    require('../wp-load.php');

    echo '<!doctype html>';
    echo '<html>';
    echo '<head>';
    echo '<meta charset="utf-8">';
    echo '<title></title>';

    echo '<link rel="stylesheet" type="text/css" href="../wp-includes/js/mediaelement/mediaelementplayer.min.css" />';
    echo '<link rel="stylesheet" type="text/css" href="../wp-includes/js/mediaelement/wp-mediaelement.css" />';
    echo '<link rel="stylesheet" type="text/css" href="sample.css" />';

    echo '<script src="../wp-includes/js/jquery/jquery.js"></script>';
    echo '<script src="../wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>';
    echo '<script src="../wp-includes/js/mediaelement/wp-mediaelement.js"></script>';
    echo '</head>';

    echo '<body>';
    echo do_shortcode('[video src="//leandroperez.com.ar/sample/08-2014_002.mp4" width="640" height="360" autoplay="true" loop="true" preload="auto"]');
    echo '</body>';
    echo '</html>';
?>

Not sure if this is the best way to add HTML to a PHP, but it's working.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.