hls.js适应div大小

hls.js是一个用于加载和播放HLS（HTTP Live Streaming）视频的JavaScript库。要使hls.js适应div大小，可以按照以下步骤进行操作：

1. 在HTML页面中创建一个用来显示视频的div元素，可以为其设置一个固定的宽度和高度，也可以使用CSS样式表来设置。

2. 在JavaScript代码中，使用hls.js库加载视频源文件，可以通过指定视频的URL来实现。

3. 在加载视频源文件之前，可以通过获取div元素的宽度和高度来动态设置视频的大小。例如，可以使用以下代码：

var videoDiv = document.getElementById('video-container');
var videoWidth = videoDiv.offsetWidth;
var videoHeight = videoDiv.offsetHeight;

4. 在加载视频源文件时，使用hls.js的API来设置视频的大小。可以在加载完成后的回调函数中使用hls.avplayer设置视频的宽度和高度。例如，可以使用以下代码：

var video = document.getElementById('video-element');
var hls = new Hls();
hls.loadSource('video-source-url');

hls.on(Hls.Events.MANIFEST_PARSED, function() {
  hls.attachMedia(video);

  video.style.width = videoWidth + 'px';
  video.style.height = videoHeight + 'px';
});

通过以上步骤，hls.js将会根据div元素的大小来加载和播放视频。视频将会自适应div的大小，并保持相应的宽高比例。无论div元素的大小如何变化，视频将会自动适应并保持正确的宽高比例，从而实现在div中适应大小的效果。