Javascript 浏览器不兼容firefox

我需要帮助这个脚本转换视频css3和js编写的克里斯蒂安海尔曼。 它可以在safari和chrome上运行，但不能在firefox上运行……任何人都可以告诉我为什么

这是查看示例页面的链接：

这是小提琴：

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
*/

（函数（）{
/*预定义缩放和旋转*/
var zoom=1，
旋转=0；
/*获取必要的DOM元素*/
var stage=document.getElementById（'stage'），
v=document.getElementsByTagName（'video'）[0]，
控件=document.getElementById（'controls'）；
/*可能用于转换的特定于浏览器的设置数组*/
变量属性=['transform'、'WebKittTransform'、'MozTransform'，
“msTransform”、“OtrTransform”]，
prop=属性[0]；
/*迭代器和东西*/
变量i，j，t；
/*找出浏览器支持的CSS转换*/
对于（i=0，j=properties.length；i示例页面上的旋转效果很好。视频不会播放，因为您仅以Firefox不支持的格式提供（至少在我的平台上）。请在中提供另一种格式

从Christian的页面（注意第二个
源代码
元素）：


您的浏览器似乎不支持HTML5视频标签。
您可以将此视频视为收藏的一部分
.

Ok。Safari和chrome使用webkit引擎呈现和显示HTML，而firefox使用Gecko。这会造成差异。使用webkit支持的CSS3属性，不幸的是，firefox不支持这些属性，因为您的小提琴不包含视频。请在视频中添加或，并更新fiddle@AkshaYKANTHELWAL——教程URL在Firefox中运行良好（Christian Heilmann为Mozilla基金会工作）！EHI家伙！小提琴被更新了，昆廷的代码和OGV文件链接在JSFIDDL.NET上，但是在我的页面上没有，大家知道为什么吗？
<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>