Использование jQuery для определения размера видеофайла

Question

Я использую videojs для воспроизведения html5-видео разных размеров. Можно ли определить высоту / ширину видеофайла с помощью jQuery (или другого языка сценариев), чтобы я мог динамически вводить их в код для встраивания?

Спасибо!

Answer 1

Боюсь, это не совсем возможно.Чтобы браузер мог определить размер видео, он должен сначала загрузить его.

Одним из решений может быть, если предположить, что это сработает, сначала загрузить видео без указания высоты и ширины.но используя CSS, чтобы скрыть видео, рассчитать размеры, уничтожить видео и загрузить его снова по клику, используя правильный размер.Это было бы невероятно неэффективно.

В качестве альтернативы вы могли бы создать серверный скрипт (PHP / ASP / ...), который читает видеофайл, определяет высоту и ширину, когда исходное содержимое сохраняется и сохраняетсявысота и ширина для базы данных.После этого вы сможете читать высоту и ширину из базы данных при каждом просмотре страницы.Хотя вы можете заставить такой скрипт читать видеофайл при каждом запросе, это будет неэффективно и увеличит время, необходимое для генерации страницы.

Если вы используете PHP, я настоятельно рекомендую вампосмотрите на ffmpeg-php , бесплатную библиотеку с открытым исходным кодом, которую вы можете использовать для разбора видеофайлов нескольких типов.

Еще одна мысль: Другое решение может бытьне указывайте высоту и ширину в коде для встраивания и позволяйте браузеру самостоятельно изменять размер видео.Затем вы можете изменить размер лайтбокса, чтобы исправить видео контейнер.У многих плагинов лайтбокса есть события, к которым вы можете подключиться.

Answer 2

Да, вы можете получить свойства videoWidth и videoHeight - они загружаются с метаданными видео, поэтому не используйте preload = "none" с вашим видеоэлементом, так как он предотвращает загрузку метаданных, пока кто-то не попытается воспроизвести видео. Вот как это сделать с помощью jquery:

$(function(){
  $('video').bind('loadedmetadata', function(){
    var rawWidth = $(this).prop('videoWidth');
    var rawHeight = $(this).prop('videoHeight');
  });
});

Answer 3

Поскольку размер видео указан в метаданных файла, я думаю, что вы можете получить к нему доступ только на сервере. Потоковое видео не является полным файлом и не приходит с какими-либо метаданными.

Итак, я предлагаю вам простое решение (ну, на самом деле это обходной путь): перед загрузкой видео выполните запрос $.ajax. Ваш сервер получит этот запрос и вернет размер на основе метаданных, к которым он может получить доступ. Затем на вашем обратном вызове ajax sucess вы сможете настроить контейнер height и, наконец, показать видео.

Кроме того, также важно помнить, что доступ к файлу для чтения метаданных неэффективен, когда кто-то смотрит видео. Поэтому очень хотелось, чтобы вы правильно настроили caching ответа ajax.

Answer 4

Вы можете получить высоту видео, используя атрибут высоты (если он установлен на элементе <video> ...

$('#idOfVideoElement').attr('height');