Как изменить ширину загружаемого видео на разных устройствах? - PullRequest
Новая
       6

Как изменить ширину загружаемого видео на разных устройствах?

0 голосов
/ 14 декабря 2018

Я использую библиотеку https://videojs.com/ в своем приложении laravel 5.7 / Blade / jquery / Bootsrap 4.1, и вопрос в том, есть ли способ изменить ширину загруженного видео в зависимости от устройства, чтобы подогнать родительский div для видеоблока?Этот плагин дает возможность автоматически устанавливать ширину / высоту (теперь это прокомментировано в коде ниже). Я попытался обернуть видео блок div с установленной шириной (или max-width): 

<div class="row">
    <div class="block_container_internal">

        {{--width="640" height="264"--}}
        <video id="video_page_content_{{ $nextPageContentVideo->id }}" class="video-js" controls preload="auto" poster="/images/video_poster.jpg"   data-setup="{}">
            <source src="{{ $next_video_url }}" type='video/mp4'>
            <source src="{{ $next_video_url }}" type='video/webm'>
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
        </video>

    </div>
</div>

в cssустройства: 

.block_container_internal {
    width: 390px !important;
    padding-right: 5px;
    padding-left: 5px;
}

но в любом случае видеоблок получит всю ширину экрана.Я просмотрел документы на сайте, но не нашел никаких вариантов

ИЗМЕНЕНО # 2

Я загрузил эту проблему онлайн http://votes.nilov -sergey-demo-apps.tk / about

Пожалуйста, посмотрите на устройство ipad: https://imgur.com/a/GPXm3gi Поскольку я не хочу показывать видео в полном объеме с помощью, я хотел бы изменить ширину видео контейнера с обтеканием div, но это не удалось.

Спасибо!

1 Ответ

0 голосов
/ 24 декабря 2018

Вы можете попытаться прочитать ширину текущего устройства с таким окном просмотра 

function getDevice() {
    var viewport = {
        width: $(window).width(),
        height: $(window).height()
    };
    if (typeof param != "undefined") {
        if (param.toLowerCase() == 'width') {
            return viewport.width;
        }
        if (param.toLowerCase() == 'height') {
            return viewport.height;
        }
    }
    return viewport;
}

и в зависимости от ширины устройства установить ширину видео контейнера с помощью JS ...

...