jquery Bootstrap 3模式和video.js视频未正确调整大小

ar5n3qh5  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(159)

下一页显示了一个缩略图，单击该缩略图时，将显示带有视频的Bootstrap 3模式。它可以工作，但如果视频对于窗口来说太高，它会延伸到窗口下方，用户无法看到整个视频（并且必须滚动）。我试过各种调整大小的策略，但似乎都不起作用。感谢您的建议。URL模糊，抱歉。我需要使用Bootstrap 3。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
        <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet">
    </head>
    <body>
        <a href="#" data-toggle="modal" data-target="#viewVideoModal" data-video-url="https://VIDEOFILE" class="video-link">
            <img id="img-401" src="https://VIDEOFILE?thumb=1" height="280" width="157">
        </a>
        <div class="modal fade" id="viewVideoModal" tabindex="-1" role="dialog" aria-labelledby="viewVideoModalLabel">
            <div class="modal-dialog" role="document" style="margin-top:50px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">
                                &times;
                            </span>
                            <span class="sr-only">
                                Close
                            </span>
                        </button>
                    </div>
                    <div class="modal-body" id="viewVideoBody"></div>
                </div>
            </div>
        </div>
        <script>
    var player;
    $('#viewVideoModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var videoSrc = button.data('video-url');
        var videoTag = document.createElement('video');
        videoTag.setAttribute('class', 'video-js vjs-fluid center-block vjs-default-skin');
        videoTag.setAttribute('controls', '');
        videoTag.setAttribute('preload', 'auto');
        videoTag.setAttribute('data-setup', '{}');

        // Create a new source tag
        var sourceTag = document.createElement('source');
        sourceTag.setAttribute('src', videoSrc);
        sourceTag.setAttribute('type', 'video/mp4');

        // Append the source tag to the video tag
        videoTag.appendChild(sourceTag);

        // Get the modal body and clear its contents
        var modalBody = document.getElementById('viewVideoBody');
        modalBody.innerHTML = '';

        // Append the video tag to the modal body
        modalBody.appendChild(videoTag);

        // Initialize the video player
        player = videojs(videoTag);
    });
        </script>
    </body>
</html>
jquery

2条答案

按热度按时间
xcitsw88

xcitsw881#

我决定采用以下解决方案。它并不完美，因为根据视频的宽高比，在视频的两侧或视频的上方和下方都有黑条。但除此之外，它的工作。
我对我发布的原始代码进行了3次修改。

  • 我手动将modal-dialog的宽度/高度设置为width:80vw; height: 80vh
  • 我将vjs-fluid类更改为vjs-fill
  • 每次示例化视频时，我都手动将videoModalBody的宽度和高度设置为width:80vw; height: 80vh

下面是修改后的代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
        <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet">
    </head>
    <body>
        <a href="#" data-toggle="modal" data-target="#viewVideoModal" data-video-url="https://VIDEOFILE" class="video-link">
            <img id="img-401" src="https://VIDEOFILE?thumb=1" height="280" width="157">
        </a>
        <div class="modal fade" id="viewVideoModal" tabindex="-1" role="dialog" aria-labelledby="viewVideoModalLabel">
            <div class="modal-dialog" role="document" style="width:80vw;height:80vh">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">
                                &times;
                            </span>
                            <span class="sr-only">
                                Close
                            </span>
                        </button>
                    </div>
                    <div class="modal-body" id="viewVideoBody"></div>
                </div>
            </div>
        </div>
        <script>
    var player;
    $('#viewVideoModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var videoSrc = button.data('video-url');
        var videoTag = document.createElement('video');
        videoTag.setAttribute('class', 'video-js vjs-fill center-block vjs-default-skin');
        videoTag.setAttribute('controls', '');
        videoTag.setAttribute('preload', 'auto');
        videoTag.setAttribute('data-setup', '{}');

        // Create a new source tag
        var sourceTag = document.createElement('source');
        sourceTag.setAttribute('src', videoSrc);
        sourceTag.setAttribute('type', 'video/mp4');

        // Append the source tag to the video tag
        videoTag.appendChild(sourceTag);

        // Get the modal body and clear its contents
        var modalBody = document.getElementById('viewVideoBody');
        modalBody.setAttribute('style', 'height:80vh;width:80vw');
        modalBody.innerHTML = '';

        // Append the video tag to the modal body
        modalBody.appendChild(videoTag);

        // Initialize the video player
        player = videojs(videoTag);
    });
        </script>
    </body>
