Question

我在laravel 5.7 / Blade / jquery / Bootsrap 4.1应用程序中使用https://videojs.com/库问题是是否有一种方法可以根据设备更改已加载视频的宽度以适合视频块的父div？该插件可以自动设置宽度/高度（下面的代码中已对此进行了注释）我试图用设置宽度（或最大宽度）的div包装视频块：

<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更改视频容器的宽度，但是失败了。

谢谢！

Answer 1

您可以尝试使用这样的视口读取当前设备的宽度

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设置视频容器的宽度...

如何更改不同设备上加载的视频的宽度？

1 个答案: