瀏覽器不兼容firefox

我需要這個腳本的幫助來轉換css3和js由Christian Heilmann寫的視頻。它適用於safari和chrome，但不適用於firefox ......任何人都可以告訴我爲什麼？瀏覽器不兼容firefox

這是查看爲例頁面中的鏈接：http://sickmind.it/videotransform/transform_video.html

，這是小提琴：http://jsfiddle.net/mioii/c4Qtc/7/

JS代碼是這樣的：

(function(){ 

/* predefine zoom and rotate */ 
    var zoom = 1, 
     rotate = 0; 

/* Grab the necessary DOM elements */ 
    var stage = document.getElementById('stage'), 
     v = document.getElementsByTagName('video')[0], 
     controls = document.getElementById('controls'); 

/* Array of possible browser specific settings for transformation */ 
    var properties = ['transform', 'WebkitTransform', 'MozTransform', 
        'msTransform', 'OTransform'], 
     prop = properties[0]; 

/* Iterators and stuff */  
    var i,j,t; 

/* Find out which CSS transform the browser supports */ 
    for(i=0,j=properties.length;i<j;i++){ 
    if(typeof stage.style[properties[i]] !== 'undefined'){ 
     prop = properties[i]; 
     break; 
    } 
    } 

/* Position video */ 
    v.style.left = 0; 
    v.style.top = 0; 

/* If there is a controls element, add the player buttons */ 
/* TODO: why does Opera not display the rotation buttons? */ 
    if(controls){ 
    controls.innerHTML = '<button class="play">play</button>'+ 
          '<div id="change">' + 
          '<button class="zoomin">+</button>' + 
          '<button class="zoomout">-</button>' + 
          '<button class="left">⇠</button>' + 
          '<button class="right">⇢</button>' + 
          '<button class="up">⇡</button>' + 
          '<button class="down">⇣</button>' + 
          '<button class="rotateleft">&#x21bb;</button>' + 
          '<button class="rotateright">&#x21ba;</button>' + 
          '<button class="reset">reset</button>' + 
          '</div>'; 
    } 

/* If a button was clicked (uses event delegation)...*/ 
    controls.addEventListener('click',function(e){ 
    t = e.target; 
    if(t.nodeName.toLowerCase()==='button'){ 

/* Check the class name of the button and act accordingly */  
     switch(t.className){ 

/* Toggle play functionality and button label */  
     case 'play': 
      if(v.paused){ 
      v.play(); 
      t.innerHTML = 'pause'; 
      } else { 
      v.pause(); 
      t.innerHTML = 'play'; 
      } 
     break; 

/* Increase zoom and set the transformation */ 
     case 'zoomin': 
      zoom = zoom + 0.1; 
      v.style[prop]='scale('+zoom+') rotate('+rotate+'deg)'; 
     break; 

/* Decrease zoom and set the transformation */ 
     case 'zoomout': 
      zoom = zoom - 0.1; 
      v.style[prop]='scale('+zoom+') rotate('+rotate+'deg)'; 
     break; 

/* Increase rotation and set the transformation */ 
     case 'rotateleft': 
      rotate = rotate + 5; 
      v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')'; 
     break; 
/* Decrease rotation and set the transformation */ 
     case 'rotateright': 
      rotate = rotate - 5; 
      v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')'; 
     break; 

/* Move video around by reading its left/top and altering it */ 
     case 'left': 
      v.style.left = (parseInt(v.style.left,10) - 5) + 'px'; 
     break; 
     case 'right': 
      v.style.left = (parseInt(v.style.left,10) + 5) + 'px'; 
     break; 
     case 'up': 
      v.style.top = (parseInt(v.style.top,10) - 5) + 'px'; 
     break; 
     case 'down': 
      v.style.top = (parseInt(v.style.top,10) + 5) + 'px'; 
     break; 

/* Reset all to default */ 
     case 'reset': 
      zoom = 1; 
      rotate = 0; 
      v.style.top = 0 + 'px'; 
      v.style.left = 0 + 'px'; 
      v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')'; 
     break; 
     }   

     e.preventDefault(); 
    } 
    },false); 
})(); 



/* 
    Zooming and rotating HTML5 video player 
    Homepage: http://github.com/codepo8/rotatezoomHTML5video 
    Copyright (c) 2011 Christian Heilmann 
    Code licensed under the BSD License: 
    http://wait-till-i.com/license.txt 
*/

isithackday.com/hacks/videozoomandrotate /transforming-video.html 我無法聯繫作者詢問信息，希望有人能幫助我！謝謝你們！

來源

2013-10-14 SickMind

確定。 Safari和Chrome使用webkit引擎來渲染和顯示HTML，而firefox使用Gecko。這會導致差異。使用webkit支持的CSS3屬性，但不幸的是，由於相同的原因，Firefox /可能不支持Firefox的 –

您的小提琴不包含視頻。請在您的視頻中添加http：//path.mp4或http：//path.ogg並更新小提琴 –

@AkshayKhandelwal - 教程網址在Firefox中正常工作（Christian Heilmann爲Mozilla基金會工作！）。 – Quentin

旋轉對您的示例頁面正常工作。視頻不能播放，因爲您只以Firefox不支持的格式提供視頻（至少在我的平臺上）。在a supported format提供替代方案。

從基督教的頁面（注意是第二source元素）：

<video> 
    <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">   
    <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973.ogv" type="video/ogg">   
    <p>Your browser doesn't support the HTML5 video tag it seems. 
     You can see this video as part of a collection 
     <a href="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/"> 
     at archive.org</a>. 
    </p>   
</video>

來源

2013-10-14 09:05:16 Quentin

感謝提示昆汀！ – SickMind

瀏覽器不兼容firefox

回答

相關問題