</html>
赞(0）分享  回复(0）举报  2023-06-22
cngwdvgl

cngwdvgl2#

每次显示模态时，您都要创建一个新的<video>标记，并将其附加到模态主体。视频被设置为流体，这应该使其响应，但当视频尺寸超过视口高度时，模态似乎没有按预期响应。

基于CSS的解决方案

使视频适合模态（和视口）的一种方法是通过使用CSS限制视频的高度，并确保视频保持其纵横比。CSS max-height和object-fit属性在这里非常有用。
首先，在HTML的<head>部分添加一个新的CSS类：

<style>
.modal-video-container {
    max-height: 80vh;  /* Adjust this value as needed */
    overflow: auto;
}
.modal-video-container .video-js {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
</style>

接下来，使用这个类将<video>元素 Package 在<div>中，因此像这样修改JavaScript代码：

$('#viewVideoModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var videoSrc = button.data('video-url');
    var videoTag = document.createElement('video');
    videoTag.setAttribute('class', 'video-js vjs-fluid center-block vjs-default-skin');
    videoTag.setAttribute('controls', '');
    videoTag.setAttribute('preload', 'auto');
    videoTag.setAttribute('data-setup', '{}');

    // Create a new source tag
    var sourceTag = document.createElement('source');
    sourceTag.setAttribute('src', videoSrc);
    sourceTag.setAttribute('type', 'video/mp4');

    // Append the source tag to the video tag
    videoTag.appendChild(sourceTag);

    // Create a new div to contain the video, and append the video to it
    var videoContainer = document.createElement('div');
    videoContainer.setAttribute('class', 'modal-video-container');
    videoContainer.appendChild(videoTag);

    // Get the modal body and clear its contents
    var modalBody = document.getElementById('viewVideoBody');
    modalBody.innerHTML = '';

    // Append the video container to the modal body
    modalBody.appendChild(videoContainer);

    // Initialize the video player
    player = videojs(videoTag);
});

max-height的80vh值意味着视频将占据视口高度的80%。您可以根据需要调整此值。overflow: auto将提供一个滚动条，以防视频高度仍然超过模态高度。object-fit: contain;确保视频的宽高比保持不变。
警告：Internet Explorer不支持object-fit。如果您需要支持IE，则可能需要找到不同的解决方案或使用polyfill。
模态对话框现在大小正确，但视频现在有一个垂直滚动条。
我正在寻找（希望）的是一个解决方案，将调整视频，使没有滚动条。
如果你想调整视频大小以适应模态而不需要滚动条，你需要调整一下CSS和JavaScript。
首先，更新CSS，将max-height设置为100%，将height设置为auto，用于.video-js类：

<style>
.modal-video-container {
    height: 80vh;  /* Adjust this value as needed */
}
.modal-video-container .video-js {
    width: 100%;
    max-height: 100%;
    height: auto;
}
</style>

然后修改JavaScript。不要直接设置视频的高度，而是将模态体的高度设置为视口高度的百分比，然后让视频填充可用空间：

$('#viewVideoModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var videoSrc = button.data('video-url');
    var videoTag = document.createElement('video');
    videoTag.setAttribute('class', 'video-js vjs-fluid center-block vjs-default-skin');
    videoTag.setAttribute('controls', '');
    videoTag.setAttribute('preload', 'auto');
    videoTag.setAttribute('data-setup', '{}');

    // Create a new source tag
    var sourceTag = document.createElement('source');
    sourceTag.setAttribute('src', videoSrc);
    sourceTag.setAttribute('type', 'video/mp4');

    // Append the source tag to the video tag
    videoTag.appendChild(sourceTag);

    // Create a new div to contain the video, and append the video to it
    var videoContainer = document.createElement('div');
    videoContainer.setAttribute('class', 'modal-video-container');
    videoContainer.appendChild(videoTag);

    // Get the modal body and clear its contents
    var modalBody = document.getElementById('viewVideoBody');
    modalBody.innerHTML = '';

    // Append the video container to the modal body
    modalBody.appendChild(videoContainer);

    // Initialize the video player
    player = videojs(videoTag);
});

通过此调整，视频应填充模态体到其最大高度，并根据视口高度调整其大小。由于vjs-fluid类，视频将保持其宽高比。
如果视频的宽高比与模态体的宽高比不匹配，模态体中可能有一些未使用的空间，但视频本身应该适合没有滚动条。
注意：.modal-video-container的height的值80vh可以根据您的需要进行调整。该值意味着模态体将是视口高度的80%。

基于jQuery UI的解决方案

作为替代方案，假设您可以在项目中添加/使用jQuery UI，您可以考虑“Apply size of video element to bootstrap modal while scaling”。
这段jQuery代码使用jQuery UI库中的.resizable() function来调整模态内容的大小，并使用alsoResize选项将相同的大小调整应用于视频元素。
然后，它将一个函数绑定到resizestop事件，当用户停止调整元素大小时，该事件将被触发。此函数根据模态内容的新大小调整视频的高度和宽度，减去一些像素以解决填充问题。
这将是：

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
...
$('.modal-content').resizable({
    alsoResize: "#video",
    minHeight: 150,
    minWidth: 200
}).bind({
    resizestop: function(event, ui){
        $('video').css({
            'height':ui.size.height - 60,
            'width': ui.size.width - 30
        });
    }
});

值-60和-30分别是要从计算的高度和宽度中删除的填充。
确保将"#video"替换为视频元素的适当选择器。此外，您可能需要根据您的确切模态设计和布局调整填充值（-60和-30）。
将这段新代码合并到前面的代码中，我们可以修改'show.bs.modal'事件，如下所示：

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
...
$('#viewVideoModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var videoSrc = button.data('video-url');
    var videoTag = document.createElement('video');
    videoTag.setAttribute('id', 'video'); // Added this line to give the video an id for the jQuery selector
    videoTag.setAttribute('class', 'video-js vjs-fluid center-block vjs-default-skin');
    videoTag.setAttribute('controls', '');
    videoTag.setAttribute('preload', 'auto');
    videoTag.setAttribute('data-setup', '{}');

    // Create a new source tag
    var sourceTag = document.createElement('source');
    sourceTag.setAttribute('src', videoSrc);
    sourceTag.setAttribute('type', 'video/mp4');

    // Append the source tag to the video tag
    videoTag.appendChild(sourceTag);

    // Create a new div to contain the video, and append the video to it
    var videoContainer = document.createElement('div');
    videoContainer.setAttribute('class', 'modal-video-container');
    videoContainer.appendChild(videoTag);

    // Get the modal body and clear its contents
    var modalBody = document.getElementById('viewVideoBody');
    modalBody.innerHTML = '';

    // Append the video container to the modal body
    modalBody.appendChild(videoContainer);

    // Initialize the video player
    player = videojs(videoTag);
}).on('shown.bs.modal', function() {
    // The modal is now fully visible so we can resize the video
    $('.modal-content').resizable({
        alsoResize: "#video",
        minHeight: 150,
        minWidth: 200
    }).bind('resizestop', function(event, ui) {
        $('#video').css({
            'height': ui.size.height - 60, // Adjust these values based on your padding
            'width': ui.size.width - 30
        });
    });
});

这段代码首先为video标记分配一个id 'video'，这样我们就可以在'shown.bs.modal'事件中使用jQuery选择它。
shown.bs.modal事件是一个特定于Bootstrap的事件，它在模态对用户可见之后被激发。此时，我们可以调整视频大小以适应模态内容，同时考虑任何填充。
同样，在resize函数中根据你的modal中的padding调整-60和-30的值。如果没有任何填充，可以将这些值设置为0。

赞(0）分享  回复(0）举报  2023-06-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com