相应地将 Video.js 插件的高度调整为固定宽度

问题描述

我是来自bubble.io社区的访问者，我已经在那里发布了此查询。但我认为这是一个相当技术性的问题，并不仅限于泡沫开发环境。 我正在尝试编辑 Video.js 插件以添加一个选项来调整高度以保持视频的纵横比并将其调整为选定的宽度（如 Pinterest）。通过我所做的研究和测试，我必须玩弄画布的尺寸。所以我的问题是如何？

plugin code page

任何意见和建议将不胜感激。预先感谢您，

函数（实例，上下文）{

// Generate a random ID for the element and add the video.js div
var randomId = Math.floor((Math.random() * 100000) + 1);
var elementId = 'vjsElement_' + randomId;

instance.canvas.append("<div style='width:auto;height:auto'><video id='" + elementId + "' class='video-js vjs-fluid' style=' width:100% !important height:auto !important;'></video></div>");

instance.data.elementId = elementId;

// Include CSS file
function addCSS(filename) {
    var head = document.getElementsByTagName('head')[0];

    var style = document.createElement('link');
    style.href = filename;
    style.type = 'text/css';
    style.rel = 'stylesheet';
    head.append(style);
}
$(document).ready(function() {

  // Load skin file
    if (instance.data.skin) {
      addCSS(instance.data.skin);
    }
 
  // Load video.js
    var vjsPlayer;
    vjsPlayer = videojs(elementId,instance.data.options);

  // Trigger events
    vjsPlayer.on('ended',function() {
        instance.triggerEvent('video_ended');
    });

    vjsPlayer.on('playing',function() {
        instance.triggerEvent('video_playing')
    });

    vjsPlayer.on('pause',function() {
        instance.triggerEvent('video_paused')
    });

    instance.data.vjsPlayer = vjsPlayer;

});

}

解决方法

vjs-fluid 类通常会自动使播放器大小与视频纵横比匹配，但是带有 !important 的元素上的直接样式会破坏这一点。移除样式，让包含的 div 成为您需要的宽度或最大宽度。