Setup

Follow instructions to embed the player manually

1. Download

  1. Please Download Codo Player setup package.
  2. Extract the package (.zip) into any folder of the website's environment the player is about to operate.

2. Embed

  1. Copy the snippet example (see below) & paste it anywhere within the page's <body> tag.
  2. Edit the <script> "src" attribute to point to "CodoPlayer.js" file on your file system.
  3. Replace the "video.mp4" string value with the path to media source.

3. Play

Setup complete! Save the code & refresh the browser.

Snippet examples

Use the examples as a starting point for a new setup.

<script src="CodoPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
    CodoPlayer("video.mp4")
</script>
<script src="CodoPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
    CodoPlayer([["video.webm", "video.ogg", "video.mp4"]]) // Note ".mp4" positioned at the end of array
</script>
<script src="CodoPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
    CodoPlayer("video.mp4", {
        width: 600,
        height: 338
    })
</script>
<script src="CodoPlayer.js" type="text/javascript"></script>
<script>
    CodoPlayer("youtube video id", {  // for example: Ddi2TBnzdPo
        engine: "youtube",
        width: 600,
        height: 338
    })
</script>
<script src="CodoPlayer.js" type="text/javascript"></script>
<script>
    CodoPlayer("mp4:video.mp4", {
        width: 600,
        height: 338,
        rtmp: "rtmp://url_to_RTMP_server"
    })
</script>
<script src="CodoPlayer.js" type="text/javascript"></script>
<script>
    CodoPlayer("http://domain/path/playlist.m3u8", {
        width: 600,
        height: 338
    })
</script>
<script src="CodoPlayer.js" type="text/javascript"></script>
<script>
    CodoPlayer([
        "video.flv", // Flash video
        {
            src: ["video2.webm", "video2.ogv", "video2.mp4"], // HTML5 video
            title: "My video title"
        },
        "audio.mp3" // HTML5 or Flash audio, depending on browser capabilities
    ], {
        width: 600,
        height: 338,
        playlist: true,
        autoplay: true,
        loop: true
    })
</script>

Dynamic preload

Use this method to load the player dynamically, whenever required.

1. HTML

Paste the script loader within the <header> tag.
<script src="CodoPlayer.js" type="text/javascript"></script>
Paste the parent HTML element within the <body> tag.
<div class="my-player"></div>

2. JavaScript

Paste the Codo Player snippet code within the JavaScript file, and execute it when DOM content is loaded.
CodoPlayer("video.mp4", {
    width: 600,
    height: 338
}, ".my-player") // ID/CLASS given to the parent Codo Player HTML element

Playlist

Display a list of clips combined into a playlist

To enable playlist
CodoPlayer(["video.mp4", "video2.mp4", "video3.mp4"], {
    width: 600,
    height: 338,
    playlist: true
})

HD Toggle

Display SD/HD toggle button in the control bar

To enable HD toggle
CodoPlayer({
    src: "videoSD.mp4",
    srcHD: "videoHD.mp4"
}, {
    width: 600,
    height: 338,
    priority: "srcHD" // Video starts in HD
})

Cuepoints

Register cuepoints and trigger them on specific time

To set the cuepoint
var player = CodoPlayer("video.mp4", {
    width: 600,
    height: 338,
    cuepoints: [5, 10] // Trigger will fire at 5 and 10 seconds
})

player.media.onCuepoint(function() {
    console.log("Cuepoint fired")
})

Format support table

HTML5 Video/Audio MP4/H.264 WebM Ogv/Ogg MP3 WAV AAC Ogg
Chrome 4+
Firefox 3.5+ (29)
IE 9+
Safari 4+
iOS Safari 3.2+
Android Browser 2.3+
Opera 10.5+
FLASH Video/Audio MP4/H.264 FLV MP3 WAV
All Flash browsers

Note

The use of absolute URL for the source of clip is recommended.
CodoPlayer("http://example.com/video.mp4")
For relative, the URL must begin with "relative://" prefix then the path to media comes relative to "CodoPlayer" directory on the system.
CodoPlayer("relative://video.mp4")

Get more of Codo Player

Setup instructions define the minimal approach of embedding the player.

To customise the look and functionality, proceed further to Configuration & Styling & API pages.