Support for Chameleon - HTML5 Video Player with Flash Backup


CodingJack does not currently provide support for this item.

Popular questions for this item

The original video that’s included in the download source works but my videos do not.

First, check to make sure the issue isn’t a file location problem. View this video for troubleshooting tips.

Second, try re-encoding your video with one of the following video encoders:

Adobe Media Encoder
Miro Video Encoder

The following is the required meta-data information that the video will need to have.

  • duration
  • width
  • height

This is very basic and standard information and is included automatically by most video encoder programs. And these are common things needed for any video player that includes a time-text/scrub-bar and a fullscreen button.

If your video program does not include this information, it means the program is not geared toward producing video for the web. And in that case, try one of the encoders listed above instead.

How can I make it so the video doesn’t automatically preload?

Replace the video’s original html markup with a single preview image. Then inject the video’s html markup when the image is clicked.

The JavaScript Part

<!-- This code requires jQuery -->
<!-- Only one instance of jQuery should be loaded into a web page -->  
<!-- If your site is already using jQuery, no need to include this line -->
<script type="text/javascript" src=""></script>

<script type="text/javascript">

    function startVideo(img) {

        var previewImage = $(img);

        jQuery('<iframe ' + 

            'data-auto-play="false" ' +
            'data-video="video/1.mp4" ' +
            'data-poster="video/1.jpg" ' +

            'data-skin="light" ' +
            'data-firefox-uses-flash="true" ' +

            'data-use-share-buttons="true" ' +
            'data-share-text="Check out my new video" ' +
            'data-copyright="© Video Productions" ' +
            'data-copyright-link="" ' +
            'data-copyright-target="_blank" ' +

            'data-fallback-dark="cj-video-player/swf/video_fallback_dark.swf" ' +
            'data-fallback-light="cj-video-player/swf/video_fallback_light.swf" ' +

            'width="960" ' +
            'height="540" ' +
            'scrolling="no" ' +
            'frameborder="0" ' +
            'type="text/html" ' +
            'mozallowfullscreen="mozallowfullscreen" ' +
            'webkitallowfullscreen="webkitallowfullscreen" ' +
            'allowfullscreen="allowfullscreen" ' +
            'src="cj-video-player/cj-video.html">' + 





The HTML Part

<a href="#" onclick="startVideo(this)"><img src="video/1.jpg" /></a>