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

Zero-11 · June 21, 2014

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

npofopr · June 21, 2014

и в чем вопрос? :-)

Николя223 · June 21, 2014

Если хотите свой плеер писать - во первых на это уйдет не менее недели. а во вторых - практики не хватит

Только по одному этому

<script language="Javascript">

зуб даю

и в чем вопрос? :-)

думаю в этом

</body>И у меня не получается его стилизовать - звук только проигрывает, я новичок в WEB-разработке, что я делаю не так-?.

Стиль css подключайте после стиля самого слайдера. Плюс - обращайтесь к элементам именно так как они указаны в родном скрипте. Так как вы понятия не имеете о наследовательности и приоритете селекторов

npofopr · June 22, 2014

думаю в этом

слона и не увидел)

Используйте нечто типа uppod или video.js, и будет вам счастье)

Zero-11 · June 25, 2014

Если хотите свой плеер писать - во первых на это уйдет не менее недели. а во вторых - практики не хватит
Только по одному этому
<script language="Javascript">
зуб даю
и в чем вопрос? :-)
думаю в этом

</body>И у меня не получается его стилизовать - звук только проигрывает, я новичок в WEB-разработке, что я делаю не так-?.

Стиль 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 - я все подключил и библиотеки и скрипт прописал, но не воспроизводит видео:

Edited June 25, 2014 by Zero-11

npofopr · June 26, 2014

я приведу HTML5-код и CSS - код

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

я реализовываю другой видео-плеер

а дефолтный http://mediaelementjs.com/ работает? до ваших махинаций.

Zero-11 · June 30, 2014

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

Edited June 30, 2014 by Zero-11

npofopr · June 30, 2014

то бы профессиональные WEB-дизайнеры оценили сайт, вроде у вас есть тут раздел

дак выкладывайте.

Но судя по скриншоту плеера, ничего видимо там хорошего.

Zero-11 · July 20, 2014

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

http://programm11.ucoz.ru/

Возможно ошибки в коде HTML5 и CSS3, но запускал локально, все работает, я прикреплю файлы и вышлю, посмотрите может ошибки в коде.

Edited July 24, 2014 by Zero-11

npofopr · July 21, 2014

Вот только не надо сюда все тома "Войны и мир" вставлять.

Откройте Консколь F12 да и разбирайтесь. У вас там куча ошибок.

По моему, чем гемороиться с Укозом, проще завести бесплатный хостинг. Завести бесплатное имя для сайта. И радоваться жизни.

Zero-11 · July 23, 2014

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

npofopr · July 23, 2014

F12 -> Console

Про Инспектор кода, видимо вы не знаете?

Zero-11 · July 23, 2014

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

Николя223 · July 23, 2014

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://programm11.ucoz.ru/abnl/?adsdata=1fcw^M^8sAIQjIYHvQJX8X!Qq9851zksQP!…F4zS2UpT42ZsfziWfFxWO^B6;pYIUrte0C7GIuYTcf7ve^z9nT7gQS3vumuR!S08!v2HDk;woo

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://rtrgt2.com/apu.php?zoneid=1708

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://ucoz.adsniper.ru/?pid=20&sniper=1

Uncaught SyntaxError: Unexpected token < programm11.uzoz.ru/my_media/js/jguery-ui-1.8.2.custom.min.js:1

Uncaught SyntaxError: Unexpected token < programm11.uzoz.ru/my_media/js/jguery.ghindaVideoPlayer.js:1

Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/flashmediaelement.swf:2

Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/silverlightmediaelement.xap:1

Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.ucoz.ru/js/video.html

Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/flashmediaelement.swf:2

Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/silverlightmediaelement.xap:1

Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.ucoz.ru/my_media/script-js

Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.ucoz.ru/my_media/css/.../img/controls.png

XHR finished loading: POST "http://mc.yandex.ru/watch/14153041?page-url=http%3A%2F%2Fprogramm11.ucoz.ru…2C%2C%2C444%2C444%2C3%2C%3Awn%3A3374%3Ahl%3A1%3Arqnl%3A1%3Ast%3A1406141272".

Zero-11 · July 23, 2014

