Detecting video resolution changes

javascript html5 video html5-video

1362 просмотра

3 ответа

123918 Репутация автора

With some codecs and containers, it's possible for a video to change resolution mid-stream. This is particularly common with RTC-style video streams where resolution can scale up/down based on available bandwidth. In other cases, the recording device might be rotated and the video may flip from portrait to landscape or vice versa.

When playing these videos on a web page (simple <video> tag), how can I detect when this change in size occurs with JavaScript?

The best I can think of is verifying the size of the video every frame, but there is quite a bit of overhead to this method. If there were a way to have a callback fired when the video changed sizes, or an event triggered, that'd be best.

Example video that resizes, severely: https://bugzilla.mozilla.org/attachment.cgi?id=8722238

Автор: Brad Источник Размещён: 18.07.2016 02:02

Ответы (3)


1 плюс

1 Репутация автора

You can use loadedmetadata event to define global variables or utilize Element.dataset to reflect initial .videoWidth, .videoHeight properties of <video> element; at timeupdate event of <video> initially stored and current event .videoWidth, .videoHeight values, if one of the properties changed call function

window.onload = function() {
  function handleResolutionChange(event) {
    // do stuff if `.videoWidth` or `.videoHeight` changed from initial value
  }
  var video = document.querySelector("video");
  video.addEventListener("loadedmetadata", function(event) {
    event.target.dataset.width = event.target.videoWidth; 
    event.target.dataset.height = event.target.videoHeight;
  })
  video.addEventListener("timeupdate", function(event) {
    if (+event.target.dataset.width !== event.target.videoWidth
        && +event.target.dataset.height !== event.target.videoHeight) {
          // call `handleResolutionChange` one or more times
          // if `event.target` `.videoWidth` or `.videoHeight` changed
          handleResolutionChange.call(event.target, event)
    }
  })
}
Автор: guest271314 Размещён: 21.07.2016 04:43

2 плюса

103 Репутация автора

look if this helps I'm not sure.

Link - https://www.w3.org/2010/05/video/mediaevents.html

Автор: WebzinSamir Размещён: 27.07.2016 02:44

2 плюса

123918 Репутация автора

Решение

There is now a resize event which fires when the video resolution changes.

HTML

<p data-content="resolution"></p>
<video src="https://bug1250345.bmoattachments.org/attachment.cgi?id=8722238"></video>

JavaScript

document.querySelector('video').addEventListener('resize', (e) => {
  document.querySelector('[data-content="resolution"]').textContent = [
    e.target.videoWidth,
    e.target.videoHeight
  ].join('x');
});

(JSFiddle: http://jsfiddle.net/qz61o2xt/)

References:

Автор: Brad Размещён: 03.01.2019 06:32
Вопросы из категории :
32x32