附加视频 src 后，Mozilla 不会触发视频标签事件答案

【问题标题】：Mozilla doesn't trigger video tage events after attach video src附加视频 src 后，Mozilla 不会触发视频标签事件
【发布时间】：2015-04-07 23:50:01
【问题描述】：

我对 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 + ')')
  }
}

谢谢。

【问题讨论】：

您的第一个函数中似乎缺少结束 }。
:( 这不是问题，但你是对的，因为我在 StackOverFlow 中将代码剪切到过去，当我使用调试时，scaleToFill 有效，我的视频在 div 上传播。但是当我运行它时自动，什么也没发生。我无法想象为什么。:(顺便说一句对不起

标签： javascript html google-chrome video mozilla

【解决方案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);
  }
);

【讨论】：