Zero-11

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

Ну а этот сайт - http://programm-syte.ucoz.ru/ также отображается-?

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

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

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

Даже на широкоформатных экарнах отлично отображается, через какие браузеры смотрели-? Или какие валидаторы использовали-?

Вы через какорй браузер открыли, откройте через Chrome или Mozilla - http://programm11.ucoz.ru/ Шабка сайта и код, учился по видеоурока професиорнального WEB-разработчика - прежде чем так выражаться укажите минусы, и использовал актуальные ресурсы интернета. Еща раз минусы укажите. Не уступает в дизайне даже этому - также ани мация и адпативный дизайн реализованы: http://www.ditchwitch.ru/ Вот скрин сайта:

Ну ладно, подправил код в Uzoc насколько это возможно, перейдем к критике сайта, какие плюсы а какие минусы-? Ну то есть использовал анимацию, современный дизайн, оригинальное расположение формы регистрации и продуманое, rgba, box-shadow, position: absolute + relative, ну и минусы - ошибки кода( хотя я проверил все пути - работают) - но выдаются в консоле хрома, не доработка отдельных деталей, ну и конечная оценка.

Ну так я прописываю путь - <script type='text/javascript' src="http://programm11.ucoz.ru/my_media/js/jquery-1.11.1.min.js"></script> <link type="text/css" rel="Stylesheet" href="/my_css/style.css" /> подменяется на: <link type="text/css" rel="Stylesheet" href="/_st/my.css" />

Ну если бы эти пути не работали или были не верно заданы, не запускался плеер на JQuery а в Mozile работает загрузка, через iframe - можно переключатся по ссылкам, и видео грузится через iframe. Uncaught SyntaxError: Unexpected token < programm11.uzoz.ru/my_media/js/jguery-ui-1.8.2.custom.min.js:1Uncaught SyntaxError: Unexpected token < programm11.uzoz.ru/my_media/js/jguery.ghindaVideoPlayer.js:1Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/flashmediaelement.swf:2Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/silverlightmediaelement.xap:1Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.uc...u/js/video.htmlUncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/flashmediaelement.swf:2Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/silverlightmediaelement.xap:1У меня инспектор такого не выдает в Mozile и IE9, но этих путей быть не должно: Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://programm11.uc...R!S08!v2HDk;wooFailed to load resource: net::ERR_BLOCKED_BY_CLIENT http://rtrgt2.com/apu.php?zoneid=1708Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://ucoz.adsniper...pid=20&sniper=1 И вы исследовали сайт, через инспектор или при помощи какого-то валидатора кода-? Ссылки прописываются автоматически, как их убрать-?

Та нужно page и head ни через ни идентификатором объявить id а через class объявить и также с блоками ни много ни так margin-left задал, до freim-а не указан полный путь, для загрузки, через iframe, и еще нет тегов закрывающих, но в HTML5 - это не является обязхательным требованием и на функционал сайта повлиять не могло: <div id="page"><div id="head"><ul> <li><a href="http://programm-syte.ucoz.ru/"><b>Главная</b></a></li> <li><a href="http://hacker11.ru/"><b>О нас</b></a></li> <li><a href=" "><b>Уроки</b></a></li> <li><a href="https://www.facebook.com/"><b>Контакты</b></a></li> <li><a href="https://www.microsoftvirtualacademy.com/MyMVA/MyProfile.aspx"><b>Я на MVA</b></a></li> </ul> </div> <div id="head"> <ul> <li><a href="http://programm-syte.ucoz.ru/"><b>Главная</b></a></li> <li><a href="http://hacker11.ru/"><b>О нас</b></a></li> <li><a href=" "><b>Уроки</b></a></li> <li><a href="https://www.facebook.com/"><b>Контакты</b></a></li> <li><a href="https://www.microsoftvirtualacademy.com/MyMVA/MyProfile.aspx"><b>Я на MVA</b></a></li></ul> </div> Пути указаны верно и у меня он ошибок не выдают, а это в head нужно удалить - я удалял, но при переустановке на хостинге пути автоматически прописываются в head: http://programm11.ucoz.ru/abnl/?adsdata=1fcw^M^8sAIQjIYHvQJX8X!Qq9851zksQP!…F4zS2UpT42ZsfziWfFxWO^B6;pYIUrte0C7GIuYTcf7ve^z9nT7gQS3vumuR!S08!v2HDk;woo здесь идет какой то POST-запрос на jandex и видимо по зашифрованной URL-адрессации - также убрать не получается.

Я знаю про инспектор кода, я не вижу ошибок, код писал и отлаживал, где они сркты - исследовав сайт я обнаружил подгрженный сторонние скрипты с других интрернет ресурсов, хорошо я по исследою еще.

Если бы там была куча ошибок, то как он работал на Uzoc имея при этом весь функционал, работал на самых разных система и протестирован в самых распространенных браузеров и IE9 - и сейчас запускается и работает - плюс вся анимация, и какие ошибки - прtвидите хоть-?

Проблема следующая сайт который я выгрузил на Uzoc - работал отьлично, HTML5, CSS3, JQuery и JS а еще подключил сторонние плагины работал отлично несколько дней, а сейчас у меня все слетело, я его частично восстановил, полностью восстановить функционал не получается. Я протестировал его на совместимость в Chrome, Safary, Opera, Mozilla и IE9 - во всех работал отлично, и в один день все слетело, изменений я не вносил. Хостинг-провайдер ответил в письме что вопрос решается, только через платную службу поддержки, вот адресс сайта http://programm11.ucoz.ru/ Возможно ошибки в коде HTML5 и CSS3, но запускал локально, все работает, я прикреплю файлы и вышлю, посмотрите может ошибки в коде.

Все стилизовал и выгрузил и переписал стили и сам код, Причина кодек H.64 - система защиты контента,выполнил перекодировку в theora/vorbis - vp8 -формат webm, кроме того наконец удалось реализовать сложную анимацию на сайте. Использовал адаптивный дизайн и перечитал все документацию по API, но вот хотелось бы, что бы профессиональные WEB-дизайнеры оценили сайт, вроде у вас есть тут раздел профессиональной критики.

