0

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

插件代码页

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

功能（实例，上下文）{

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

});

}

4

1 回答 1

1

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

于 2021-06-09T10:40:42.270 回答