Including Open Standard Media player in HTML5

Question

I am new to HTML5 and JQuery. I came across the following media player: Open Standard Media player for HTML5 (http://mediafront.org/osmplayer/). But when i tried to include the player in my html page the player was not running. What could be the possible reason? PFB the code used to include the player.

<!-- Include the core jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<!-- Include the core media player JavaScript. -->
<script type="text/javascript" src="osmplayer/bin/osmplayer.compressed.js"></script>

<!-- Include the DarkHive ThemeRolller jQuery UI theme. -->
<link rel="stylesheet" href="osmplayer/jquery-ui/dark-hive/jquery-ui-1.8.18.custom.css">
<!-- Include the Default template CSS and JavaScript. -->
<link rel="stylesheet" href="osmplayer/templates/default/css/osmplayer_default.css">
<link rel="stylesheet" href="osmplayer/templates/default/osmplayer.default.js">

David A. David A. · Accepted Answer · 2013-04-15T20:55:10

I had the same problem. I inspected the osmplayer page and copied all of the script and style sheet references made there, making adjustments to match the file system in my own code.

<!-- Include the core media player JavaScript. -->
<script type="text/javascript" src="../../public/osmplayer/bin/osmplayer.compressed.js"></script>

<!-- Include the DarkHive ThemeRolller jQuery UI theme. -->
<link rel="stylesheet" href="../../public/osmplayer/jquery-ui/dark-hive/jquery-ui-1.8.18.custom.css">

<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.compatibility.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.flags.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.async.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.plugin.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.display.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.image.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.file.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.playLoader.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.base.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.html5.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.flash.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.minplayer.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.youtube.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.vimeo.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.players.limelight.js"></script>
<script type="text/javascript" src="../../public/osmplayer/minplayer/src/minplayer.controller.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.parser.default.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.parser.youtube.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.parser.rss.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.parser.asx.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.parser.xspf.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.playlist.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/iscroll/src/iscroll.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.pager.js"></script>
<script type="text/javascript" src="../../public/osmplayer/src/osmplayer.teaser.js"></script>

<!-- Include the Default template CSS and JavaScript. -->
<link rel="stylesheet" href="../../public/osmplayer/templates/default/css/osmplayer_default.css">
<script type="text/javascript" src="../../public/osmplayer/templates/default/js/osmplayer.default.js"></script>
<script type="text/javascript" src="../../public/osmplayer/templates/default/js/osmplayer.controller.default.js"></script>
<script type="text/javascript" src="../../public/osmplayer/templates/default/js/osmplayer.pager.default.js"></script>
<script type="text/javascript" src="../../public/osmplayer/templates/default/js/osmplayer.playLoader.default.js"></script>
<script type="text/javascript" src="../../public/osmplayer/templates/default/js/osmplayer.playlist.default.js"></script>
<script type="text/javascript" src="../../public/osmplayer/templates/default/js/osmplayer.teaser.default.js"></script>

You don't have to include all of these references. For example, if your not including youtube videos then you can leave out the miniplayer.players.youtube.js file and so on. Hope this helps.

edit: my jQuery references are on a common layout page and are always loaded in. Those are definitely needed. Just be careful not to reference those twice. That also caused me a problem.

Including Open Standard Media player in HTML5

2 Answers