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()函数之前附加它，但是，在附加事件之前可能已触发该事件。

＆＃13;

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);
  }
);

＆＃13;

在附加视频src后，Mozilla不会触发视频tage事件

1 个答案: