Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Резиновая ширина плеера ? Как сделать JS?

Резиновая ширина плеера ? Как сделать JS?


     04.02.2016    Стили (CSS), jQuery    2115

вопрос
Здраствуйте. Делаю плеер, смотрю плеер для своего сайта, и тут возникла проблема.
Дело в том что ширина плеера должна быть резиновою а она фиксирована.Помогите разобраться, буду благодарен.
СSS:
.bodyBottons {
color:#fff;
position:fixed;

padding:0;
border-radius:0px;
bottom: 15px;
left: 1px;
background-color: rgb(51, 51, 51);
margin:0;
    background-image: -moz-linear-gradient(top, #333);
    background-image: -webkit-linear-gradient(top, #333);
    background-image: -o-linear-gradient(top, #333);
    background-image: -ms-linear-gradient(top, #333);
    background-image: linear-gradient(top, #333);
}

[class^="bt-"] {
display:inline-block;
width:30px;
height:50px;
background-position:center center;
background-repeat:no-repeat;
cursor:pointer;
opacity:0.6;
padding:0 5px;
}
[class^="bt-"]:hover {
opacity:1;
}

.bt-Prev {
background-image: url(/vee/img/prev.png);
}

.bt-Play {
background-image: url(/vee/img/play.png);
}

.bt-Pause {
background-image: url(/vee/img/pause.png);
}

.bt-Stop {
background-image: url(/vee/img/stop.png);
}

.bt-Next {
background-image: url(/vee/img/next.png);
}

.bt-Again {
background-image: url(/vee/img/again.png);
}
.bt-Download {
background-image: url(/vee/img/down.png);
}

.bt-Close {
background-image: url(/vee/img/close.png);
}



addons.JS

    // Квары (1 - on, 0 - off)
        BtnAgain            = 1, // Кнопкa Повторить
        BtnStop                = 1, // Кнопкa Стоп
        BtnClose            = 1, // Кнопкa Закрыть
        BtnPrev                = 1, // Кнопкa Предыдущий трек
        BtnNext                = 1, // Кнопкa Следующий трек
        BtnDownload            = 1, // Кнопкa Скачать
        changeTitle            = 1, // Менять титул
        changeTitleID        = 0, // Показать ID трека в титул


    // Основные настройки плеера
        PlayerID            = 'SwfPlayer',
        PlayerData            = '/vee/uppod.swf',
        PlayerST             = '/vee/style.txt',
        PlayerWidth         = 600,
        PlayerHieght         = 60,

    // Другое
        TextNoTrack            = '',
        TextPlayed            = ' ',
        BtClick             = 'Player',
        html                 = $('#SwfPlayerv'),
        Text                 = document.title,
        iTitle                 = $('title'),
        htmlClass             = '.'+html.attr('class'),
        Again                 = 0,
        Botton                 = ['bt-Close','bt-Play','bt-Pause','bt-Stop','bt-Next','bt-Prev','bt-Download','bt-Again','PlayPause']  
    
function uppodEvent(a, b){
    setInterval(function (){
        $('#'+Botton[7]).click(function (){
            if (Again < 1) {
                Again = 1;
                $(this).css({opacity : '1'})
            } else {
                Again = 0;
                $(this).css({opacity : ''})
            }
        });
    }, 300);
    switch (b){
        case "end":
            $('#'+Botton[8]).removeClass().addClass(Botton[1]);
            setTimeout(function (){
                if (Again === 1) Player.sendTo('play'); else Player.switching(a,'next');
            }, 300);
            break;
        case "play":
            $('#'+Botton[8]).removeClass().addClass(Botton[2])
            break;
        case "stop":
            $('#'+Botton[8]).removeClass().addClass(Botton[1])
            break;
        case "pause":
            $('#'+Botton[8]).removeClass().addClass(Botton[1])
            break;
    }
}

var Player = {
    send : function (a, b, c){
        if(a.length > 45) {title = a.substring(0, 42)+"...";} else {title = a}
        html.fadeIn(700).html('<table border="0" cellpadding="0" cellspacing="0"><tr>' +
                '<td onclick="Player.switching('+c+',\'prev\')"><font id="'+Botton[5]+'"></font></td>' +
                '<td onclick="Player.sendTo(\'toggle\')"><font id="'+Botton[8]+'"></font></td>' +
                '<td onclick="Player.sendTo(\'stop\')"><font id="'+Botton[3]+'"></font></td>' +
                '<td onclick="Player.switching('+c+',\'next\')"><font id="'+Botton[4]+'"></font></td>' +
                '<td><object id="'+PlayerID+'" type="application/x-shockwave-flash" data="'+PlayerData+'" width="'+PlayerWidth+'" height="'+PlayerHieght+'"><param value="#ffffff" />' +
                '<param name="allowFullScreen" value="true" />' +
                '<param name="allowScriptAccess" value="always" />' +
                '<param name="wmode" value="transparent" />' +
                '<param name="movie" value="'+PlayerData+'" />' +
                '<param name="flashvars" value="uid='+c+'&comment='+title+'&st='+PlayerST+'&amp;file='+b+'" />' +
                '</object></td>' +
                '<td><font id="'+Botton[7]+'"></font></td>' +
                '<td><a id="'+Botton[6]+'" href="'+b+'"></a></td>' +
                '<td onclick="Player.close();"><font id="'+Botton[0]+'"></font></td>' +
                '</tr></table>');
        Again=0;
        Player.addClass();
        Player.ifs(a,c);
    },
    addClass : function () {
        for (var i = 0;i < 8; i++){
            $('#'+Botton[i]).addClass(Botton[i]);
        }
        $('#'+Botton[8]).addClass(Botton[1]);
    },
    ifs : function (a,b) {
        if (changeTitle     === 0) iTitle.html(Text); else if (changeTitleID === 1) iTitle.html('['+b+'] '+TextPlayed+a); else iTitle.html(TextPlayed+a);
        if (BtnAgain === 0) $('#'+Botton[8]).hide();
        if (BtnClose === 0) $('#'+Botton[0]).hide();
        if (BtnStop === 0) $('#'+Botton[3]).hide();
        if (BtnNext === 0) $('#'+Botton[4]).hide();
        if (BtnPrev === 0) $('#'+Botton[5]).hide();
        if (BtnDownload === 0) $('#'+Botton[6]).hide();
    },
    switching : function (a,b,c) {
        if (!c) c = 1; else if (c > 500) {Player.sendTo('play'); if (confirm(TextNoTrack)) confirm.close(); else confirm(TextNoTrack);}
        if (b === 'next') {
            a=a-1;
            if (document.getElementById(BtClick+a)) $('#'+BtClick+a).click(); else {c=+c+1;Player.switching(a,b,c);}
        } else {
            a=+a+1;
            if (document.getElementById(BtClick+a)) $('#'+BtClick+a).click(); else {c=+c+1;Player.switching(a,b,c);}
        }
    },
    close : function () {
        $('#'+Botton[3]).click()
        html.fadeOut(700);
        Again = 0;
        iTitle.html(Text);
    },
    sendTo : function (a) {
        uppodSend(PlayerID, a)
    }
}

Ответа пока нет


9 комментариев

redissx
Юзер

redissx - 5 февраля 2016 11:49 -

У uppod нет никаких проблем с адаптивностью. Оберните в .my-video, задайте
.my-video embed, .my-video object, .my-video video, .my-video iframe, .my-video frame {width: 100% !important; height:400px;}

Высоту задаем потом в паре мест медиазапросами.

overko
Гости

overko - 5 февраля 2016 12:55 -

я чуток туговатый, можно по шагам? пожалуйста

redissx
Юзер

redissx - 5 февраля 2016 14:16 -

1. в html
<div class="my-video">
uppod код вызова
</div>


2. css

.my-video embed, .my-video object, .my-video video, .my-video iframe, .my-video frame {width: 100% !important; height:400px;}


@media screen and (max-width: 470px) {
.my-video embed, .my-video object, .my-video video, .my-video iframe, .my-video frame {height:250px;}
}


Как-то так. Обычно этого хватает с этим плеером.

overko
Гости

overko - 5 февраля 2016 15:03 -

addons.JS что писать в


  // Основные настройки плеера
        PlayerID            = 'SwfPlayer',
        PlayerData            = '/vee/uppod.swf',
        PlayerST             = '/vee/style.txt',
        PlayerWidth         = 600,
        PlayerHieght         = 60,

redissx
Юзер

redissx - 5 февраля 2016 19:05 -

Это не нужно трогать. По идее, это уже не должно влиять. Пробуйте.

overko
Гости

overko - 5 февраля 2016 19:18 -

ставляю значение 0, нету вообще плеера , ставляю 100 так он и 100px делаеться.
Грубо говоря оно только и работает

redissx
Юзер

redissx - 6 февраля 2016 18:55 -

Тогда

.my-video embed, .my-video object, .my-video video, .my-video iframe, .my-video frame {width: 100% !important; height:400px !important;}


@media screen and (max-width: 470px) {
.my-video embed, .my-video object, .my-video video, .my-video iframe, .my-video frame {height:250px !important;}
}

Endy
Гости

Endy - 5 февраля 2016 15:51 -

укажи размеры видеоплеера там, если хочешь ))

overko
Гости

overko - 5 февраля 2016 16:10 -

Размер должен быть 100% а не 600px

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх