Как определить продолжительность видео файла JavaScript и вывести его на сайте?

Question

Подскажите как с помощью JavaScript вывести на сайте общее время видео файла.

пробовал написать такой скрипт но он не работает.

(function (window) {
    var videoNode = window.document.querySelector("#myvideo");
    var timeNode = window.document.querySelector("#time");
    videoNode.addEventListener("loadedmetadata", function (e) {
        var duration = videoNode.duration.toFixed(1);
        var m = duration % 60;
        timeNode.innerText =
            Math.floor(duration / 60) + ":" + (m < 10 ? "0" : "") + m;
    });
})
(window);

        <div id="div-timefile"><a id="time"></a></div>
        <video id="myvideo" class="video_list_item" muted="" <?=$autoplay?> >
               <source src="https://www.youtube.com/watch?v=sOVQAfLiYdY>" controls="" autoplay="" muted="">
        </video>

**вот как это выглядит в моём коде **

Answer 1

Чтобы отобразить общее время видеофайла на веб-сайте с помощью JavaScript, вы можете использовать свойство продолжительности (duration) объекта HTMLVideoElement. Это свойство возвращает продолжительность видео в секундах.

Вот пример того, как вы можете использовать это свойство для отображения общей продолжительности видео на веб-странице:

<html>
<body>

<video id="myVideo" src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" controls></video>

<p>Total time: <span id="totalTime"></span></p>

<script>
  var video = document.getElementById("myVideo");
  var totalTime = document.getElementById("totalTime");
  
  video.addEventListener("loadedmetadata", function() {
    // Display the total time of the video in the span element
    totalTime.innerHTML = video.duration + " seconds";
  });
</script>

</body>
</html>

В этом примере мы сначала получаем ссылку на элемент video и элемент span totalTime, используя их атрибуты id. Затем мы добавляем прослушиватель событий для события loadmetadata, которое запускается, когда браузер загружает метаданные для видео (включая продолжительность). Внутри прослушивателя событий мы обновляем innerHTML элемента span totalTime, чтобы отобразить общее время видео.

Обратите внимание, что этот метод будет работать только в том случае, если видеофайл уже загружен браузером. Если видео передается с сервера, браузеру может потребоваться некоторое время, чтобы получить метаданные и инициировать событие loadmetadata. В этом случае вам может потребоваться использовать другой метод для отображения общего времени видео, например, получить его с сервера или использовать событие timeupdate для обновления отображения во время воспроизведения видео.

Answer 2

<span class="time-duration">00:00:00</span>
....
function setTime(time){ 
    return parseInt(time / 3600) + ':' +
           parseInt((time % 3600) / 60) + ':' + 
           parseInt((time % 3600) % 60);
}
durTime=document.querySelector('time-duration');
video.addEventListener('loadedmetadata', () => {
durTime.innerHTML=setTime(video.duration);
});

БЛОГ НА HUSL

Как определить продолжительность видео файла JavaScript и вывести его на сайте?

Ответы (2 шт):