Разработка своего HTML5-плеера

[Zero-11]

У меня есть скрипт:<script language="Javascript">/* * ghindaVideoPlayer - jQuery plugin 1.0.0 * * Copyright (c) 2010 Cristian-Ionut Colceriu * * www.ghinda.net * contact@ghinda.net * */(function($) {// plugin definition$.fn.gVideo = function(options) {// build main options before element iterationvar defaults = {theme: '',childtheme: ''};var options = $.extend(defaults, options);// iterate and reformat each matched elementreturn this.each(function() {var $gVideo = $(this);//create html structure//main wrappervar $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);//controls wrapervar $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 new elementsvar $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 hiddenvar 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 seeksliding;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);}});$video_controls.show();} else {setTimeout(createSeek, 150);}};createSeek();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);var video_volume = 1;$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');});};//// plugin defaults//$.fn.gVideo.defaults = {};})(jQuery);</script>

 

Это java-скрипт для вызова API - им я создаю члены-переменные класса и оборачиваю их в контейнер класса ghindaVidePlayer -для управления

своим видео -проигрывателем, а вот стили CSS:

 

 

/* * ghindaVideoPlayer - jQuery plugin 1.0.0 * * Copyright (c) 2010 Cristian-Ionut Colceriu * * ghindaVideoPlayer.css * Styles for the ghindaVideoPlayer * *//* base styles */.ghinda-video-player {}.ghinda-video-play, .ghinda-volume-button {cursor: pointer;}.ghinda-video-timer {cursor: default;}/* Start of simpledark default theme */.ghinda-video-player.simpledark {float: left;position: relative;padding: 10px;border: 5px solid #61625d;font-family: Arial, Helvetica, sans-serif;-moz-border-radius: 5px; /* FF1+ */-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-player.simpledark .ghinda-video-controls {position: relative;padding-top: 5px;float: left;clear: both;width: 100%;}.ghinda-video-player.simpledark .ghinda-video-play, .ghinda-video-player.simpledark .ghinda-video-seek, .ghinda-video-player.simpledark .ghinda-volume-box, .ghinda-video-timer {float: left;}/* play, pause */.ghinda-video-player.simpledark .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 */-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */-o-transition: all 0.2s ease-in-out;  /* Opera */transition: all 0.2s ease-in-out; }.ghinda-video-player.simpledark .ghinda-paused-button {background: url(images/pause-icon.png) no-repeat;}.ghinda-video-player.simpledark video {float: left;}.ghinda-video-player.simpledark .ghinda-video-play:hover {    opacity: 1;}/* seek */.ghinda-video-player.simpledark .ghinda-video-seek {position:relative;width: 360px;height: 10px;margin-top: 5px;border: 1px solid #494949;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;background: #535353;background-image: -moz-linear-gradient(top, #535353, #333333);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));box-shadow: inset 0 -3px 3px #333333;}.ghinda-video-player.simpledark .ghinda-video-seek .ui-slider-handle {width: 15px;height: 15px;border: 1px solid #333;top: -4px;-moz-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-player.simpledark .ghinda-video-seek .ui-slider-handle.ui-state-hover {background: #fff;}.ghinda-video-player.simpledark .ghinda-video-seek .ui-slider-range {-moz-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;}/* timer */.ghinda-video-player.simpledark .ghinda-video-timer {margin-top: 5px;margin-left: 10px;color: #999;font-size: 0.7em;font-weight: bold;}/* volume */.ghinda-video-player.simpledark .ghinda-volume-box {position: absolute;bottom: 0px;right: 0px;overflow: hidden;width: 20px;height: 30px;color: #fff;padding: 0px 10px;-moz-transition: all 0.1s ease-in-out; /* Firefox */-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */-o-transition: all 0.2s ease-in-out;  /* Opera */transition: all 0.1s ease-in-out; }.ghinda-video-player.simpledark .ghinda-volume-box:hover {height: 135px;padding-top: 5px;}.ghinda-video-player.simpledark .ghinda-volume-box:hover .ghinda-volume-slider {position: relative;visibility: visible;opacity: 1;}.ghinda-video-player.simpledark .ghinda-volume-slider {position: relative;height: 100px;width: 7px;left: 4px;visiblity: hidden;opacity: 0;border: 1px solid #444;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;background: #535353;background-image: -moz-linear-gradient(top, #535353, #333333);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));box-shadow: inset 0 3px 3px #333333;-moz-transition: all 0.1s ease-in-out; /* Firefox */-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */-o-transition: all 0.1s ease-in-out;  /* Opera */transition: all 0.1s ease-in-out; }.ghinda-video-player.simpledark .ghinda-volume-slider .ui-slider-handle {width: 12px;height: 12px;left: -4px;margin-bottom:-0.6em;margin-left:0;border: 1px solid #333;-moz-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-player.simpledark .ghinda-volume-slider .ui-slider-handle.ui-state-hover {background: #fff;}.ghinda-video-player.simpledark .ghinda-volume-slider .ui-slider-range {-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;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;}/* volume button */.ghinda-video-player.simpledark .ghinda-volume-button {position: absolute;bottom: 0px;display: block;width: 22px;height: 22px;background: url(images/volume-full-icon.png) no-repeat;text-indent: -9999px;opacity: 0.8;}.ghinda-video-player.simpledark .ghinda-volume-button:hover {opacity: 1;}.ghinda-video-player.simpledark .ghinda-volume-mute {background: url(images/volume-mute-icon.png) no-repeat;}/* Start of smalldark child theme */.ghinda-video-player.smalldark {padding: 0px;}.ghinda-video-player.smalldark video:hover + .ghinda-video-controls {visibility: visible;opacity: 0.7;}.ghinda-video-player.smalldark .ghinda-video-controls:hover {visibility: visible;opacity: 0.7;}.ghinda-video-player.smalldark .ghinda-video-controls {position: absolute;top: 150px;left: 80px;width: 320px;padding: 10px;border: 1px solid #2E2E2E;-moz-border-radius: 5px; /* FF1+ */-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 */opacity: 0;visibility: hidden;box-shadow: inset 0 15px 35px #535353;-moz-transition: all 0.1s ease-in-out; /* Firefox */-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */-o-transition: all 0.1s ease-in-out;  /* Opera */transition: all 0.1s ease-in-out; }.ghinda-video-player.smalldark .ghinda-video-seek {width: 200px;}.ghinda-video-player.smalldark .ghinda-volume-box {bottom: 10px;}.ghinda-video-player.smalldark .ghinda-volume-box:hover {height: 85px;}.ghinda-video-player.smalldark .ghinda-volume-slider {height: 50px;}/* needed jquery ui styles * using these, we don't depend on jQuery UI's stylsheet */.ui-slider-handle {position: absolute;z-index: 2;display: block;;cursor: default;outline: none;}.ui-slider-range {display:block;width:100%;height:100%;left:0;bottom: 0;border:0 none;position:absolute;z-index:1;}

Я их использую для стилизации своего проигрывателя. А вот иcходник самого проигрывателя:

 

<video width=320 height=240 controls class="ghinda-video-player.simpledark"></video><button data-file=video1.webm>Video 1</button><button data-file=video2.webm>Video 2</button><button data-file=video3.webm>Video 3</button><script>/* use global variable for ease */var v = document.getElementById('videoPlayer');/* grab all buttons and attach click events */var b = document.getElementsByTagName('button');for(i = 0; i<b.length; i++) {b[i].addEventListener('click',swapVideo,true);}function swapVideo(e) {/* change the video src attribute based on the data-file attribute of the pressed button */v.src = e.target.getAttribute('data-file');v.load();}</script></html></body>И у меня не получается его стилизовать - звук только проигрывает, я новичок в WEB-разработке, что я делаю не так-?.

Материал взял из статьи - http://www.webmaster...and-jquery.html

 

[Zero-11]

Ничего не изменилось. Картинка всё та же, что на скриншотах выше.

Смотрю в Хроме.

 

До http://www.ditchwitch.ru/ ваш сайт никак не дотягивает) 1 к 1000 соотношение)

А какое разрешение экрана-?

[Николя223]

у меня 1920 на 1080. На странице каша. уходите с юкоза - нечё там делать

[Zero-11]

http://joxi.ru/lifSU_3JTJBYNhJBePg

 

Cайт так и отображается-? Сейчас переключу свой видеоадаптер и попробуй через Safary или Mozilla,

[npofopr]

Причем тут вообще видеоадаптер?

Фаерфокс, тот же ужас

[Zero-11]

Ну еще есть Hostinger - но тм лучше в системе WordPress создавать сайты - попробую туда потом выгрузить. Cейчас обратился в службу тех. поддержки Uzoc.ru - хотя бы исправили, что бы отображался нормально.

Ну может подскажите, как в CSS реализовать адаптивный дизайн, что бы масштабировался нормально, на разных мониторах-?

[Zero-11]

Ну а этот сайт - http://programm-syte.ucoz.ru/

 

также отображается-?

Edited July 25, 2014 by Zero-11

[Sergik+]

Этот вроде не съезжает но дизайн вырви глаз.

[Николя223]

Cейчас обратился в службу тех. поддержки Uzoc.ru - хотя бы исправили, что бы отображался нормально

      

[npofopr]

Hostinger - но тм лучше в системе WordPress создавать сайты

что за бред?

 

Мне кажется или вы всё делаете каким нибудь внутренним Конструктором сайта? 

[Zero-11]

 

Hostinger - но тм лучше в системе WordPress создавать сайты

что за бред?

 

Мне кажется или вы всё делаете каким нибудь внутренним Конструктором сайта? 

 

 

Нет я ими воообще не пользуюсь, пишу код сам, попрробую там запустить.

Этот вроде не съезжает но дизайн вырви глаз.

 

ну а чем ни нравиться дизайн, используется один стил и анмиация, в чемп минусы сайта-? Импеется Имеется шапка, главная понель и боковая панель, продуманное меню-?

[Sergik+]

 

 

Hostinger - но тм лучше в системе WordPress создавать сайты

что за бред?

 

Мне кажется или вы всё делаете каким нибудь внутренним Конструктором сайта? 

 

 

Нет я ими воообще не пользуюсь, пишу код сам, попрробую там запустить.

Этот вроде не съезжает но дизайн вырви глаз.

 

ну а чем ни нравиться дизайн, используется один стил и анмиация, в чемп минусы сайта-? Импеется Имеется шапка, главная понель и боковая панель, продуманное меню-?

 

У меня художественное образование, красные буквы на черном фоне это ужас.

Фон сделайте белым а буковки серыми например, сразу сайт преобразится.

Edited July 26, 2014 by Sergik+

[npofopr]

О какой анимации вообще идёт речь? о_О

[Zero-11]

Как сейчас отображается сайт - http://programm11.ucoz.ru/

 

Я проьовал адаптировать вот этим способом:

<style>main { /* основное содержимое */  position: relative; /* боковая колонка перемещается в рамках основного содержания */  margin: 0 auto; /* сайт располагается по центру экрана */  max-width: 1200px; /* резиновая, растягивается до значения в 1200px */  padding-right: 310px; /* = боковая колонка + отступ в 10px */}aside { /* боковая колонка */  width: 300px; /* фиксированная, не меняется с изменением размера окна браузера */  position: absolute; top: 0; right: 0; /* прижата к верхнему правому углу */}</style><main>  <aside>боковая панель</aside></main>

Убрал бокову колонку и зада margin: 50px auto в css

 

Сайт у меня на мониторне масштабируется:

 

 

 

  Фон я подкорректировал - помогите с СSS - кодом.

[Николя223]

Ты центрируй все ячейки через margin: xx auto. А то что то так, а что то через марджин лефт - каша

 

Полную резину - сложно сделать... хотя раньше то делали и ничо...

А сейчас можно через @media

Edited July 29, 2014 by Николя223

[Zero-11]

Я полную резину сделал фактически, попробую через @Media - но сейчас он полностью масштабируется на Uzoc - лишь один элемент ни хочет :

 

А  вот элемент - это ячекй table - я создал таблицу и разбил на несколько столбцов а зетм объединил в ячейки и задал изображение и вынес

в отдельный блок DIV :

 

если уберу div - то сместятся элементы:

#MY_BLOCK{margin-left:170px;margin-right:-4px;width: 915px;padding-left:25;height:200px;background-color:black;margin-top:20px;float:top;float:center;}

[Sergik+]

Зачем вам полная резина ? Вы толком css не знаете а уже резину хотите, над дизайном поработайте.

Я бы вам посоветовал все это в бутстрапе сделать, и дизайн будет хороший и юзабилити будет.

[SKSKSS2013]

адресс сайта   http://programm11.ucoz.ru/

Я бы вам советовал тестовые сайты делать на будущее не в богом ucoz, а но более-мене хорошем http://www.hostinger.ru/
В будущем, когда вам понадобится PHP и MySQL, а они обязательно понадобятся, если захотите сделать сайт "КАК У ЛЕБЕДЕВА", то лучше хостингера вам не найти для ваших первых экспериментов.

УДАЧИ!

[Great Rash]

float:top;

float:center;

Это что-то новенькое

[Николя223]

float:top;

Остается только

float: anywhere;  

[Zero-11]

Float: center - Оставить, можно задать выравнивание и и по верхнему краю float: top - прием часто встречается и я знаю CSS - ну попробую.

[npofopr]

Float: center - Оставить, можно задать выравнивание и и по верхнему краю float: top - прием часто встречается и я знаю CSS - ну попробую.

вы серьезно?   

http://htmlbook.ru/css/float 

[Николя223]

 

Float: center - Оставить, можно задать выравнивание и и по верхнему краю float: top - прием часто встречается и я знаю CSS - ну попробую.

вы серьезно?   

http://htmlbook.ru/css/float 

 

Похоже да

[npofopr]

float: top - прием часто встречается

Интересно где и у кого.  

[Zero-11]

Все сделал - у меня полностью масштабируется в системе Ucoz - у вас корректно все отображается-?

 

http://htmlforum.ru/index.php

[npofopr]

Масштабируется это по колёсику что ли? 

Какая вообще разница масштабируется ли он, когда его просто сразу хочется закрыть.

Да и вообще, проверять масштабированием что либо, это мне кажется из эпохи IE6.