javascript - 如何在不同设备上更改上传视频的宽度？

Question

我使用https://videojs.com/我的 laravel 5.7/Blade/jquery/Bootsrap 4.1 应用程序中的库问题是是否有办法根据设备更改加载视频的宽度以适合视频 block 的父 div？该插件可以自动设置宽度/高度(现在在下面的代码中进行了注释)我尝试用设置宽度(或最大宽度)的 div 包裹视频 block :

<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;
}

但无论如何，视频 block 会占据屏幕的所有宽度。我查看了网站上的文档，但没有找到任何选项

修改#2

我把这个问题上传到网上了 http://votes.nilov-sergey-demo-apps.tk/about

请查看ipad设备:/image/AvpXk.jpg因为我不想完全展示视频，我想用包装 div 更改视频容器的宽度，但失败了。

谢谢!

Answer 1

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

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