Разработка своего 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]

Решкние задачи: 

#main { margin: auto auto;max-width: 1200px; }#wrapper{margin: auto auto;max-width: 1200px; } 

Минус вы выставили сам себе, дизайн современный и отлично продуманна форма регистрации, без высоких знания HTML/CSS - такое организовать не возможно, также доработана кросс браузерность и многие новые свойства HTML5 - код написан на професссиональном уровне, позавите других WEB-разработчиков, мне нужна не зависимая и комплексная оценка. У многих сайтов в сети и шапки нормальной нет, также встроенна современнапя анимация.

[Sergik+]

Вы совершенно не слушаете форумчан и не хотите совсем учится, я думаю вы навсегда останетесь на таком уровне.

[Нарек]

Минус вы выставили сам себе

 ага, завидуют что у них float: center не работает.. Бяки...

 

P.S. http://webledi.ru/forum/index.php?topic=4227.0

Edited July 31, 2014 by Нарек

[npofopr]

Отписался и я.

Вы живете в каком то своём мире.

[swandev]

Решкние задачи: 

#main { margin: auto auto;max-width: 1200px; }#wrapper{margin: auto auto;max-width: 1200px; } 

Минус вы выставили сам себе, дизайн современный и отлично продуманна форма регистрации, без высоких знания HTML/CSS - такое организовать не возможно, также доработана кросс браузерность и многие новые свойства HTML5 - код написан на професссиональном уровне, позавите других WEB-разработчиков, мне нужна не зависимая и комплексная оценка. У многих сайтов в сети и шапки нормальной нет, также встроенна современнапя анимация.

[Николя223]

Минус вы выставили сам себе, дизайн современный и отлично продуманна форма регистрации, без высоких знания HTML/CSS - такое организовать не возможно, также доработана кросс браузерность и многие новые свойства HTML5 - код написан на професссиональном уровне, позавите других WEB-разработчиков, мне нужна не зависимая и комплексная оценка. У многих сайтов в сети и шапки нормальной нет, также встроенна современнапя анимация.

вам все написали уже.

По поводу ваших амбиций - ваша право так считать, но все же стоит обратить внимание по поводу того что вам ответили.

 

Если брать по уровню школьника из 2000-х то сайт очень даже ничего. НО. сейчас не 2000-е, и электорат здесь далеко не школьники. 

[Zero-11]

Вы совершенно не слушаете форумчан и не хотите совсем учится, я думаю вы навсегда останетесь на таком уровне.

 

Я слушаю - зачем минусовать-?

 

Я привел конкретные проблемы, и решать их мне пришлось самому, ну ходя бы с этим кодом помогли, как я могу обучатся, ccылки или рабочие решения вы здесь не публиковали

 

 

И в школе уже преподают JQuery - немного поясните, я могу в любом коде разобраться, адаптировать и дописать - но этот код я писал с нуля, я смотрел статьи по созданию макетов сайтов, и footer я доработаю. Я соггласен сейчас не 2000-ый, надо доучиватся проффесиональной разработке, что бы сайт отвечал современным стандартам, но для начинающего верстальщика можно поставить зачет-?  

[Нарек]

но для начинающего верстальщика можно поставить зачет-?  

Нет нельзя. Начинающий должен зубрить хотя бы самые важные свойства с помощью которых строится любой сайт, потом уже заявить что он начинающий. Тот же float, Вам дали ссылку где про него читать, там ясно написано, что float имеет left, right, none, inherit  но никак не center и top. Float один из таких свойств через которую строится большинство из сайтов если не все. Не знать про его свойства, потом заявить что Вы верстальщик (хоть и начинающий) тут одного минуса мало. Зубрите как можно лучше хотя бы основные такие очень часто встречающийся свойства, я не говорю про css анимации и тд, потом приходите на форум, задавайте конкретные вопросы и получайте конкретные ответы, тут добрые люди, помогут.

[Николя223]

я могу в любом коде разобраться

Первое правило Вам - никогда не считайте что ВЫ знаете всё, пока действительно не будете знать всё.... иначе любым вопросом вам могут опустить вашу самооценку.  

[Zero-11]

 

но для начинающего верстальщика можно поставить зачет-?  

Нет нельзя. Начинающий должен зубрить хотя бы самые важные свойства с помощью которых строится любой сайт, потом уже заявить что он начинающий. Тот же float, Вам дали ссылку где про него читать, там ясно написано, что float имеет left, right, none, inherit  но никак не center и top. Float один из таких свойств через которую строится большинство из сайтов если не все. Не знать про его свойства, потом заявить что Вы верстальщик (хоть и начинающий) тут одного минуса мало. Зубрите как можно лучше хотя бы основные такие очень часто встречающийся свойства, я не говорю про css анимации и тд, потом приходите на форум, задавайте конкретные вопросы и получайте конкретные ответы, тут добрые люди, помогут.

 

 

Вопервых я знаю эти свойства с них и начинал, c основ, во вторых обучлася сначала по интернет-ресурсу, вроде самоучитель по CSS или освой СSS самостоятельно, там и была приведена эта информация, наверное интернет-ресурсы обновили, потом на авторитетных интернет ресурсах, float:left и float: right и другие свойства float - знаю,а можно использовать position:relative + position:absolute, а можно и табличную верстку, так раньше верстались сайты.

 

 

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