javascript - Mozilla 在附加视频 src 后不会触发视频标签事件

Question

我在使用 Mozilla 时遇到问题，我需要调整视频尺寸以在整个 div 上传播，我尝试了 onloadedmetadata 和 onloadeddata 以及其他事件。之前的所有事件在 Chrome 上都完美运行。如果我从 Mozilla 控制台手动使用scaleToFill，它就可以工作

这是代码

navigator.getUserMedia(constraints, handleUserMedia, handleUserMediaError);

function handleUserMedia(stream) {
  localVideo = document.getElementById('localVideo');
  sendButton.onclick = sendData
  localStream = stream;
  attachMediaStream(localVideo, stream);
  localVideo.onloadedmetadata = function (e) {
    scaleToFill(localVideo);
  }

function scaleToFill(videoTag) {
  var $video = $(videoTag),
      videoRatio = videoTag.videoWidth / videoTag.videoHeight,
      tagRatio = $video.width() / $video.height();
  if (videoRatio < tagRatio) {
    $video.css('-webkit-transform', 'scaleX(' + tagRatio / videoRatio + ')')
    $video.css('-moz-transform', 'scaleX(' + tagRatio / videoRatio + ')')
  } else if (tagRatio < videoRatio) {
    $video.css('-webkit-transform', 'scaleY(' + videoRatio / tagRatio + ')')
    $video.css('-moz-transform', 'scaleY(' + videoRatio / tagRatio + ')')
  }
}

谢谢。

Answer 1

该事件已为我触发。
您可能需要在调用 attachMediaStream() 函数之前附加它，但是，该事件可能在附加它之前就已触发。

var video = document.createElement('video');
document.body.appendChild(video);

video.onloadedmetadata = function(){alert('metadata loaded');};

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);

if (!navigator.getUserMedia) {
  alert('Your browser does not like GUM');
}

navigator.getUserMedia({
    video: true,
    audio: false,
  },

  function(stream) {
    if (navigator.mozGetUserMedia) {
      video.mozSrcObject = stream;
    } else {
      var URL = window.URL || window.webkitURL;
      video.src = URL.createObjectURL(stream);
    }
    video.play();
  },

  function(err) {
    console.log(err);
  }
);