Та нужно 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>

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://programm11.ucoz.ru/abnl/?adsdata=1fcw^M^8sAIQjIYHvQJX8X!Qq9851zksQP!…F4zS2UpT42ZsfziWfFxWO^B6;pYIUrte0C7GIuYTcf7ve^z9nT7gQS3vumuR!S08!v2HDk;woo
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://rtrgt2.com/apu.php?zoneid=1708
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://ucoz.adsniper.ru/?pid=20&sniper=1
Uncaught SyntaxError: Unexpected token < programm11.uzoz.ru/my_media/js/jguery-ui-1.8.2.custom.min.js:1
Uncaught SyntaxError: Unexpected token < programm11.uzoz.ru/my_media/js/jguery.ghindaVideoPlayer.js:1
Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/flashmediaelement.swf:2
Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/silverlightmediaelement.xap:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.ucoz.ru/js/video.html
Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/flashmediaelement.swf:2
Uncaught SyntaxError: Unexpected token ILLEGAL programm11.ucoz.ru/my_media/silverlightmediaelement.xap:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.ucoz.ru/my_media/script-js
Failed to load resource: the server responded with a status of 404 (Not Found) http://programm11.ucoz.ru/my_media/css/.../img/controls.png
XHR finished loading: POST "http://mc.yandex.ru/watch/14153041?page-url=http%3A%2F%2Fprogramm11.ucoz.ru…2C%2C%2C444%2C444%2C3%2C%3Awn%3A3374%3Ahl%3A1%3Arqnl%3A1%3Ast%3A1406141272".

Пути указаны верно и у меня он ошибок не выдают, а это в head нужно удалить - я удалял, но при переустановке на хостинге пути автоматически прописываются в head:

http://programm11.ucoz.ru/abnl/?adsdata=1fcw^M^8sAIQjIYHvQJX8X!Qq9851zksQP!…F4zS2UpT42ZsfziWfFxWO^B6;pYIUrte0C7GIuYTcf7ve^z9nT7gQS3vumuR!S08!v2HDk;woo

здесь идет какой то POST-запрос на jandex и видимо по зашифрованной URL-адрессации - также убрать не получается.

Николя223 · July 24, 2014

http://programm11.uzoz.ru/my_media/js/jguery-ui-1.8.2.custom.min.js

По твоему это нормально?

И так далее

И сделай милость - убери весь код выше под спойлеры

Zero-11 · July 24, 2014

Ну если бы эти пути не работали или были не верно заданы, не запускался плеер на 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;woo

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://rtrgt2.com/apu.php?zoneid=1708

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://ucoz.adsniper...pid=20&sniper=1
 

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

Edited July 24, 2014 by Zero-11

Николя223 · July 24, 2014

уходи с юкоза. юкоз - игрушка для дет садовцев

обычной консолью хрома

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

Zero-11 · July 24, 2014

Ну так я прописываю путь - <script type='text/javascript' src="http://programm11.ucoz.ru/my_media/js/jquery-1.11.1.min.js"></script>

Zero-11 · July 24, 2014

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

Edited July 24, 2014 by Zero-11

npofopr · July 24, 2014

Вы просите оценить этот ужас?

http://storage6.static.itmages.ru/i/14/0724/h_1406214174_6308109_f8723a5b6a.jpg

Может я не туда смотрю, но даже смотреть не хочется и оценивать нечего :-)

Edited July 24, 2014 by npofopr

Николя223 · July 24, 2014

Нехочу вас обижать, но это говносайт

Zero-11 · July 25, 2014

Вы просите оценить этот ужас?

http://storage6.static.itmages.ru/i/14/0724/h_1406214174_6308109_f8723a5b6a.jpg

Может я не туда смотрю, но даже смотреть не хочется и оценивать нечего :-)

Вы через какорй браузер открыли, откройте через Chrome или Mozilla - http://programm11.ucoz.ru/

Шабка сайта и код, учился по видеоурока професиорнального WEB-разработчика - прежде чем так выражаться укажите минусы, и использовал актуальные ресурсы интернета.

Еща раз минусы укажите.

Не уступает в дизайне даже этому - также ани мация и адпативный дизайн реализованы:

http://www.ditchwitch.ru/

Нехочу вас обижать, но это говносайт

Вот скрин сайта:

Edited July 25, 2014 by Zero-11

Zero-11 · July 25, 2014

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

Николя223 · July 25, 2014

http://joxi.ru/lifSU_3JTJBYNhJBePg

npofopr · July 25, 2014

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

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

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

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Zero-11

Great Rash

npofopr

60 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information