Блог

Я искал здесь и нашел несколько очень старых ответов, но я думаю, что на этот вопрос не было ответа. Я использую плагин mediaCLOUD в WordPress для отображения видео. Когда я создаю страницу, я могу использовать короткий тег для отображения видео, включив его в свою HTML-разметку:

 <div id="my_video">
[mux_video id='2926' autoplay='false' loop='false' muted='false' controls='true' inline='false' preload='metadata']
</div>
 

WordPress запросит внутреннюю базу данных для идентификатора носителя=2926 и в конечном итоге отобразит эту HTML-разметку для отображения видео (URL изменен в целях конфиденциальности).:

 <div id="my_video">
  <figure>
    <video class='mux-player video-js'  width=1920 height=1080 poster='https://www.example.com/wp-content/uploads/2021/08/2926--thumb.jpg' controls preload='metadata'>
      <source src='https://stream.mux.com/<-LONG-ENCODED-ID-HERE>.m3u8' type='application/x-mpegURL' />
    </video>
  </figure>
</div>
 

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

Сначала я подумал, что могу поискать время передачи данных программы (PDT), и это может отсутствовать для предварительно записанного контента, но MUX также предоставляет PDT для старых прямых трансляций. Этот код выведет PDT для текущего запущенного видео, но его нельзя использовать для отличия прямой трансляции от старых видео:

 const video1 = document.querySelector("#my_video video");
let player1 = videojs(video1);
window.player1 = player1;
player1.on('loadeddata', () => {
        let metadataTrack = Array.prototype.find.call(player1.textTracks(), track => track.label === 'segment-metadata');
        metadataTrack.on('cuechange', () => {
                let pdt = metadataTrack.activeCues[0].value.dateTimeString;
                document.getElementById('pdt_1').innerHTML = pdt;
        });
});

 

Я также попытался проверить продолжительность видео, чтобы понять, может ли это помочь мне отличить-я думал, что прямая трансляция может иметь какое-то пустое значение для продолжительности, но это не так. До сих пор, когда я это делаю, он всегда показывает мне некоторое положительное целое значение:

 video1.addEventListener('loadedmetadata', (event) => {
  // duration and dimensions of video are now known
  let dur = Math.round(video1.duration);
  console.log(dur)
});
 

Есть ли какой-нибудь простой JS, который я могу использовать для возврата значения true/false, указывающего, является ли рассматриваемое видео прямой трансляцией или это старое видео фиксированной продолжительности? Кто-то предложил запросить MUX API, но в данном случае это не сработает для меня и увеличит время загрузки моей страницы.

player.duration() предназначен Infinity для прямых трансляций. Индикатор live проверяет это на durationchange событиях.