Open Video Player Demo

by Anov Siradj

HTML

<script src="http://sxsw.ramp.com/FileResource/themes/projects/root/3.9/scripts/player/external/ovp/ovp-1.2.js"></script>
<script src="http://sxsw.ramp.com/FileResource/themes/projects/root/3.9/scripts/player/build/metaplayer-complete.js"></script>
<link rel="stylesheet" href="http://sxsw.ramp.com/FileResource/themes/projects/root/3.9/scripts/player/build/mp2/theme.mp2.css">
<script src="http://sxsw.ramp.com/FileResource/themes/projects/root/3.9/scripts/player/external/popcorn/popcorn.js"></script>
<div class="rhi-player-box" id="rhi-player-box"></div>
<div id="rhi-transcript"></div>
<div id="rhi-video-search"></div>
<div id="rhi-framefeed"></div>

CSS

.rhi-player-box {
    width:450px;
    height:300px;
}

.mp-search-close {
    background-color:red;
    content:"X";
}
#rhi-video-search {
    background:#ccc;
    width:250px;
    height:150px;
        
}
#rhi-transcript {
    height:100px;
}
.ovp-video {
    width:450px;
    height:300px;
}

JavaScript

// Open Video Player demo.
var player, controls, metaq, overlay, config;

//Configure the open video player
config = {
    controls: {'src_img':'http://sxsw.ramp.com/FileResource/themes/projects/root/base_main/scripts/player/external/ovp/images/play.png'},
    immediately : true,
    strategy : {"order":["HTML5","Flash"]},
    players : {
        "HTML5": {"minver":"0","controls":false},
        "Flash" : {
            "src": "http://sxsw.ramp.com/FileResource/themes/projects/root/base_main/scripts/player/external/ovp/ovp-2.1.6.swf",
            "minver": "9",
            "controls": false
        }
    },
    ovpConfig: {
        'sources': [{'src': 'http://ia600406.us.archive.org/31/items/ElephantsDream/ed_1024_512kb.mp4', 'type':'video/mp4'}],
        'width': '100%',
        'height': '100%',
        'id': 'video',
        posterimg:''
    }
};
//Instantiate the Meta Player Framework by passing the ovp config object to.
player = MetaPlayer("#rhi-player-box").ovp(config);

//Point MPF at a playlist configuration file
player.ramp("http://api.ramp.com/v1/mp2/playlist?e=52871241&apikey=f455a86b28160bc0682fec3662e39d3b");

//Implement classic style colsed captions over the video on video start
//player.captions("#rhi-player");
//Implement the Moving Transcript on the page
player.transcript("#rhi-transcript", {
    timestamps: false,
    breaks: false
});

//Implemen the video search box
player.searchbox("#rhi-video-search", {
    strings: {
        searchPlaceholder: "Search within video",
        resultsHeader: "{{count}} search {{results}}",
        ellipsis: "",
        clear: ""
    }
});

// controls & timeline
player.controls({
    renderTags: true,
    renderMetaq: true,
    annotationSpacing: 2
});

// Implement the overlay
player.overlay();

//Start the video on page load
player.video.autoplay = true;

//Use the Popcorn Fired MetaQ content
player.framefeed('#rhi-framefeed', {
    revealMs: 1500,
    baseUrl:...