зуб даю думаю в этом Стиль css подключайте после стиля самого слайдера. Плюс - обращайтесь к элементам именно так как они указаны в родном скрипте. Так как вы понятия не имеете о наследовательности и приоритете селекторов зуб даю думаю в этом Стиль css подключайте после стиля самого слайдера. Плюс - обращайтесь к элементам именно так как они указаны в родном скрипте. Так как вы понятия не имеете о наследовательности и приоритете селекторов Давно стилизовал другой видео плеер и все библиотеки и jquery подключены - также создал свой сss-спрайт, анимация работает, и работает полоса прокрутки, но есть только звук а видео нет - в том что через дивы нужно обращаться и по приоритету к селекторам класса я разобрался - получил дизайн, так как доступ к элементам управления, получаем через переменные-члены нужного класса: 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);Но я реализовываю другой видео-плеер, я приведу HTML5-код и CSS - код. HTML - разметка: <meta charset="utf-8"><title>Pleer на HTML5</title><script src="flashmediaelement.swf"></script><script src="silverlightmediaelement.xap"></script><script type="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/Javascript" src="js/mediaelement-and-player.min.js"></script><link rel="stylesheet" href="css/style.css" media="screen"><script src="script-js"></script><script type="text/javascript">// <![CDATA[$(document).ready(function() { $('video').mediaelementplayer({ alwaysShowControls: true, videoVolume: 'horizontal', features: ['playpause','progress','volume','fullscreen'] });});// ]]></script></head><body><script type="text/javascript">tooltip.create({'img':true,'border':'1px solid #000000','bg_img_1':'img/foward.png','bg_img_2':'img/pause.png','bg_img_3':'img/play.png','bg_img_4':'img/repeat.png','bg_img_5':'img/rewing.png','bg_img_6':'img/stop.png','bg_color':'#ffffff','width':19,'height':15,'font':12,'id_el':['lololo','lololox'],'id_txt':['Это всплывающая подсказка<br />новая строка в ней','Еще одна подсказка!!!!!!!']'pos':'bottomright','t':10,'l':15,'timer_on':30,'speed_on':5,'timer_off':30,'speed_off':5,'alpha_end':100});</script><div class='sprite foward'></div><div class='sprite play'></div><div class='sprite pause'></div><div class='sprite repeat'></div><div class='sprite rewing'></div><div class='sprite stop'></div><video width="640" height="350" poster="img/fon.jpg" border="1px solid red";> <source src="media/sintel-trailer.mp4" type="video/mp4"></video></html></body>CSS-код: .mejs-inner,.mejs-inner div,.mejs-inner a,.mejs-inner span,.mejs-inner button,.mejs-inner img { margin: 0; padding: 0; border: none; outline: none;}.mejs-container { position: relative; background: #000000; border: 2px solid blue;}.mejs-inner { position: relative; width: inherit; height: inherit;}.me-plugin { position: absolute; }.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video,.mejs-embed,.mejs-embed body,.mejs-mediaelement { width: 100%; height: 100%;}.mejs-embed,.mejs-embed body { margin: 0; padding: 0; overflow: hidden;}.mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000;}.mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay { position: absolute; top: 0; left: 0;}.mejs-poster img { display: block; }.mejs-overlay-play { cursor: pointer; }.mejs-inner .mejs-overlay-button { position: absolute; top:50%; left:50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat;}.mejs-container .mejs-controls { position: absolute; width: 100%; height: 34px; left: 0; bottom: 0%; background: rgb(0,0,0); background: rgba(255,95,95, .7);}.mejs-controls .mejs-button button { cursor: pointer; width: 30px; height: 30px; margin-right: 3px; background: transparent url(../img/controls.png);}.mejs-controls div.mejs-playpause-button { position: absolute; top: 12px; left: 15px;}.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button { width: 30px; height: 30px; ; background-position: 0 0;}.mejs-controls .mejs-pause button { background-position: 0 -12px; }.mejs-controls div.mejs-volume-button { position: absolute; top: 12px; left: 45px;}.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button { width: 30px; height: 30px; background-position: -30px 0;}.mejs-controls .mejs-unmute button { background-position: -12px -12px; }.mejs-controls div.mejs-fullscreen-button { position: absolute; top: 7px; right: 7px;}.mejs-controls .mejs-fullscreen-button button,.mejs-controls .mejs-unfullscreen button { width: 30px; height: 30px; background-position: -26px 0;}.mejs-controls .mejs-unfullscreen button { background-position: 0px 0px; height:30px; width:30px; }.mejs-controls div.mejs-horizontal-volume-slider { position: absolute; cursor: pointer; top: 15px; left: 70px;}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { height: 40px; width: 150px; background: #d6d6d6; padding-left: 5px; margin-left: 30px;}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; width: 0; top: 0; left: 0;}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { height: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}.mejs-controls div.mejs-time-rail { position: absolute; width: 100%; left: 0; top: -10px;}.mejs-controls .mejs-time-rail span { position: absolute; display: block; cursor: pointer; width: 100%; height: 10px; top: 0; left: 0;}.mejs-controls .mejs-time-rail .mejs-time-total { background: rgb(152,152,152); background: rgba(152,152,152, .5);}.mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgb(0,0,0); background: rgba(0,0,0, .3);}.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute; cursor: pointer; width: 16px; height: 18px; top: -3px; background: url(../img/handle.png);}.mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; width: 33px; height: 23px; top: -26px; ; background: url(../img/tooltip.png);}.mejs-controls .mejs-time-rail .mejs-time-float-current { position: absolute; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #666666; text-align: center;}.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }.sprite { background: url('.../img/controls.png') no-repeat top left; width: 30px; height: 30px; } .sprite.foward { background-position: 0px 0px; } .sprite.play { background-position: -30px 0px; } .sprite.pause { background-position: -60px 0px; } .sprite.repeat { background-position: -90px 0px; } .sprite.rewing { background-position: -120px 0px; } .sprite.stop { background-position: -150px 0px; } В head - я все подключил и библиотеки и скрипт прописал, но не воспроизводит видео:

У меня есть скрипт:<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

У меня есть скрипт: <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.webmasters.by/articles/web-programming/817-custom-html5-video-player-with-css3-and-jquery.html