HTML5 prehrávač

<style>
.ghinda-video-player {
    float: left;
    padding: 10px;
    border: 5px solid #61625d;

    -moz-border-radius: 5px; /* FF1+ */
        -ms-border-radius: 5px; /* IE future proofing */
    -webkit-border-radius: 5px; /* Saf3+, Chrome */
    border-radius: 5px; /* Opera 10.5, IE 9 */

    background: #000000;
    background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */

    box-shadow: inset 0 15px 35px #535353;
}

.ghinda-video-play {
    display: block;
    width: 22px;
    height: 22px;
    margin-right: 15px;
    background: url(../images/play-icon.png) no-repeat;

    opacity: 0.7;

    -moz-transition: all 0.2s ease-in-out; /* Firefox */
        -ms-transition: all 0.2s ease-in-out; /* IE future proofing */
        -o-transition: all 0.2s ease-in-out;  /* Opera */
    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
    transition: all 0.2s ease-in-out;
}

.ghinda-paused-button {
    background: url(../images/pause-icon.png) no-repeat;
}

.ghinda-video-play:hover {
    opacity: 1;
}

.ghinda-video-seek .ui-slider-handle {
    width: 15px;
    height: 15px;
    border: 1px solid #333;
    top: -4px;

    -moz-border-radius:10px;
        -ms-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    background: #e6e6e6;
    background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));

    box-shadow: inset 0 -3px 3px #d5d5d5;
}

.ghinda-video-seek .ui-slider-handle.ui-state-hover {
    background: #fff;
}

.ghinda-video-seek .ui-slider-range {
    -moz-border-radius:15px;
        -ms-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;

    background: #4cbae8;
    background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));

    box-shadow: inset 0 -3px 3px #39a2ce;
}

.ghinda-volume-box {
    height: 30px;

    -moz-transition: all 0.1s ease-in-out; /* Firefox */
        -ms-transition: all 0.1s ease-in-out; /* IE future proofing */
        -o-transition: all 0.2s ease-in-out;  /* Opera */
    -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
    transition: all 0.1s ease-in-out;
}

.ghinda-volume-box:hover {
    height: 135px;
    padding-top: 5px;
}

.ghinda-volume-slider {
    visibility: hidden;
    opacity: 0;

    -moz-transition: all 0.1s ease-in-out; /* Firefox */
        -ms-transition: all 0.1s ease-in-out;  /* IE future proofing */
        -o-transition: all 0.1s ease-in-out;  /* Opera */
    -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
    transition: all 0.1s ease-in-out;
}

.ghinda-volume-box:hover .ghinda-volume-slider {
    position: relative;
    visibility: visible;
    opacity: 1;
}


</style>
<video width="600px" height="300px" controls>
<source src="http://www.youtube.com/watch?v=2hoPD89eSmA" type="video/mp4">
<div class="ghinda-video-controls">
    <a class="ghinda-video-play" title="Play/Pause"></a>
    <div class="ghinda-video-seek"></div>
    <div class="ghinda-video-timer">00:00</div>
    <div class="ghinda-volume-box">
        <div class="ghinda-volume-slider"></div>
        <a class="ghinda-volume-button" title="Mute/Unmute"></a>
    </div>
</div>
</video>
<script src="/jquery.js" type="text/javascript">
<script type="text/javascript">
$.fn.gVideo = function(options) {
    // build main options before element iteration
    var defaults = {
        theme: 'simpledark',
        childtheme: ''
    };
    var options = $.extend(defaults, options);
    // iterate and reformat each matched element
    return this.each(function() {
        var $gVideo = $(this);

        //create html structure
        //main wrapper
        var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
        //controls wraper
        var $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');
        $gVideo.wrap($video_wrap);
        $gVideo.after($video_controls);

//get newly created elements
var $video_container = $gVideo.parent('.ghinda-video-player');
var $video_controls = $('.ghinda-video-controls', $video_container);
var $ghinda_play_btn = $('.ghinda-video-play', $video_container);
var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);
var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);
var $ghinda_volume = $('.ghinda-volume-slider', $video_container);
var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);

$video_controls.hide(); // keep the controls hidden

var gPlay = function() {
    if($gVideo.attr('paused') == false) {
        $gVideo[0].pause();
    } else {
        $gVideo[0].play();
    }
};

$ghinda_play_btn.click(gPlay);
$gVideo.click(gPlay);

$gVideo.bind('play', function() {
    $ghinda_play_btn.addClass('ghinda-paused-button');
});

$gVideo.bind('pause', function() {
    $ghinda_play_btn.removeClass('ghinda-paused-button');
});

$gVideo.bind('ended', function() {
    $ghinda_play_btn.removeClass('ghinda-paused-button');
});

var createSeek = function() {
    if($gVideo.attr('readyState')) {
        var video_duration = $gVideo.attr('duration');
        $ghinda_video_seek.slider({
            value: 0,
            step: 0.01,
            orientation: "horizontal",
            range: "min",
            max: video_duration,
            animate: true,
            slide: function(){
                seeksliding = true;
            },
            stop:function(e,ui){
                seeksliding = false;
                $gVideo.attr("currentTime",ui.value);
            }
        });

var gTimeFormat=function(seconds){
    var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
    var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
    return m+":"+s;
};

var seekUpdate = function() {
    var currenttime = $gVideo.attr('currentTime');
    if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);
    $ghinda_video_timer.text(gTimeFormat(currenttime));
};

$gVideo.bind('timeupdate', seekUpdate);

$ghinda_volume.slider({
    value: 1,
    orientation: "vertical",
    range: "min",
    max: 1,
    step: 0.05,
    animate: true,
    slide:function(e,ui){
        $gVideo.attr('muted',false);
        video_volume = ui.value;
        $gVideo.attr('volume',ui.value);
    }
});

var muteVolume = function() {
    if($gVideo.attr('muted')==true) {
        $gVideo.attr('muted', false);
        $ghinda_volume.slider('value', video_volume);

        $ghinda_volume_btn.removeClass('ghinda-volume-mute');
    } else {
        $gVideo.attr('muted', true);
        $ghinda_volume.slider('value', '0');

        $ghinda_volume_btn.addClass('ghinda-volume-mute');
    };
};

$ghinda_volume_btn.click(muteVolume);

$gVideo.removeAttr('controls');

$('video').gVideo();
</script>