Search code examples
javascriptflashuribase64greasemonkey

Use Greasemonkey to load my own video player, cross-domain


I making a script to convert all wmv avi mp3 wav mp4 etc links to play with the embedded jwplayer. The player loads but doesn't play the video and instead displays the following error: Task Queue failed at step 5: Playlist could not be loaded due to cross-domain policy restrictions.

Searching online led me to realize that I need to have a file named crossdomain.xml or something like that hosted. Now since this is a script that is meant to run on any site I obviously can't do that.

I thought of maybe inlining the entire player in a data uri. I tried that too like so: DEMO

This is the site that I took the player from: http://player.longtailvideo.com/player.swf

Is what I'm trying to do possible? I imagine it works like a data uri for an img. Am I missing something?

EDIT:!
Screen shot of the fabulous ;) GM script under test


Solution

  • Data URIs do not work on <object> or <embed> nodes. That is why GM_getResourceURL() will not work for this either.

    Further, when using the direct <embed> method the player.swf file must reside on the same domain as the video or cross-site security will block the video load. This particular block may be built into this particular player.swf.

    However, when using Longtailvideo's jwplayer.setup () function (which they recommend anyway), the player seems to work.

    You have to use a hosted version of the player, but luckily one is provided at http://player.longtailvideo.com/player.swf.
    It will give an NetworkError: 404 Not Found - http://someSite/crossdomain.xml error, but the video will play.

    Here's a sample GM script that works:

    // ==UserScript==
    // @name     _Video embed fun
    // @include  http://YOUR_SITE/*
    // @require  http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
    // @require  http://player.longtailvideo.com/jwplayer.js
    // ==/UserScript==
    
    //--- Find all hyperlinks to select video files.
    var videoLinks  = $("a[href$='.mpg'], a[href$='.mp4'], a[href$='.wmv']");
    
    //--- For each video link, activate our video player.
    videoLinks.each ( function (J) {
        var jThis   = $(this);
        var vidURL  = jThis.attr ('href');
        var contID  = 'myVidContainer_' + J;
    
        jThis.after ('<div id="' + contID + '">Loading the player ...</div>');
    
        jwplayer (contID).setup ( {
            flashplayer:    "http://player.longtailvideo.com/player.swf",
            file:           vidURL,
            height:         344,
            width:          480
        } );
    } );
    



    Warnings:

    1. Certain media types (or that player) seem to have extra XSS "protection" built in. This means that .wmv files will not work, for example, while many .mp4 files do.

    2. The video file apparently must be in the exact same domain for this player. So target page foo.com\somepage.htm containing a video foo.com\somevid.mp4 will (usually) work, but if the video is cdn.foo.com\somevid.mp4, it won't work.

    The only foolproof way to use this player, remains these two options:

    • Write your own Firefox addon that does not have the restriction against patching local files (player.swf), cross-domain, into the page. You could fork off of Greasemonkey or Scriptish code.

    • Have your GM script AJAX the video to your own server (which can be your local machine running XAMPP, etc.). Then said machine will serve the video and player.swf back to you, possibly in an <iframe>.