#html #jquery #css #video #bootstrap-3
Вопрос:
У меня есть список некоторых элементов в базе данных с диапазоном столбцов и строк. Затем я хочу отобразить их на веб-странице. Моей первоначальной мыслью было использовать bootstrap, но я думаю, что это может усложнить то, чего я пытаюсь достичь.
Я тестировал css сетки с элементом видео, и, похоже, он изменяет размер видео в сетке в firefox. Однако в Chrome и edge размер видео изменяется, чтобы заполнить область, что может сделать его намного больше.
Моя тестовая настройка: В CSS я настроил сетку 4 x 4 для размещения элементов видео. У меня есть css для определения размера видео.
1 небольшое видео в правом верхнем углу (1 Х 1). 1 длинное видео сверху (3 Х 1). 2 видео одинакового размера, как внизу.
Это должно создать видео с небольшой рамкой, затем длинное видео вверху (граница большой ширины). 2 видео внизу с небольшой рамкой по размеру.
Мой код выглядит так:
$(document).ready(function() { var videos = $('.video'); for (let i = 0; i lt; videos.length; i ) { var video = videos[i]; PlayHlsVideo(video); } }); function PlayHlsVideo(videoItem) { var videoSrc = 'https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8'; if (Hls.isSupported()) { var hls = new Hls(); var config = { testBandwidth: false, abrEwmaDefaultEstimate: 1000000, startLevel: -1 } var hls = new Hls(config); hls.loadSource(videoSrc); if (hls.loadSource != null) { hls.attachMedia(videoItem); hls.on(Hls.Events.MANIFEST_PARSED, function() { //required for auto-play but off on currently. may need to be on for live stream. //video.muted = 'muted'; videoItem.play(); }); } } // HLS.js is not supported on platforms that do not have Media Source // Extensions (MSE) enabled. // // When the browser has built-in HLS support (check using `canPlayType`), // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video // element through the `src` property. This is using the built-in support // of the plain video element, without using HLS.js. // // Note: it would be more normal to wait on the 'canplay' event below however // on Safari (where you are most likely to find built-in HLS support) the // video.src URL must be on the user-driven white-list before a 'canplay' // event will be emitted; the last video event that can be reliably // listened-for when the URL is not on the white-list is 'loadedmetadata'. else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoSrc; } } .grid-container { display: grid; grid-template-columns: repeat(3, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, 1fr) minmax(0, 1fr); align-content: center; width: 100vw; height: 100vh; background-color: black; } .grid-containergt;div { background-color: rgba(255, 255, 255, 0.8); text-align: center; } .video-wrap { width: 100%; height: 100%; background-color: black; } .item1 { grid-column: 1 / 2; grid-row: 1 / 2; } .item2 { grid-column: 2 / 5; grid-row: 1 / 2; } .item3 { grid-column: 1 / 3; grid-row: 3 / 5; } .item4 { grid-column: 3 / 5; grid-row: 3 / 5; } lt;!-- Bootstrap-3 amp; jquery --gt; lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt; lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous"gt; lt;script src="https://cdn.jsdelivr.net/npm/hls.js@latest"gt;lt;/scriptgt; lt;script src="~/js/site.js"gt;lt;/scriptgt; lt;link href="~/css/site.css" rel="stylesheet" /gt; lt;!-- Body --gt; lt;div class="grid-container"gt; lt;video id="video_1" class="item1 video video-wrap"gt;lt;/videogt; lt;video id="video_2" class="item2 video video-wrap"gt;lt;/videogt; lt;video id="video_3" class="item3 video video-wrap"gt;lt;/videogt; lt;video id="video_4" class="item4 video video-wrap"gt;lt;/videogt; lt;/divgt; Вот как это выглядит в firefox (как и ожидалось):
Вот как выглядит chrome/edge(неправильно масштабирован):
Я попытался изменить размер ширины и высоты видео на 100% и автоматически. Кажется, я не могу настроить размер видео так, как ожидалось в edge.
Буду признателен за любую помощь, которая укажет мне правильное направление.
Кроме того, если было бы проще/разумнее сделать это другим способом, например, с помощью ремешка для ботинок, я был бы рад это сделать.
Мое единственное предостережение заключается в том, что данные в базе данных могут содержать 1 небольшое видео в середине. Например, элемент в столбцах 2 и 3 и в строках 2 и 3, поэтому снаружи большая граница или теоретически любая комбинация размера и компоновки.
Комментарии:
1. Привет, пожалуйста, используйте Stacksnippet
lt;gt;илиCtrl Mв следующий раз, когда вы опубликуете код. Этот пакет stacksnippet можно запускать и напрямую отображать выходные данные вашего кода. Кроме того, вы можете включать изображения напрямую, а не просто связывать их. Я отредактировал ваш вопрос и сделал форматирование за вас.2. Нет проблем, я обязательно сделаю это в будущем. Спасибо за редактирование вопроса для меня, очень признателен.