2015-04-07 33 views
0

我有一個Mozilla的問題,我需要適合視頻尺寸傳播整個div,我試過onloadedmetadataonloadeddata和其他事件。所有以前的事件都在Chrome上完美運行。如果我手動使用scaleToFill從Mozilla的控制檯,它的工作原理Mozilla不會觸發視頻src後的視頻tage事件

這是代碼

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

感謝。

+0

你似乎缺少一個右'}'你的第一個功能。 –

+0

:(它不是問題,但你是對的,因爲我削減了代碼在StackOverFlow中過去它,當我使用調試時,scaleToFill的作品和我的視頻在div上傳播,但是當我自動運行它時,什麼都沒有發生。想象一下爲什麼。:(btw抱歉 –

回答

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