← Форум / HTML5 / Адаптивный дизайн
Я пример отзывчивого плеера от создателей uppod уже видел. Тут проблема другая. Если по ширине уменьшать окно плеера, то высота плеера остаётся прежней, даже в примере.
А по идеи нужно так, что бы плеер по ширине уменьшаем, автоматически уменьшается высота плеера. Как это у конкурентов сделано.
Всем хороший плеер UPPOD, но реального примера как сделать его полноценно отзывчивым к дизайну я не нашёл.
Может кто-то всё таки смог это реализовать?
А по идеи нужно так, что бы плеер по ширине уменьшаем, автоматически уменьшается высота плеера. Как это у конкурентов сделано.
Всем хороший плеер UPPOD, но реального примера как сделать его полноценно отзывчивым к дизайну я не нашёл.
Может кто-то всё таки смог это реализовать?
| Alv | Ссылка на пост (Смотрели 3659) | 05.04.16 02:19 Ответить |
А какая версия это поддерживает?
если вставка через html5
<div id="videoplayer4918" style="width:100%;height:480px;"></div>
что-то не видно что плеер автоматом размер подбирает, при тесте через инструмент разработчиков в хроме, эмуляция мобильных устройств, везде высоту держит 480, работает только если изначально загрузить его большим, а затем уменьшать.
Может я ошибаюсь и вы подскажите как решить дилемму?
Буду признателен, если ответите что за обновление и каким образом оно решает данную проблему, я последнюю версию плеера использую.
И если есть ссылка на пример с возможностью в разных размерах посмотреть, а не так как у вас в примере на сайте, где ширина фиксированная и все фиксировано.
<div id="videoplayer4918" style="width:645px;height:385px;"></div>
тем более не идет, так как ширина фиксированная, а нужна 100%, и высота при этом маленькая если блок широкий в котором находится видео.
Все это я проверяю при состоянии плеера "стоп" так если автоматом он не воспроизводит.
а должно быть вот так:
Я Вам страницу чистую с плеером подготовлю, и сами себе продемонстрируйте.
Продемонстрируйте то что вы ответили?!
Я лично вижу что нет адаптивности ,я делал свой код для ютуба, и у меня там все отрабатывало как положено, и после перезагрузки и до перезагрузки. Там на css у меня было настроено.
У вас же все это дело зашито в коде, и я не пойму как у вас там работает адаптивность то ваша. В свой код закрываю. все работает хорошо, но видео тогда съезжает на половину. А без моего кода, ваш плеер не дает адаптивность,
Я вам дал ссылку на страницу, вы ее смотрели?
Загружали в полном режиме браузер и в минимальном?
Дайте четкую инструкцию того что сделать необходимо мне, чтобы у меня был адаптивный плеер и видео в нем отображалось корректно? При минимальном размере браузера и при полном.
У меня обуздать ваш код не получается.
Как я во вне могу задать блок, который принимает высоту ваш плеер, если он ее сам меняет, а фиксированная мне не нужна.
"До загрузки плеер это нужно делать снаружи." — как это сделать?
Толк задавать высоту, если она постоянно разная, на то и резиновый плеер чтобы менялась высота, а не гнаться за ней всеми возможными способами. В чем тогда помощь плеера в данном вопросе?!
Жду ответ! А то что-то два дня прошло, но решения я так и не вижу!
Вторую неделю жду от вас ответ и рабочий пример, надеюсь дождусь))
Я же вам утверждаю что ваше решение это не решение. Вы мне утверждаете что ваше решение работает. Покажите работоспособность вашего решение, если уже разговор наш к этому подошел.
Я же вам еще раз утверждаю что независимо от того когда ваш плеер загружается, вся нагрузка на адаптивность должна ложится на него а не на блоки в которых он находится, так если погрузите его в свой блок заранее подготовленный, и этому блоку пусть задаются настройки при вставке, а сам плеер отдельно пусть адаптируется.
Вы понимаете что своим ответом вы сейчас отказываете своим клиентам в помощи? Это раз. Во вторых вы отказываетесь решать проблему которая уже созрела давно и много лет существует.
В третьих ваше решение оно не полноценное, и вам нужно его довести до ума. Либо показать рабочий вариант вашего решения. а не ссылаться на частные верстки от которых не должно ничего зависеть по сути.
Вот пример для Вас, для тех кто даже не хочет потратить свое время чтобы помочь своим же клиентам:
<div class="video-plugin-new" style="max-width:100%; width:660px; height:auto; padding-top:0; padding-bottom:0; margin:0 auto;float:center; border: 0px solid #fff;margin-bottom: 20px;">
<div style="width:660px;height:0; padding-bottom: 83%; padding-top:0;">
<тут код вставки плеера>
</div></div>
далее уже обработка идет через css:
.video-plugin,.video-plugin-new
{
margin-bottom:10px
}
.featured-panel .video-plugin,.featured-panel .video-plugin-new
{
margin-bottom:0
}
.floating-featured-panel-fluid .video-plugin,.floating-featured-panel-fluid .video-plugin-new,.floating-featured-panel-fluid .video-plugin .flowplayer,.floating-featured-panel-fluid .video-plugin-new .flowplayer
{
width:100%!important
}
.element-container .audio-plugin
{
margin:0 0 20px
}
.video-plugin .fp-logo,.video-plugin-new .fp-logo,.video-plugin-lightbox .fp-logo
{
display:block!important;
opacity:1!important
}
.video-plugin,.video-plugin-new
{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
max-width:100%;
height:100%
}
.video-plugin-new
{
overflow:hidden
}
.video-plugin>div,.video-plugin-new>div
{
line-height:0!important;
margin:0!important;
display:block
}
.video-plugin>script:first-child,.video-plugin-new>script:first-child
{
display:none
}
.video-plugin *,.video-plugin-new *
{
max-width:100%!important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.video-plugin-new.not-flowplayer>div
{
position:relative
}
.video-plugin-new>iframe
{
display:block;
margin-left:auto;
margin-right:auto
}
.video-plugin-new.not-flowplayer>div>iframe
{
position:absolute!important;
width:100%!important;
height:100%!important
}
.video-plugin p,.video-plugin-new p
{
line-height:1!important
}
.video-plugin .fp-message,.video-plugin-new .fp-message
{
text-decoration:none
}
.video-plugin .fp-progress,.video-plugin-new .fp-progress
{
max-width:none!important
}
.flowplayer.is-poster,.flowplayer video
{
background:#000
}
.flowplayer.is-poster
{
background-size:100%;
background-repeat:no-repeat;
background-position:center center
}
.flowplayer.hide-controls .fp-ui *,.flowplayer .fp-ratio,.flowplayer .fp-context-menu
{
display:none
}
.video-plugin-lightbox .fp-ratio
{
display:block
}
@media only screen and (max-width:959px)
{
.video-plugin
{
position:relative;
padding-bottom:56.25%;
padding-top:30px;
overflow:hidden;
width:100%!important;
height:auto!important
}
.video-plugin-new
{
position:relative;
padding-top:30px;
height:0;
overflow:hidden;
height:auto!important
}
.video-plugin iframe,.video-plugin object,.video-plugin embed,.video-plugin img,.video-plugin>:first-child,.video-plugin>script:first-child+*
{
position:absolute!important;
top:0;
left:0;
width:100%!important;
height:100%!important;
max-width:100%
}
.video-plugin-new iframe,.video-plugin-new object,.video-plugin-new embed,.video-plugin-new img,.video-plugin-new>:first-child,.video-plugin-new>script:first-child+*
{
position:static!important
}
.video-plugin-new-syntax>:first-child
{
position:static!important
}
.video-plugin>:first-child,.video-plugin-new>:first-child,.video-plugin>script:first-child+*,.video-plugin-new>script:first-child+*
{
display:block
}
.video-plugin>script:first-child,.video-plugin-new>script:first-child
{
display:none
}
.video-plugin img,.video-plugin-new img
{
height:auto!important
}
.video-plugin.not-flowplayer a,.video-plugin-new.not-flowplayer a
{
width:auto!important;
height:auto!important;
max-width:100%!important;
text-align:center
}
}
.video-lightbox-link
{
text-align:center;
font-size:12px!important;
color:#a1a1a1;
margin:0 auto;
max-width:100%
}
.video-lightbox-link p
{
padding-top:5px
}
.video-lightbox-link img
{
max-width:100%;
display:block;
width:auto;
height:auto!important
}
.floating-featured-panel-fluid .video-lightbox-link,.floating-featured-panel-fluid .video-lightbox-style-2
{
width:100%!important;
height:auto!important
}
.video-lightbox-link .frame-style-inner
{
-webkit-box-shadow:0 2px 0 #000;
-moz-box-shadow:0 2px 0 #000;
-o-box-shadow:0 2px 0 #000;
box-shadow:0 2px 0 #000;
-webkit-box-shadow:0 2px 0 rgba(0,0,0,.04);
-moz-box-shadow:0 2px 0 rgba(0,0,0,.04);
-o-box-shadow:0 2px 0 rgba(0,0,0,.04);
box-shadow:0 2px 0 rgba(0,0,0,.04);
border:1px solid #e4e4e4;
border-top:1px solid #eee;
border-bottom:1px solid #ccc;
padding:8px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
background:#fff;
margin-left:auto;
margin-right:auto
}
.video-lightbox-link .frame-style-inner>a,.video-lightbox-link .frame-style-inner>img
{
display:block
}
.video-lightbox-link a
{
position:relative
}
.video-lightbox-link.video-lightbox-style-1 .play-icon
{
background-image:url(images/video_player/play-icon.png);
background-repeat:no-repeat;
background-position:left top;
width:92px;
height:92px;
position:absolute;
left:50%;
margin-left:-46px;
top:50%;
margin-top:-46px
}
.video-lightbox-link.video-lightbox-style-1 a:hover .play-icon
{
background-position:left bottom
}
.video-lightbox-style-2
{
position:relative;
display:block;
max-width:100%;
height:auto;
text-align:center
}
.video-lightbox-style-2 .preview-container
{
#position:absolute;
#top:50%;
vertical-align:middle
}
.video-lightbox-style-2 img
{
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.2);
box-shadow:0 1px 2px 1px rgba(0,0,0,.2);
border:8px solid #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
max-width:100%;
height:auto!important
}
.video-lightbox-style-2 span
{
position:absolute;
bottom:4px;
width:100%;
padding:10px 0;
display:block;
background-color:rgba(0,0,0,.25);
border:8px solid #fff;
border-top:0;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:#fff!important
}
.video-lightbox-style-2 .circle
{
height:60px;
width:60px;
border-radius:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-30px;
margin-top:-30px;
background:-moz-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(102,102,102,.75)),color-stop(100%,rgba(0,0,0,.75)));
background:-webkit-linear-gradient(top,rgba(102,102,102,.25) 0,rgba(0,0,0,.75) 100%);
background:-o-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-ms-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:linear-gradient(to bottom,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#40000000’, endColorstr=’#bf000000’, GradientType=0);
-webkit-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.5),0 1px 2px 1px rgba(0,0,0,.25);
-moz-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.5),0 1px 2px 1px rgba(0,0,0,.25);
box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.5),0 1px 2px 1px rgba(0,0,0,.25)
}
.video-lightbox-style-2 .play
{
position:absolute;
top:14px;
left:22px;
width:0;
height:0;
border-top:16px solid transparent;
border-left:23px solid rgba(0,0,0,.25);
border-bottom:16px solid transparent
}
.video-lightbox-style-2 .play:before
{
content:"";
position:absolute;
top:-14px;
left:-22px;
width:0;
height:0;
border-top:14px solid transparent;
border-left:20px solid #fff;
border-bottom:14px solid transparent
}
.video-lightbox-style-2:hover img
{
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.25);
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.25);
box-shadow:0 1px 2px 1px rgba(0,0,0,.25)
}
.video-lightbox-style-2 .circle:hover
{
background:-moz-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(102,102,102,.75)),color-stop(100%,rgba(0,0,0,.75)));
background:-webkit-linear-gradient(top,rgba(102,102,102,.25) 0,rgba(0,0,0,.75) 100%);
background:-o-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-ms-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:linear-gradient(to bottom,rgba(128,128,128,.75) 0,rgba(0,0,0,.75) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#40000000’, endColorstr=’#bf000000’, GradientType=0);
-webkit-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.75),0 1px 4px 1px rgba(0,0,0,.5);
-moz-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.75),0 1px 4px 1px rgba(0,0,0,.5);
box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.75),0 1px 4px 1px rgba(0,0,0,.5)
}
.video-lightbox-style-3
{
position:relative;
display:block;
text-align:center
}
.video-lightbox-style-3 .preview-container
{
#position:absolute;
#top:50%;
vertical-align:middle
}
.video-lightbox-style-3 img
{
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.2);
box-shadow:0 1px 2px 1px rgba(0,0,0,.2);
border:8px solid #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
max-width:100%;
height:auto
}
.video-lightbox-style-3 span
{
position:absolute;
bottom:4px;
width:100%;
padding:10px 0;
display:block;
background-color:rgba(0,0,0,.25);
border:8px solid #fff;
border-top:0;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:#fff!important
}
.video-lightbox-style-3 .circle
{
height:40px;
width:40px;
border-radius:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-20px;
margin-top:-20px;
background:-moz-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(102,102,102,.75)),color-stop(100%,rgba(0,0,0,.75)));
background:-webkit-linear-gradient(top,rgba(102,102,102,.25) 0,rgba(0,0,0,.75) 100%);
background:-o-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-ms-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:linear-gradient(to bottom,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#40000000’, endColorstr=’#bf000000’, GradientType=0);
-webkit-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.5),0 1px 2px 1px rgba(0,0,0,.25);
-moz-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.5),0 1px 2px 1px rgba(0,0,0,.25);
box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.5),0 1px 2px 1px rgba(0,0,0,.25)
}
.video-lightbox-style-3 .play
{
position:absolute;
top:10px;
left:16px;
width:0;
height:0;
border-top:10px solid transparent;
border-left:13px solid rgba(0,0,0,.25);
border-bottom:10px solid transparent
}
.video-lightbox-style-3 .play:before
{
content:"";
position:absolute;
top:-8px;
left:-12px;
width:0;
height:0;
border-top:8px solid transparent;
border-left:10px solid #fff;
border-bottom:8px solid transparent
}
.video-lightbox-style-3:hover img
{
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.25);
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.25);
box-shadow:0 1px 2px 1px rgba(0,0,0,.25)
}
.video-lightbox-style-3 .circle:hover
{
background:-moz-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(102,102,102,.75)),color-stop(100%,rgba(0,0,0,.75)));
background:-webkit-linear-gradient(top,rgba(102,102,102,.25) 0,rgba(0,0,0,.75) 100%);
background:-o-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:-ms-linear-gradient(top,rgba(102,102,102,.75) 0,rgba(0,0,0,.75) 100%);
background:linear-gradient(to bottom,rgba(128,128,128,.75) 0,rgba(0,0,0,.75) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#40000000’, endColorstr=’#bf000000’, GradientType=0);
-webkit-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.75),0 1px 4px 1px rgba(0,0,0,.5);
-moz-box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.75),0 1px 4px 1px rgba(0,0,0,.5);
box-shadow:inset 0 0 0 3px #fff,inset 0 0 1px 4px rgba(0,0,0,.75),0 1px 4px 1px rgba(0,0,0,.5)
}
.video-navigation-1 ul
{
text-align:center
}
.video-navigation-1 li
{
float:none;
width:163px;
text-align:center;
margin-left:0;
display:inline-block;
vertical-align:top;
margin-right:20px;
line-height:1.3em
}
.floating-featured-panel-fluid .video-navigation-1 li
{
margin-right:0
}
Посмотрите как оно отображается на разных устройствах мобильных. То что вы диву дали 50%, это не решение.
Детальнее пример что выше дал и код со стилями изучите, только он решает все задачи и проблему, но его я не могу использовать так как по умолчанию у вас уже в код вшито ваше "не рабочее решение" по адаптации. и оно мешает работать моему коду (стилям).
Можно как то вообще вашу автоматическую адаптацию отключить? Она все равно не помогает и не работает. даже в том варианте что вы предоставили любезно.
Ваше видео не адаптируется под размер экрана, как еще объяснить я не знаю)))
С учетом замечаний, пример ваш отрабатывать стал как положено! Только ссылку вы битую дали.
Как реализовать это решение на своих страницах. людям объясните пожалуйста?
Что там за строчка у вас, которая одна на js?
И будет людям счастье)
Каким образом можно использовать:
<script type="text/javascript">
document.getElementById("player").style.height = document.getElementById("player").offsetWidth/1.777+’px’;
var player = new Uppod({"uid":"player","file":");
</script>
я не понял, тем более если у меня отдельный шаблон используется, защита ссылок и прочие настройки.
Будьте добры объясните людям как использовать ваше решение что вы предоставили?!
document.getElementById("player").style.height = document.getElementById("player").offsetWidth/1.777+’px’;
у меня не работает? Вообще плеер исчезает.
Вот весь код по вашему примеру:
<script type="text/javascript">
document.getElementById("videoplayer4944").style.height = document.getElementById("videoplayer4944").offsetWidth/1.777+’px’;
this.videoplayer4944 = new Uppod({m:"video",uid:"videoplayer4944",comment:"Знакомство и приветствие
",file:"#02f06606906c06507306507207606906306502f06606906c06502f06406f07706e06c06f06106402f06102f03603303603702f07306302f03303403302f06802f06106306203206506606403903606303303606203506103903503806103203406303806206503103703603406106403702e06d070034",st:"uppodvideo"});</script>
почему не работает тогда если прсото?
Пропишите данный код по умолчанию в свой и будет всем счастье.
Выражаю от всех огромную благодарность!
Устал я если честно уже с ним бороться и с вами также также устал переписываться и ожидать что вы поймете меня и сможете чем-то помочь.