Adding the Some Techie Media Player to your website or webapp is easy. Just add one script reference to the head of your HTML page.

<script src="js/sometechiemediaplayer.js?stplayerautoload=true&stplayerautosupplement=true" type="text/javascript"></script>

This one line will automatically load all of the needed JavaScript, CSS, Flash, and image files and add backward compatibility to your HTML media elements.

This assumes that the structure of your files is like this:

js
    sometechiemediaplayer.js
    
css
    sometechiemediaplayer.css
    
images
    controls.png
    controls_hires.png
    play_overlay.png
    play_overlay_hires.png
    ...
    
swf
    audioplayer.swf
    videoplayer.swf

If you have a different file structure, you can just load the JavaScript and CSS individually.

<script src="js/sometechiemediaplayer.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/sometechiemediaplayer.css" type="text/css">

Then specify the location of the swf files (relative to the HTML page) and tell the Some Techie Media Player to add backward compatibility to your HTML media elements.

<script type="text/javascript">
    sometechie.media.setVideoSwfPath('swf/videoplayer.swf');
    sometechie.media.setAudioSwfPath('swf/audioplayer.swf');
    sometechie.media.supplementHTMLMedia();
</script>

Now your existing HTML media elements will be compatible with nearly any browser.

 

<video poster="http://cdn.sometechie.com/sample/video/success/poster.png" style="width:640px;height:390px">
    <source src="http://cdn.sometechie.com/sample/video/success/video.mp4" type="video/mp4" />
    <source src="http://cdn.sometechie.com/sample/video/success/video.webm" type="video/wemb" />
    <source src="http://cdn.sometechie.com/sample/video/success/video.wmv" type="video/x-ms-wmv" />
</video>

Advanced Options

If you don't want all of the HTML media elements on your page to be supplemented, you can tell the Some Techie Media Player to only supplement media elements if the element or its parent has a certain class. You can also tell it to skip elements if they or their parents have certain classes.

// Only supplement elements with one of these classes on them or their parents.
sometechie.media.supplementHTMLMedia.setSupplementClasses(['sometechiemedia','supplement']);

// But not ones with one of these classes.
sometechie.media.supplementHTMLMedia.addSupplementBlacklistClasses(['dontsupplement','leavethisalone']);

Get It Now